การสร้างรูปทรงครึ่งวงแหวนด้วย KonvaJS

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

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

?

1 2	<div id="container"> </div>

ตัวอย่าง : วาดรูปทรงครึ่งวงแหวน

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

var stage = new Konva.Stage({   container: 'container',   width: 578,   height: 200 }); var layer = new Konva.Layer();   var arc = new Konva.Arc({   x: stage.getWidth() / 2,  //กำหนดจุดวาดตามแนวแกน x   y: stage.getHeight() / 2, //กำหนดจุดวาดตามแนวแกน y   innerRadius: 40,          // รัศมีภายใน   outerRadius: 70,          // รัศมีภายนอก   angle: 60,                // มุม   fill: 'yellow',           // ใส่สีพื้น   stroke: 'black',          // กำหนดสีเส้น   strokeWidth: 4            // กำหนดขนาดเส้น });   // เพิ่มรูปเข้าไปใน layer   layer.add(arc);     // เพิ่ม 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.