使用mousemove绘制形状，使用kineticjs拖放和调整大小 - KineticJS

Question

我正在使用KineticJS进行简单的绘制程序。我必须实现的是用鼠标移动绘制矩形，线条或圆形，并且可以通过鼠标拖动或调整绘制的形状。我的问题是，我必须使用mousedown和mousemove事件来完成绘图，但是我无法同时拖放或调整大小。这是我的绘图代码：

stage.on("mousedown", function() 
      { 
       if((drawFlag==1)&&(dragFlag==0)) 
       { 
        if (moving) 
        { 
         moving = false; 
         layer.draw(); 
        } 
        else 
        { 
         var mousePos = stage.getMousePosition(); 
         line = new Kinetic.Line 
         ({ 
          points: [0, 0, 50, 50], 
          stroke: "red" 
         }); 
         layer.add(line); 

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

       if((drawFlag==2)&&(dragFlag==0)) 
       { 
        if (moving) 
        { 
         moving = false; 
         layer.draw(); 
        } 
        else 
        { 
         var mousePos = stage.getMousePosition(); 
         rect = new Kinetic.Rect 
         ({ 
          x:20, 
          y:20, 
          fill:"red", 
          stroke:"black", 
          strokeWidth: 2, 
          draggle:true, 
          width:0, 
          height:0 
         }); 

         rect.setX(mousePos.x); 
         rect.setY(mousePos.y); 
         rect.setWidth(0); 
         rect.setHeight(0); 

         moving=true; 
         layer.drawScene(); 



         layer.add(rect); 

         Rects.push(rect); 
        } 
       } 
      }); 

      stage.on("mousemove", function() 
      { 
       if((drawFlag==1)&&(dragFlag==0)) 
       { 
        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(); 
        } 
       } 
       if((drawFlag==2)&&(dragFlag==0)) 
       { 
        if(moving) 
         { 
          var mousePos = stage.getMousePosition(); 
          var x = mousePos.x; 
          var y = mousePos.y; 
          rect.setWidth(mousePos.x-rect.getX()); 
          rect.setHeight(mousePos.y-rect.getY()); 
          moving = true; 
          layer.drawScene(); 
         } 
       } 
      }); 

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

绘制一个矩形后，当我点击它时，它应该被拖动鼠标移动。但是，在我的程序中，单击绘制的矩形会导致绘制另一个矩形，而不是拖动它。所以我尝试使用dragFlag来指示我正在绘图还是拖动。我用一个函数来检查鼠标指针是否在任何绘制矩形：

for(var n=0;n<Rects.length;n++){ 
       (function(){ 
        Rects[n].on('mouseover',function() 
         { 
          dragFlag=1; 
          document.body.style.cursor = "pointer"; 
         }); 

         Rects[n].on('mouseout',function() 
         { 
          dragFlag=0; 
          document.body.style.cursor = "default"; 
         }); 
         if(dragFlag==1) 
         { 
          Rects[n].on("dragstart", function() 
          { 
           Rects[n].moveToTop(); 
           layer.draw(); 
          }); 

          Rects[n].on("dragmove", function() 
          { 
           document.body.style.cursor = "pointer"; 
          }); 
         } 

       }); 

但它是行不通的。我的鼠标光标的位置无法检查，因此我正在绘制一个新的矩形，同时单击一个绘制的矩形。任何人都知道如何通过鼠标移动实现绘图，并拖放到绘制的形状上？我感谢您的帮助。

Answer 1

，请尝试使用喜欢的事，简单的一调试：

 Rects[n].on('mouseover',function() 
     { 
         dragFlag=1; 
         alert('mouse over rectangle'); //check if event fired 
         document.body.style.cursor = "pointer"; 
     }); 

真正的问题是，你的逻辑越来越复杂，速度快，你需要简化它和重构。

涂料的想法，你可以使用选择工具，也可以用直线工具或矩形工具，不是由舞台上的事件决定的，而是由模式下，用户是英寸

所以你应该做的是创建按钮，并在每次点击按钮时为每个事件分离/重新附加功能。

例

 drawLineButton.on('click', function(){ 
     stage.off(); // or whatever function to remove other events from stage 
     stage.on('mousedown',function(){ 
      draw line logic 
     }); 
    }); 
    drawRectButton.on('click', function(){ 
     stage.off(); // or whatever function to remove other events from stage 
     stage.on('mousedown',function(){ 
      draw rectangle logic 
     }); 
    }); 
    dragButton.on('click', function(){ 
     stage.off(); // or whatever function to remove other events from stage 
     // now you dont have to worry about stage events firing and can drag shapes 
    });