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

เพื่อที่จะสร้างเส้นด้วย KonvaJS นั้น  เราจะใช้ Konva.Line() ครับ. สำหรับรายละเอียดวิธีการใช้แอตทริบิวต์และเมธอดสามารถดูได้จากที่นี่ครับ API Document : http://konvajs.github.io/docs/shapes/Line_-_Simple_Line.html

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

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

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

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

      // dashed line
      var greenLine = new Konva.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 Konva.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]
      });

      /*
       * ตอนนี้ตำแหน่งเริ่มต้นของแต่ละเส้นอยู่ในจุดเดียวกัน
       * ฉะนั้นเราจะย้ายให้มันอยู่คนละตำแหน่งตามแนวแกน y โดยใช้เมธอด
       * move()
       */
      redLine.move({
        x : 0,
        y : 5
      });
      greenLine.move({
        x : 0,
        y : 55
      });
      blueLine.move({
        x : 0,
        y : 105
      });
      
      // เพิ่ม redLine, greenLine และ blueLine เข้าไปใน layer
      layer.add(redLine);
      layer.add(greenLine);
      layer.add(blueLine);
      // เพิ่ม layer เข้าไปใน stage
      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.