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