KineticJS - Zeichnen von Linien mit Maus - Hervorragende Bibliothek

Ich benutze KinectJS um Linien basierend auf Mausbewegungen zu zeichnen. Wenn ein Benutzer die Maustaste gedrückt hält, möchte ich, dass es der Anfangspunkt der Linie ist, und wenn der Benutzer loslässt, ist es das "Ende" der Linie, aber da sie die Maus gedrückt halten möchte ich um die Linie dynamisch neu zeichnen zu können, während sich meine Maus bewegt. Ist das möglich?KineticJS - Zeichnen von Linien mit Maus

Quelle

2012-09-07 will

Ja, es ist möglich.

Grundsätzlich müssen Sie Ihre Schicht während onMouseMove-Ereignis neu zeichnen. Sie benötigen eine Markierung, um zu steuern, wann sich die Linie bewegt oder nicht.

Wenn das Skript initialisiert wird, sollte dieses Flag falsch sein.

Bei onMouseDown sollte der Zeilenstart die aktuellen Mauskoordinaten erhalten und das Flag auf True setzen.

Wenn onMouseMouve das Flag wahr ist, sollten Sie das Zeilenende aktualisieren, um die aktuellen Mauskoordinaten zu erhalten.

Bei onMouseUp sollte das Flag auf false gesetzt werden.

siehe Beispiel unten:

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

Quelle

2012-09-08 18:51:41 maiconio

ist es eine Möglichkeit, mehrere Zeilen und nicht ersetzen die gleiche Linie zu zeichnen? – Mike

@TrustWeb sicher ist es. Erstellen Sie einfach eine neue Form für jeden Mausklick –

Hier ist ein JSFiddle der Antwort für die Bequemlichkeit: http://jsfiddle.net/nSSTS/ –

KineticJS - Zeichnen von Linien mit Maus

Antwort

Verwandte Themen