Disegno interattivo con kineticjs

Question

Mi piacerebbe disegnare un rettangolo con clic e trascinare. Come posso fare questo ? Dove devo mettere il mio listener di eventi click? Sul palco o sul livello? Ho il seguente codice ma non funziona:

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(); 
}) 

Grazie.

Answer 1

Per quanto ne so, non c'è un evento "click" sul palco in kineticjs. Si dovrebbe usare qualcosa del genere:

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

Answer 2

Ho avuto lo stesso identico problema, e in effetti il ​​metodo di Guilherme funziona molto.

Ma c'è una semplice alternativa: creare un rettangolo trasparente (rettangolo Kinetic) le stesse dimensioni della tela:

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

Il codice qui sopra stampare la posizione xey del mouse quando si passa sopra la tela (un div con id "contenitore"). Ovviamente è necessario caricare la libreria KineticJS prima di utilizzare questo codice.

Answer 3

Link ad un violino che mostra ciò che ho lavorato su:

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

Si tratta di un insieme di strumenti che utilizzano KineticJS e Sketch.js

disegno È necessario selezionare "fare schizzo "per disegnare a mano libera e quindi" copia lo schizzo su Kinetic "per copiare il tuo schizzo nello stadio cinetico. Seleziona "Crea rettangolo" crea un rettangolo.

ho bisogno di includere il codice per pubblicare questo ecco il codice per quando si seleziona il pulsante "Make Rettangolo":.

$ ('# makeRect') clicca (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(); 
       } 
      }); 

Questo crea un rettangolo che segue il mouse fino a quando si fa clic sulla tela, poi lascia cadere il rettangolo nello strato Redlines del palco:

drawLayer.on ("MouseDown", function (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; 

      });