Interactive drawing with kinetics

Question

I would like to draw a rectangle with a click and drag. How can i do this? Where should I put my click event listener? On stage or on a layer? I have the following code, but it does not work:

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

Thanks.

Answer 1

As far as I know, there is no "click" event on the kinetics scene. You should use something like this:

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

Answer 2

Link to a script showing what I was working on:

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

This is a set of drawing tools using KineticJS and Sketch.js

You need to select “sketch” to draw by hand, and then “copy sketch to kinetics” to copy the sketch into the kinetic scene. Select Make Rectangle to create a rectangle.

I need to enable the code in order to publish it, so here is the code when you select the Make Rectangle button:

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

This creates a rectangle that follows the mouse until you click on the canvas, then it places the rectangle in the Redlines layer of the scene:

drawLayer.on ("mousedown", function (e) {

  //for (var f = 0 ; f < 1; f++) { //alert(e.length); if (makeRect) { addToRedlineLayer(ex, ey); } //} followRect.setX(-200); drawLayer.setVisible(false); return; }); 

Answer 3

I had the same problem, and indeed, Guillerm's method works very hard.

But there is a simple alternative: create a transparent rectangle (kinetic rectangle) of the same size as the canvas:

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

The above code will print the x and y position of the mouse when you hover it on the canvas (div with id "container"). Of course, you need to download the KineticJS library before using this code.