在此处找到: KineticJS - Drawing Lines with Mouse
KineticJs非常适合绘制线条,形状以及拖放它们。 实际的示例重绘总是在同一行,我想知道如何在舞台上绘制多条线(不再可编辑),以便将绘图导出为图像。
答案 0 :(得分:4)
您可以创建一个新行并将其添加到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();
}
});