KineticJS - Dibujo de líneas con Mouse

Estoy usando KinectJS para dibujar líneas basadas en el movimiento del mouse. Cuando un usuario mantiene presionado el botón del mouse, quiero que sea el punto de inicio de la línea, y cuando el usuario lo suelta, será el 'final' de la línea, pero como están presionando el botón del mouse quiero para poder volver a dibujar dinámicamente la línea a medida que se mueve mi mouse. es posible?KineticJS - Dibujo de líneas con Mouse

Fuente

2012-09-07 will

Sí, es posible.

Básicamente, tiene que volver a dibujar la capa durante el evento onMouseMove. Necesitará una bandera para controlar cuándo la línea se está moviendo o no.

Cuando la secuencia de comandos se inicializa, esta bandera debe ser falsa.

En onMouseDown, el inicio de línea debe recibir las coordenadas actuales del mouse y establecer el indicador en verdadero.

En onMouseMouve, si la bandera es verdadera, debe actualizar el extremo de la línea para recibir las coordenadas actuales del mouse.

En onMouseUp, la bandera debe establecerse en falso.

Véase el siguiente ejemplo:

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

Fuente

2012-09-08 18:51:41 maiconio

hay una manera de dibujar varias líneas y no la sustitución de la misma línea? – Mike

@TrustWeb seguro que lo es. Simplemente cree una nueva forma en cada mousedown –

Aquí hay un JSFiddle de la respuesta para su conveniencia: http://jsfiddle.net/nSSTS/ –

KineticJS - Dibujo de líneas con Mouse

Respuesta

Cuestiones relacionadas