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

@TrustWeb이 맞는지 확인하십시오. 각 mousedown에 새로운 모양을 만듭니다. –

편의를 위해 JSFiddle을 사용합니다 : http://jsfiddle.net/nSSTS/ –

KineticJS - 마우스로 선 그리기

답변

관련 문제