Detecting mouse events on Kinetic.Line

问题

I'm trying to detect mouse events (currently mousedown) on a Kinetic.Group containing a grid made of Kinetic.Line's

I'm listening to the mousedown event on the Layer. When it happens that i hit a line, no event is fired.

var grid = new Kinetic.Group({
    x: 0,
    y: 0,
    width: this.group.width(),
    height: this.group.height()
});

grid.on("mousedown", function(){
    alert("At least this one should fire!");
});

var gridX = this.gridWidth, gridY = this.gridHeight;

this.group.add(grid);

while(gridY < this.rect.height()){          

    var line = new Kinetic.Line({
        points : [0,gridY, this.rect.width(), gridY],
        stroke: "grey",
        strokeWidth: 1
    });

    grid.add(line);

    gridY += this.gridHeight;
}

while(gridX < this.rect.width()){           
    var line = new Kinetic.Line({
        points : [gridX,0, gridX, this.rect.height()],
        stroke: "grey",
        strokeWidth: 1
    });

    grid.add(line);

    gridX += this.gridWidth;
}

I found this post:

Kinetic.Line mouseover

The answer mentioned there is using "saveData()" on the shape. This seems to be old because this method does not exist in Kinetic.Shape.

The example where the above post is pointing to is for images. And it uses the cache() method to create a hit graph or something. I tried that for my lines but this won't work either.

How can i simply detect mouse events on a Kinetic.Line?

回答1:

Just in case you are still looking for an answer to this @Chris, and in case others find your thread, I believe you and I were suffering from the same issue. @Sjiep so graciously provided a fix for my problem under this thread.

Turns out it was indeed a bug!

来源：https://stackoverflow.com/questions/21881908/detecting-mouse-events-on-kinetic-line