การสร้างลูกศรด้วย KonvaJS

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

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

ตัวอย่าง : วาดลูกศร

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

      var arrow = new Konva.Arrow({
        x: stage.getWidth() / 4, //กำหนดจุดวาดตามแนวแกน x
        y: stage.getHeight() / 4,//กำหนดจุดวาดตามแนวแกน y
        points: [0,0, stage.getWidth()/ 2, stage.getHeight()/ 2], // กำหนดตำแหน่งทิศทางลูกศร
        pointerLength: 20,      // ความยาวลูกศร
        pointerWidth : 20,      // ขนาดลูกศร
        fill: 'black',          // ใส่สีพื้น
        stroke: 'black',        // กำหนดสีเส้น
        strokeWidth: 4          // กำหนดขนาดเส้น
      });
        // เพิ่มรูปเข้าไปใน layer
        layer.add(arrow);

        // เพิ่ม 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.