使用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 
    });