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

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

ตัวอย่าง HTML

ตัวอย่าง JS

 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

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.