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

เพื่อที่จะสร้างเส้นด้วย KineticJS นั้น  เราจะใช้ Kinetic.Line() ครับ. สำหรับรายละเอียดวิธีการใช้แอตทริบิวต์และเมธอดสามารถดูได้จากที่นี่ครับ API Document : http://kineticjs.com/docs/Kinetic.Line.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 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

var stage = new Kinetic.Stage({   container: 'container',   width: 578,   height: 200 });   var layer = new Kinetic.Layer(); // ลักษณะการกำหนดเส้นจำใส่ตัวเลขเป็นคู่ๆ point[x,y,x,y,.....] อ้างอิงตำแหน่งบน canvas var redLine = new Kinetic.Line({   points: [73, 70, 340, 23, 450, 60, 500, 20],   stroke: 'red',      // กำหนดสีเส้น   strokeWidth: 15,    // กำหนดขนาดเส้น   lineCap: 'round',   // รูปแบบปลายเส้น   lineJoin: 'round'   // รูปแบบการเชื่อมเส้น });   // dashed line var greenLine = new Kinetic.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 Kinetic.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] });   /*  * since each line has the same point array, we can  * adjust the position of each one using the  * move() method  */ redLine.move(0, 5); greenLine.move(0, 55); blueLine.move(0, 105);   layer.add(redLine); layer.add(greenLine); layer.add(blueLine); 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.