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

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

ตัวอย่าง 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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82

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

?

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.