Interaktywny rysunek z kineticjs

Question

Chciałbym narysować prostokąt z kliknięciem i przeciągnięciem. Jak mogę to zrobić ? Gdzie muszę umieścić moduł do nasłuchiwania zdarzeń kliknięcia? Na scenie lub na warstwie? Mam następujący kod, ale nie działa:

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

Dzięki.

Answer 1

O ile wiem, w kineticjach nie ma "kliknięcia" na scenie. Powinieneś użyć czegoś takiego:

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

Answer 2

Miałem dokładnie ten sam problem, i rzeczywiście metoda Guilherme działa bardzo.

Ale jest prostą alternatywą: tworzenie przejrzystego Rect (Kinetic prostokąt) taki sam rozmiar jak płótna:

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

Powyższy kod będzie drukować X i Y położenia myszy po umieszczeniu go na płótno (div z id "container"). Przed użyciem tego kodu należy oczywiście załadować bibliotekę KineticJS.

Answer 3

Link do ryba, która pokazuje, co ja pracuję na:

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

Jest to zestaw narzędzi, za pomocą KineticJS i Sketch.js

rysunek Musisz wybrać „zrobić szkic "narysować odręcznie, a następnie" skopiować szkic do Kinetic ", aby skopiować szkic do kinetycznego etapu. Wybierz "Utwórz prostokąt", aby utworzyć prostokąt.

muszę zawierać kod aby umieścić ten tak oto kod po wybraniu przycisku "Złóż Prostokąt".

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

tworzy prostokąt, który następuje po kliknięciu myszą aż na płótnie, a następnie spada prostokąt do warstwy nanosić poprawki na scenie:

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; 

      });