Kineticjs Mouseover and click

Question

I'm working on a board game with kineticjs and I'm facing a problem with mouse handling.

I have an image with a mousemove event that draw a preview selection.

The problem is with the click event on the same image that is firing only 1 on 9 times..

If I remove the on_mousemove the on_click is working perfectly..

Anyone has an explanation and/or workaround ?

Thanks

Edit

Fiddle link: http://fiddle.jshell.net/gTuCE/12/

So do you have to click on the image to start drawing the preview selection? Or you just mousemove over the image and it will start drawing? Need more details and it would be much easier to help if you showed us some code or a jsfiddle! — projeqht, Aug 02 '13 at 14:20

score 0 · Accepted Answer · edited May 23 '17 at 10:31

Your code was a bit messy so I cleaned it up and it's working now: jsfiddle

In your function createSquareItem(), squareLayer was undefined.
You only have to add Kinetic.Layers once. In both your createSquareItem createTemporarySquareItems functions, you were adding mainLayer to the stage every time you call the function. This is wrong since you already added mainLayer to the stage earlier.

In your createTemporarySquareItems function, I had to add mainLayer.drawScene() and in createSquareItem I had to add mainLayer.draw()

function createSquareItem(point, color) {
    var boardPoint = point;

    var rect = new Kinetic.Rect({
        x: boardPoint.x,
        y: boardPoint.y,
        width: 18,
        height: 18,
        fill: color,
        stroke: 'black',
        strokeWidth: 0
    });

    mainLayer.add(rect);
    //squareLayer.drawScene(); //squareLayer is undefined.
    mainLayer.draw();
}

function createTemporarySquareItems(point, cleanLayer) {
    if (cleanLayer == true) {
        do {
            var r = tempSquareArray.pop();
            if (r != null) {
                //tempSquareLayer.remove(r);
                r.destroy();
            }
        } while (r != null);
    }

    var boardPoint = point;

    var rect = new Kinetic.Rect({
        x: boardPoint.x,
        y: boardPoint.y,
        width: 18,
        height: 18,
        fill: 'orange',
        stroke: null,
        strokeWidth: 0
    });

    tempSquareArray.push(rect);

    mainLayer.add(rect);
    mainLayer.drawScene();
}

For more information on KineticJS' draw methods, see here: What is the difference between KineticJS draw methods?

Kineticjs Mouseover and click

1 Answers1