การวาดรูปทรงวงกลมด้วย KineticJS

เพื่อที่จะสร้างรูปทรงวงกลมด้วย KineticJS นั้น  เราจะใช้ Kinetic.Circle() ครับ. สำหรับรายละเอียดวิธีการใช้แอตทริบิวต์และเมธอดสามารถดูได้จากที่นี่ครับ API Document : http://kineticjs.com/docs/Kinetic.Circle.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 Kinetic.Stage({
  container: 'container',
  width: 578,
  height: 200
});
 
var layer = new Kinetic.Layer();
 
var circle = new Kinetic.Circle({
  x: stage.getWidth() / 2,   // กำหนดแนวแกน x
  y: stage.getHeight() / 2,  // กำหนดแนวแกน y
  radius: 70,                // กำหนดรัศมี
  fill: 'blue',              // ใส่สีพื้น
  stroke: 'black',           // กำหนดสีเส้น
  strokeWidth: 4             // กำหนดขนาดเส้น
});
 
// add the shape to the layer
layer.add(circle);
 
// 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