การวาดไม้บรรทัดด้วย KonvaJS

ช่วงนี้กำลังเขียนโปรแกรมโดยใช้ HTML5(canvas) ในการพัฒนาเครื่องมือวาดรูปทรงต่างๆ อยู่ครับ โดยตัว editor ตัวนี้มีหลายๆ feature ด้วยกัน หนึ่งในนั้นก็คือการแสดงเส้นแบ่งเหมือนไม้บรรทัดเพื่อช่วยให้ผู้ใช้จัดตำแหน่งได้สะดวกขึ้น ซึ่งการพัฒนาก็ใช้ KonvaJS เป็น Framework ที่ช่วยในการเขียน canvas ให้ง่ายขึ้น ดังตัวอย่างต่อไปนี้

ตัวอย่าง HTML

ตัวอย่าง JS

 var stage = new Konva.Stage({
     container: 'container',
  width : $('#container').width(),
  height : $('#container').height()
 });
 var layer = new Konva.Layer();
 stage.add(layer);

 var ruler = new Konva.Group({
     x: 0,
     y: 0,
     width : $('#container').width(),
     height: 35
 });
 layer.add(ruler);

 var rulerBG = new Konva.Rect({
     width : $('#container').width(),
     height: 35,
     fillLinearGradientStartPoint: [107, 0],
     fillLinearGradientEndPoint: [107, 35],
     fillLinearGradientColorStops: [0, 'white', .75, "#ecf7fc", 1, "#cceaf6"],
     stroke: "#cceaf6",
     strokeWidth: .5
 });
 ruler.add(rulerBG);

 var layerLine = new Konva.Layer();
 var horizontalLine = new Konva.Line({
  points: [30, 15, 30, 35],
  stroke: "red",
  width : $('#container').width(),
  height : $('#container').height()
 });
 var verticalLine = new Konva.Line({
  points: [15, 30, 35, 30],
  stroke: "red",
  width : $('#container').width(),
  height : $('#container').height()
 });
 layerLine.add(horizontalLine);
 layerLine.add(verticalLine);
 stage.add(layerLine);

 var rulerMarks = new Konva.Shape({
     x: 15,
     y: 15,
     drawFunc: function (context) {
         context.beginPath();
         var count = 0;
         for (var i = 0; i < ruler.getWidth(); i += 10) {
          var y = (i / 100 == parseInt(i / 100)) ? 0 : 10;
             context.moveTo(i + 15 , y);
             context.lineTo(i + 15 , 15); // line 15 = height
             context.fillText(count, 12 + i * 10, -5);
             
             var x = (i / 100 == parseInt(i / 100)) ? 0 : 10;
             context.moveTo(x, i + 15);
             context.lineTo(15, i + 15);
             context.fillText(count,-8, 15 + i * 10);
             
             count = count + 1;
         }
         context.fillStrokeShape(this);
     },
     stroke: 'black',
     strokeWidth: 2
 });
 ruler.add(rulerMarks);
 
 $(stage.getContent()).on("mousemove", function (evt) {
  var mousePos = stage.getPointerPosition();
        var x = mousePos.x;
        var y = mousePos.y;
        horizontalLine.setPoints([x, 15, x, 35]);
        verticalLine.setPoints([15, y, 35, y]);
     layerLine.draw();
 });


 layer.draw();
 layerLine.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.