CODEWITHSUNDEEP
kineticjs
Macy Abbey
Macy Abbey

Reputation: 3887

Kinetic.Line mouseover

I am attempting to detect a mouseover on a Kinetic.Line object.

According to the docs, Kinetic.Line does have the on function since it is a child of node. The on function lists mousemove and mouseover as supported events.

However, it does not seem to work for mouseover or mousemove on a line.

Is this by design? Will this feature be implemented? Am I doing something wrong?

function canvasTest () {
    stage = new Kinetic.Stage({
        container: "tutorial",
        width: 400,
        height: 400
    });

    var layer = new Kinetic.Layer();

    var redLine = new Kinetic.Line({
        points: [73, 70, 340, 23, 450, 60, 500, 20],
        stroke: "red",
        strokeWidth: 15,
        lineCap: "round",
        lineJoin: "round"
    });

    redLine.on('mouseover mousemove', function (ev) {
        alert('line moused over.');
    });

    layer.add(redLine);

    stage.add(layer);
}

Upvotes: 2

Views: 1961

Answers (2)

Gleeb
Gleeb

Reputation: 11289

I would like to add to Erics answer.

The layer that the line is attached to needs to be added to the stage BEFORE! issuing the .saveData() function. otherwise you will have an exception.

Good luck.

Upvotes: 2

Eric Rowell
Eric Rowell

Reputation: 5219

Kinetic lines use pixel detection to handle events since they have no paths. You need to use the shape.saveData() method so that it's detectable.

Here's an example:

http://www.html5canvastutorials.com/kineticjs/html5-canvas-pixel-detection-with-kineticjs/

Cheers!

Upvotes: 2

Related Questions