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

回答1:

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!

回答2:

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.

来源：https://stackoverflow.com/questions/10762499/kinetic-line-mouseover