HTML5 kineticjs画多条

Question

由于这里找到： KineticJS - Drawing Lines with Mouse

KineticJs以绘制线条，形状和阻力&投下他们的伟大工程。 实际示例总是重绘同一行，我想知道如何在舞台上绘制多行（不能再编辑），以便将绘图导出为图像。

Answer 1

您可以创建一个新行并将其添加到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/