การวาด Grid ด้วย KonvaJS

ต่อไปนี้เป็นตัวอย่างในการเอา KonvaJS ไปใช้งาน ซึ่งในตัวอย่างจะเป็นการวาดเส้นแบบ Grid ซึ่งผู้เขียนเคยเอาไปประยุกต์ใช้ในโปรเจคเก่าโดยใช้ KineticJS ก่อนหน้านั้น ผู้เขียนทำการสร้าง Grid เพื่อพัฒนาโปรแกรมให้เป็นตัว editor ใช้สำหรับเป็นเครื่องมือวาดรูปทรงต่างๆ  ใช้จัดตำแหน่งด้วย นี่คือตัวอย่างการวาด Grid โดยการใช้ KonvaJS ครับ

ตัวอย่าง HTML

?

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

ตัวอย่าง JS

?

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

var stage = new Konva.Stage({     container: 'container',  width : $('#container').width(),  height : $('#container').height() }); var layer = new Konva.Layer(); stage.add(layer);   var GRID_SIZE = 20, width = stage.getWidth(), height = stage.getHeight(); // horizontal line for (var i = 0; i < width + 1; i++) {  var I = i * GRID_SIZE;  var l = new Konva.Line({   strokeWidth : 1,   stroke: "#ddd",   points: [I, 0, I, height]  });  layer.add(l); } // vertical line for (var j = 0; j < height + 1; j++) {  var J = j * GRID_SIZE;  var l2 = new Konva.Line({   strokeWidth : 1,   stroke: "#ddd",   points: [0, J, width, J]  });  layer.add(l2); }   layer.draw();

ตัวอย่าง CSS

?

1 2 3 4 5 6 7 8 9

body {     padding:20px; } #container {     border:solid 1px #ccc;     margin-top: 10px;     width:800px;     height:400px; }

ผลลัพธ์ที่ได้คือ

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.