KineticJS - 用鼠标绘制线条

我使用KinectJS根据鼠标移动绘制线条。当用户按住鼠标按钮时，我希望它是该行的“开始”点，并且当用户释放时，它将成为该行的“结束”，但是当他们按住鼠标时，我想要随着我的鼠标移动，能够动态重绘线条。这可能吗？KineticJS - 用鼠标绘制线条

来源

2012-09-07 will

是的，它的可能性。

基本上，您必须在onMouseMove事件期间重绘您的图层。你需要一个标志来控制线路移动与否。

当脚本初始化时，该标志应该是false。

在onMouseDown上，行开始应该接收当前的鼠标坐标并将该标志设置为true。

在onMouseMouve上，如果标志为true，则应更新行结束以接收当前鼠标坐标。

在onMouseUp上，该标志应该设置为false。

见下面的例子：

<!DOCTYPE HTML> 
<html> 
    <head> 
     <style> 
      body { 
       margin: 0px; 
       padding: 0px; 
      } 
      canvas { 
       border: 1px solid #9C9898; 
      } 
     </style> 
     <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.1.js"></script> 
     <script> 
      window.onload = function() { 
       layer = new Kinetic.Layer(); 
       stage = new Kinetic.Stage({ 
        container: "container", 
        width: 320, 
        height: 320 
       }); 

       background = new Kinetic.Rect({ 
        x: 0, 
        y: 0, 
        width: stage.getWidth(), 
        height: stage.getHeight(), 
        fill: "white" 
       }); 

       line = new Kinetic.Line({ 
        points: [0, 0, 50, 50], 
        stroke: "red" 
       }); 

       layer.add(background); 
       layer.add(line); 
       stage.add(layer); 

       moving = false; 

       stage.on("mousedown", function(){ 
        if (moving){ 
         moving = false;layer.draw(); 
        } else { 
         var mousePos = stage.getMousePosition(); 
         //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();    
        } 

       }); 

       stage.on("mousemove", function(){ 
        if (moving) { 
         var mousePos = stage.getMousePosition(); 
         var x = mousePos.x; 
         var y = mousePos.y; 
         line.getPoints()[1].x = mousePos.x; 
         line.getPoints()[1].y = mousePos.y; 
         moving = true; 
         layer.drawScene(); 
        } 
       }); 

       stage.on("mouseup", function(){ 
        moving = false; 
       }); 

      }; 
     </script> 
    </head> 
    <body> 
     <div id="container" ></div> 
    </body> 
</html>

来源

2012-09-08 18:51:41 maiconio

有绘制多行的方式，而不是取代在同一行？ – Mike

@TustWeb确定它是。只需在每个mousedown上创建一个新的形状 –

下面是一个JSFiddle的答案为方便起见：http://jsfiddle.net/nSSTS/ –

KineticJS - 用鼠标绘制线条

回答

相关问题