KineticJS - linie rysunkowe z myszą

Używam KinectJS do rysowania linii w oparciu o ruch myszy. Kiedy użytkownik przytrzymuje przycisk myszy, chcę, aby był on "punktem początkowym" linii, a kiedy użytkownik zwolni, będzie to "koniec" linii, ale gdy będą trzymać mysz w dół, chcę aby móc dynamicznie przerysowywać linię, jak porusza się moja mysz. czy to możliwe?KineticJS - linie rysunkowe z myszą

Źródło

2012-09-07 will

Tak, jest to możliwe.

Zasadniczo, musisz przerysować warstwę podczas zdarzenia onMouseMove. Będziesz potrzebował flagi, aby kontrolować, kiedy linia się porusza.

Po zainicjowaniu skryptu ta flaga powinna być fałszywa.

W onMouseDown, początek linii powinien otrzymać aktualne współrzędne myszy i ustawić flagę na true.

W onMouseMouve, jeśli flaga ma wartość true, należy zaktualizować koniec linii, aby otrzymać bieżące współrzędne myszy.

W onMouseUp flaga powinna mieć wartość false.

patrz przykład poniżej:

<!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>

Źródło

2012-09-08 18:51:41 maiconio

czy istnieje sposób, aby narysować kilka linii, a nie zastąpienie tej samej linii? – Mike

@ TrustWeb, jasne, że tak. Po prostu utwórz nowy kształt na każdym z nich: –

Oto JSFiddle odpowiedzi dla wygody: http://jsfiddle.net/nSSTS/ –

KineticJS - linie rysunkowe z myszą

Odpowiedz

Powiązane problemy