html5 kineticjs绘制多行

时间:2012-10-02 05:20:32

标签: html5 canvas drawing kineticjs

在此处找到: KineticJS - Drawing Lines with Mouse

KineticJs非常适合绘制线条,形状以及拖放它们。 实际的示例重绘总是在同一行,我想知道如何在舞台上绘制多条线(不再可编辑),以便将绘图导出为图像。

1 个答案:

答案 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();            
            }

        });

检查演示:http://jsfiddle.net/QTsgn/