easelJs 또는 KineticJs를 사용하여 동적 사각형/상자 만들기

안녕하세요 저는 JavaScript를 사용하여 평면도 편집기 (MsPaint와 같은 것)를 만들려고합니다. 내가 선호하는 라이브러리로 EaselJS 또는 KinetiJS을 선정했습니다.easelJs 또는 KineticJs를 사용하여 동적 사각형/상자 만들기

나는 동적 사각형 상자/라인을 만드는 방법을 알고 싶습니다. 마우스를 클릭하고 드래그하여 사각형을 그리려합니다 (마우스 버튼을 누른 상태에서). 따라서 사각형의 크기는 마우스를 얼마나 멀리 드래그 했느냐에 달려 있습니다.

도움이 될 것입니다. 누구든지 fabrisJs 또는 paperJs과 같은 다른 라이브러리가 더 나은 대안이 될 것이라 생각하면이 라이브러리에서도 솔루션을 사용할 수 있습니다.

출처

2012-12-06 user1517108

좋아요 ... 시행 착오와 인터넷 검색 코드를 많이 사용하여 KineticJs에 대한 답변을 얻었습니다.

Heres는 완벽한 솔루션 :

http://jsfiddle.net/sandeepy02/8kGVD/

<html> 
    <head> 
     <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" 
       }); 


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

       moving = false; 

       stage.on("mousedown", function(){ 
        if (moving){ 
         moving = false;layer.draw(); 
        } else { 
         var mousePos = stage.getMousePosition(); 
         rect= new Kinetic.Rect({ 
     x: 22, 
     y: 7, 
     width: 0, 
     height: 0, 
     fill: 'red', 
     stroke: 'black', 
     strokeWidth: 4 
         }); 
         layer.add(rect); 
         //start point and end point are the same 
         rect.setX(mousePos.x); 
         rect.setY(mousePos.y); 
         rect.setWidth(0); 
         rect.setHeight(0); 


         moving = true;  
         layer.drawScene();    
        } 

       }); 

       stage.on("mousemove", function(){ 
        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; 
       }); 

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

출처

2012-12-06 07:53:57 user1517108

제안, 당신은 나중에하는 구형의 크기를 조정 작은 원을 사용하고 마우스가 구석에 표시하려면, 다음 draggble 기능을 사용하여 rect의 크기를 조정하는 원의 수. – Jonke

예 존케 ... 똑똑한 생각 이네요. 그것을 통합 할 것입니다. 감사 – user1517108

easelJs 또는 KineticJs를 사용하여 동적 사각형/상자 만들기

답변

관련 문제