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.

score 12 · Accepted Answer · edited Aug 05 '12 at 20:50

12

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

edited Aug 05 '12 at 20:50

Guilherme David da Costa

2,318
4
32
46

answered May 07 '12 at 18:44

Артем Хамидуллин

136
1
3

1

The method `getContent()` doesn't exists. I've used `getContainer()` to get the actual canvas and then `addEventLister` to it. +1 for the help understanding this part. – Guilherme David da Costa Aug 05 '12 at 20:23

score 2 · Answer 2 · answered Oct 25 '12 at 16:17

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;

            });

you shouldn't use `drawLayer.on("mousemove", function (e) {` but `stage.getContainer().addEventListener('mousemove', function (e) {` , otherwise the listener won't follow the mouse over the stage. — aldo.roman.nurena, Apr 04 '13 at 15:41

score 0 · Answer 3 · answered Oct 23 '12 at 19:02

I had the exact same problem, and indeed the method of Guilherme works greatly.

But there's a simple alternative: create a transparent Rect (Kinetic rectangle) 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 over the canvas (a div with id "container"). You of course need to load the KineticJS library before using this code.

Interactive drawing with kineticjs

3 Answers3