Mouseup in Kineticjs is not rendering properly

Question

I am in the process of making a touchscreen paint game for my work. I was watching a tutorial on how to make one using plain html5 canvas. Anyways, I wanted to convert this code to work with kinetic js. I got everything converted but for some reason the line doesn't stop drawing on mouseup everytime like it should. I cannot seem to figure out what I'm doing wrong. I feel like it may have something to do with my paint function but I'm not sure

Here is the code for the plain canvas that works fine: http://jsfiddle.net/mdurchho/zC7c2/

function paint(x, y) {
    cx.beginPath();
    if (oldx > 0 && oldy > 0) {
        cx.moveTo(oldx, oldy);
    }
    cx.lineTo(x, y);
    cx.stroke();
    cx.closePath();
    oldx = x;
    oldy = y;
}

Here is the kineticjs code that doesn't work properly: http://jsfiddle.net/mdurchho/G6p4k/

function paint(x, y) {
    if (oldx > 0 && oldy > 0) { 
        var line = new Kinetic.Line({
            points: [oldx,oldy, x,y],
            stroke: 'red',
            strokeWidth: 20,
            lineCap: 'round',
            lineJoin: 'round'
        });
        layer.add(line);
        layer.draw();
    }
    oldx = x;
    oldy = y;
}

Any suggestions would be greatly appreciated!

Unfortunately, this is a frustrating bug :-( As a workaround, you can use jQuery to listen for events on the "kinetic-content" div like this: $(stage.getContent()).on('mouseup', function (event){}); — markE, Nov 07 '13 at 16:43

score 0 · Answer 1 · answered Nov 09 '13 at 03:23

This is not a bug!

When you are drawning you are creating lines on stage. But you set only

box.on('mouseup', onmouseup, false);

So when mouse under line it will no trigger box mouseup event. And this is correct. So you can listen stage events instead box events (pure kineticjs way):

stage.on('mousedown', onmousedown, false);
stage.on('mouseup', onmouseup, false);
stage.on('mousemove', onmousemove, false);

http://jsfiddle.net/lavrton/J2JsJ/

Mouseup in Kineticjs is not rendering properly

1 Answers1