html5 kineticjs draw multiple lines
Question
As found here: KineticJS - Drawing Lines with Mouse
KineticJs works great in order to draw lines, shapes and drag&drop them. The actual example redraw always the same line, i wonder how to draw multiple lines (no more editable) on the stage in order to export the draw as image.
Solution
You could create a new line and add it to the layer on mousedown.
stage.on("mousedown", function(){
if (moving){
moving = false;layer.draw();
} else {
var mousePos = stage.getMousePosition();
//CHANGED - Create new line
line = new Kinetic.Line({
points: [0, 0, 50, 50],
stroke: "red"
});
//CHANGED - Add line to layer
layer.add(line);
//start point and end point are the same
line.getPoints()[0].x = mousePos.x;
line.getPoints()[0].y = mousePos.y;
line.getPoints()[1].x = mousePos.x;
line.getPoints()[1].y = mousePos.y;
moving = true;
layer.drawScene();
}
});
Check demo: http://jsfiddle.net/QTsgn/
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow