KineticJS - Disegno di linee con il mouse

sto usando KinectJS per disegnare linee sulla base di movimento del mouse. Quando un utente tiene premuto il pulsante del mouse, io voglio che sia il punto di 'start' della linea, e quando il rilascio utente, sarà la 'fine' della linea, ma come stanno tenendo il mouse verso il basso che voglio essere in grado di ridisegnare dinamicamente la linea mentre il mio mouse si muove. È possibile?KineticJS - Disegno di linee con il mouse

fonte

2012-09-07 will

Sì, la sua possibile.

Fondamentalmente, è necessario ridisegnare il livello durante l'evento onMouseMove. Avrai bisogno di una bandiera per controllare quando la linea è in movimento o meno.

Quando lo script viene inizializzato, questo flag deve essere falso.

In OnMouseDown, l'inizio della linea dovrebbe ricevere le coordinate del mouse correnti e impostare il flag su true.

Su onMouseMouve, se il flag è true, è necessario aggiornare la fine della riga per ricevere le coordinate del mouse correnti.

In onMouseUp, il flag deve essere impostato su false.

vedere l'esempio di seguito:

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

fonte

2012-09-08 18:51:41 maiconio

c'è un modo per disegnare linee multiple e non sostituendo la stessa linea? – Mike

@TrustWeb sicuro che sia. Basta creare una nuova forma su ogni mousedown –

Ecco un JSFiddle della risposta per comodità: http://jsfiddle.net/nSSTS/ –

KineticJS - Disegno di linee con il mouse

risposta

Problemi correlati