Dibujo interactivo con kineticjs

Question

Me gustaría dibujar un rectángulo haciendo clic y arrastrando. Cómo puedo hacer esto ? ¿Dónde tengo que poner mi detector de eventos click? En el escenario o en la capa? Tengo el siguiente código pero no funciona:

stage = new Kinetic.Stage({...}) 
layer = new Kinetic.Layer({...}) 

stage.add(layer) 

stage.on('click', function() { 
    var pos = stage.getMousePosition(); 
    var rect = new Kinetic.Rect({ 
     x: pos.x, 
     y: pos.y, 
     width: 10, 
     height: 10, 
    }); 
    layer.add(rect); 
    layer.draw(); 
}) 

Gracias.

Answer 1

Por lo que sé, no hay ningún evento de "clic" en el escenario en kineticjs. Debería usar algo como esto:

stage.getContainer().addEventListener('mousedown', function(evt) {}); 

Answer 2

Tuve exactamente el mismo problema, y ​​de hecho el método de Guilherme funciona en gran medida.

Pero hay una alternativa simple: crear un Rect transparente (rectángulo cinética) del mismo tamaño que el lienzo:

<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){ 
    function writeMessage(messageLayer, message) { 
     var context = messageLayer.getContext(); 
     messageLayer.clear(); 
     context.font = '18pt Calibri'; 
     context.fillStyle = 'black'; 
     context.fillText(message, 10, 25); 
    } 

    var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 578, 
     height: 200 
    }); 
    var shapesLayer = new Kinetic.Layer(); 
    var messageLayer = new Kinetic.Layer(); 

    var rect = new Kinetic.Rect({ 
     x:0, 
     y:0, 
     width:stage.getWidth(), 
     height:stage.getHeight(), 
     stroke:0 
    }); 

    rect.on('mousemove', function() { 
     var mousePos = stage.getMousePosition(); 
     var x = mousePos.x; 
     var y = mousePos.y; 
     writeMessage(messageLayer, 'x: ' + x + ', y: ' + y); 
    }); 


    stage.getContainer().addEventListener('mouseout', function(evt) { 
     writeMessage(messageLayer, ''); 
    }); 

    shapesLayer.add(rect); 

    stage.add(shapesLayer); 
    stage.add(messageLayer); 
}//]]> 
</script> 

El código anterior imprimir la posición xey del ratón cuando se pasa por encima el lienzo (un div con id "contenedor"). Por supuesto, debe cargar la biblioteca KineticJS antes de usar este código.

Answer 3

Enlace a un violín que muestra lo que he estado trabajando en:

http://jsfiddle.net/robtown/SGQq7/22/

Es un conjunto de herramientas que utilizan KineticJS y Sketch.js

dibujo Es necesario seleccionar "de hacer croquis "dibujar a mano alzada y luego" copiar boceto a Kinetic "para copiar su boceto en la etapa cinética. Seleccione "Hacer rectángulo" para hacer un rectángulo.

necesito incluir código para publicar esto así que aquí está el código para cuando se selecciona el botón "Realizar Rectángulo":.

$ ('# makeRect'), haga clic en (function (e) {

   followRect = new Kinetic.Rect({ 
       width: 120, 
       height: 40, 
       x: -200, 
       y:-200,      
       stroke: 'red', 
       strokeWidth: 3 
      }); 
      drawLayer.setVisible(true); 

      drawLayer.add(followRect); 
      drawLayer.draw(); 
      makeRect = true; 
      drawLayer.on("mousemove", function (e) { 
       if (makeRect) { 
        followRect.setX(e.x+5); 
        followRect.setY(e.y+5); 
        drawLayer.draw(); 
       } 
      }); 

Esto crea un rectángulo que sigue el ratón hasta que haga clic en el lienzo, a continuación, se cae el rectángulo en la capa Redlines de la etapa:

drawLayer.on ("mousedown", la función (e) {

   //for (var f = 0 ; f < 1; f++) { 
       //alert(e.length); 
       if (makeRect) { 
        addToRedlineLayer(e.x, e.y); 
       } 
       //} 
        followRect.setX(-200); 

        drawLayer.setVisible(false); 
       return; 

      });