Question

我正在使用kineticjs进行棋盘游戏，我正面临鼠标处理问题。

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

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

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

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

由于

编辑

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

Answer 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?

Kineticjs鼠标悬停并单击

1 个答案: