Interactive drawing with kineticjs

Question

I'd like to draw a rectangle with click and drag. How can I do this ? Where do I have to put my click event listener ? On the stage or on the layer ? I have the following code but it doesn't 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 stage in kineticjs. You should use something like this:

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

Answer 2

Link to a fiddle that shows what I've been working on:

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

It's a set of drawing tools using KineticJS and Sketch.js

You need to select "make sketch" to draw freehand and then "copy sketch to Kinetic" to copy your sketch into the kinetic stage. Select "Make rectangle" make a rectangle.

I need to include code to post this so here's the code for 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 drops the rectangle into the Redlines layer of the stage:

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;

            });