Kineticjs 鼠标悬停并单击答案

【问题标题】：Kineticjs Mouseover and clickKineticjs 鼠标悬停并单击
【发布时间】：2013-08-02 23:06:44
【问题描述】：

我正在使用 kineticjs 开发一款棋盘游戏，但我遇到了鼠标处理问题。

我有一个带有 mousemove 事件的图像，它绘制了一个预览选择。

问题在于同一图像上的点击事件仅触发 1 次 9 次..

如果我删除 on_mousemove，on_click 工作正常..

有人有解释和/或解决方法吗？

谢谢

编辑

小提琴链接：http://fiddle.jshell.net/gTuCE/12/

【问题讨论】：

那么您是否必须单击图像才能开始绘制预览选择？或者你只是将鼠标移到图像上，它就会开始绘图？需要更多详细信息，如果您向我们展示一些代码或 jsfiddle 会更容易提供帮助！
我添加了一个小提琴示例

标签： javascript html5-canvas kineticjs

【解决方案1】：

你的代码有点乱，所以我清理了它，它现在可以工作了：jsfiddle

在您的函数 createSquareItem() 中，squareLayer 未定义。
您只需添加一次 Kinetic.Layers。在您的 createSquareItem createTemporarySquareItems 函数中，您每次调用该函数时都将 mainLayer 添加到舞台上。这是错误，因为您之前已将mainLayer 添加到舞台。

在您的 createTemporarySquareItems 函数中，我必须添加 mainLayer.drawScene()，而在 createSquareItem 中，我必须添加 mainLayer.draw()

function createSquareItem(point, color) {
    var boardPoint = point;

    var rect = new Kinetic.Rect({
        x: boardPoint.x,
        y: boardPoint.y,
        width: 18,
        height: 18,
        fill: color,
        stroke: 'black',
        strokeWidth: 0
    });

    mainLayer.add(rect);
    //squareLayer.drawScene(); //squareLayer is undefined.
    mainLayer.draw();
}

function createTemporarySquareItems(point, cleanLayer) {
    if (cleanLayer == true) {
        do {
            var r = tempSquareArray.pop();
            if (r != null) {
                //tempSquareLayer.remove(r);
                r.destroy();
            }
        } while (r != null);
    }

    var boardPoint = point;

    var rect = new Kinetic.Rect({
        x: boardPoint.x,
        y: boardPoint.y,
        width: 18,
        height: 18,
        fill: 'orange',
        stroke: null,
        strokeWidth: 0
    });

    tempSquareArray.push(rect);

    mainLayer.add(rect);
    mainLayer.drawScene();
}

有关 KineticJS 绘制方法的更多信息，请参见此处：What is the difference between KineticJS draw methods?

【讨论】：