การวาดรูปทรงหลายเหลี่ยมด้วย KineticJS

เพื่อที่จะสร้างรูปทรงหลายเหลี่ยมด้วย KineticJS นั้น  เราจะใช้ Kinetic.Polygon() ครับ. สำหรับรายละเอียดวิธีการใช้แอตทริบิวต์และเมธอดสามารถดูได้จากที่นี่ครับ API Document : http://kineticjs.com/docs/Kinetic.RegularPolygon.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
var stage = new Kinetic.Stage({
  container: 'container',
  width: 578,
  height: 200
});
 
var layer = new Kinetic.Layer();
// ลักษณะการกำหนดเส้นจำใส่ตัวเลขเป็นคู่ๆ point[x,y,x,y,.....] อ้างอิงตำแหน่งบน canvas
var poly = new Kinetic.Polygon({
  points: [73, 192, 73, 160, 340, 23, 500, 109, 499, 139, 342, 93],
  fill: 'blue',    // ใส่สีพื้น
  stroke: 'black', // กำหนดสีเส้น
  strokeWidth: 5   // กำหนดขนาดเส้น
});
 
// add the shape to the layer
layer.add(poly);
 
// add the layer to the 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.
    Blogger Comment

0 comments:

Post a Comment