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?
