在 Kinetic.Line 上检测鼠标事件答案

【问题标题】：Detecting mouse events on Kinetic.Line在 Kinetic.Line 上检测鼠标事件
【发布时间】：2014-03-19 20:48:59
【问题描述】：

我正在尝试检测 Kinetic.Group 上的鼠标事件（当前为 mousedown），其中包含由 Kinetic.Line's 组成的网格

我正在监听 Layer 上的 mousedown 事件。当我碰到一条线时，不会触发任何事件。

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

我找到了这篇文章：

Kinetic.Line mouseover

那里提到的答案是在形状上使用“saveData()”。这似乎很旧，因为Kinetic.Shape 中不存在此方法。

上述帖子指向的示例是图像。它使用cache() 方法来创建命中图或其他东西。我为我的台词尝试过，但这也不起作用。

如何简单地检测 Kinetic.Line 上的鼠标事件？

【问题讨论】：

你应该可以在像这样clickLayer.on('click', function(evt) { // Do something });的层上绑定点击事件
我添加了一个代码 sn-p 以便更清楚我在做什么
也许你可以把它放在一个 jsFiddle 中，这样我们就有了一些东西可以玩

标签： html5-canvas kineticjs

【解决方案1】：

以防万一您仍在寻找此@Chris 的答案，并且万一其他人找到您的帖子，我相信您和我都遇到了同样的问题。 @Sjiep 非常慷慨地为我在this 线程下的问题提供了解决方案。

事实证明这确实是一个错误！

【讨论】：