การวาดเส้นด้วย KineticJS

เพื่อที่จะสร้างเส้นด้วย KineticJS นั้น  เราจะใช้ Kinetic.Line() ครับ. สำหรับรายละเอียดวิธีการใช้แอตทริบิวต์และเมธอดสามารถดูได้จากที่นี่ครับ API Document : http://kineticjs.com/docs/Kinetic.Line.html

ตัวอย่าง แทคที่ใช้

ตัวอย่าง : วาดเส้น

      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });

      var layer = new Kinetic.Layer();
      // ลักษณะการกำหนดเส้นจำใส่ตัวเลขเป็นคู่ๆ point[x,y,x,y,.....] อ้างอิงตำแหน่งบน canvas
      var redLine = new Kinetic.Line({
        points: [73, 70, 340, 23, 450, 60, 500, 20], 
        stroke: 'red',      // กำหนดสีเส้น
        strokeWidth: 15,    // กำหนดขนาดเส้น
        lineCap: 'round',   // รูปแบบปลายเส้น
        lineJoin: 'round'   // รูปแบบการเชื่อมเส้น
      });

      // dashed line
      var greenLine = new Kinetic.Line({
        points: [73, 70, 340, 23, 450, 60, 500, 20],
        stroke: 'green',
        strokeWidth: 2,
        lineJoin: 'round',  
        /*
         * การกำหนดเส้นประขนาดยาว 33px
         * และช่องว่าระหว่างเส้น 10px
         */
        dashArray: [33, 10] 
      });

      // complex dashed and dotted line
      var blueLine = new Kinetic.Line({
        points: [73, 70, 340, 23, 450, 60, 500, 20],
        stroke: 'blue',
        strokeWidth: 10,
        lineCap: 'round',
        lineJoin: 'round',
        /*
         * การกำหนดเส้นประขนาดยาว 29px ช่องว่าระหว่างเส้น
         * 20px จุดขนาด 0.001px (a dot)
         * ช่องว่าระหว่างจุด 20px
         */
        dashArray: [29, 20, 0.001, 20]
      });

      /*
       * since each line has the same point array, we can
       * adjust the position of each one using the
       * move() method
       */
      redLine.move(0, 5);
      greenLine.move(0, 55);
      blueLine.move(0, 105);

      layer.add(redLine);
      layer.add(greenLine);
      layer.add(blueLine);
      stage.add(layer);

ผลลัพธ์ที่ได้คือ

About Nop

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.