html5 画布 kineticjs 事件

Question

我似乎在使用 KineticJS 以 1 或更少的行程在 Kinetic.Line 上触发事件时遇到问题。我认为将所有行添加到一个组，然后将事件附加到一个组就足够了，但它不起作用。

我已经简化了我试图完成的代码以缩短帖子：

var gridOffsetX = 45, gridHeight = 200, gridWidth = 760, rowHeight = gridHeight / 4;
var stage, baseLayer = new Kinetic.Layer();

// debug message
var debugText = new Kinetic.Text({
    fontStyle: 'bold', fontSize: 12, fill: 'red',
    x: 45, y: gridHeight + 10, text: 'mouseup'
});

window.onload = function () {

    stage = new Kinetic.Stage({
        container: 'canvas',
        width: 800, height: 200 + 22
    });

    var index = 0.5;
    var yPosition = (gridHeight / 4 * index);

    // create the base object
    var text = new Kinetic.Text({
        fontStyle: "bold", fontSize: 10, fill: "black",
        x: 0, y: yPosition, text: "Row A", align: "right"
    });

    // center the text
    text.offsetY(text.height() / 2);
    baseLayer.add(text);
    baseLayer.add(addStatusText(text, ++index, "Row B"));
    baseLayer.add(addStatusText(text, ++index, "Row C"));
    baseLayer.add(addStatusText(text, ++index, "Row D"));

    var gridGroup = new Kinetic.Group();

    drawGrid(gridGroup);
    wireGridEvents(gridGroup);

    baseLayer.add(gridGroup);
    baseLayer.add(debugText);
    stage.add(baseLayer);
};

function addStatusText(control, index, text) {
    var yPosition = (gridHeight / 4 * index);

    control = control.clone({ text: text, y: yPosition });
    control.offsetY(control.height() / 2);

    return control;
}

function drawGrid(gridGroup) {

    var rect = new Kinetic.Rect({
        x: gridOffsetX, y: 0,
        width: gridWidth, height: gridHeight,
        stroke: "black", strokeWidth: 1
    });

    gridGroup.add(rect);

    var t1, t2, index1;

    for (index1 = 1; index1 <= 3; index1++) {
        t2 = (gridHeight / 4 * index1);
        gridGroup.add(drawGridLine(gridOffsetX, t2, gridOffsetX + gridWidth, t2));
    }

    for (index1 = 1; index1 < 48; index1++) {
        t1 = gridOffsetX + (gridWidth / 48) * index1;
        gridGroup.add(drawGridLine(t1, 0, t1, gridHeight));
    }
}

function drawGridLine(startX, startY, endX, endY) {
    return new Kinetic.Line({
        points: [startX, startY, endX, endY],
        stroke: 'black', strokeWidth: 0.5
    });
}

function wireGridEvents(group) {
    group.on('mousedown', function () { writeMessage('mousedown'); });
    group.on('mouseup', function () { writeMessage('mouseup'); });
}

function writeMessage(message) {
    debugText.text(message);
    baseLayer.draw();
}

这里的小提琴示例：http://jsfiddle.net/uvULx/15/

您会注意到，如果您在两行之间单击，网格下的文本将变为“mousedown”。如果您在一行的顶部重复相同的过程，该事件将不会触发。

我很确定这与此人的question（从未得到答复）非常接近。一条评论是将笔画设置为 2，但这不是一个选项，因为动态调整网格以适应较小的屏幕尺寸。

是否可以选择在整个网格上放置某种“透明”形状以捕获网格任何位置的所有事件？

Answer 1

这实际上是 KineticJS 中关于组、形状、鼠标事件和别名的错误，并且仅在两天前由 @lavrton 解决。另请参阅 github 上的 this 问题（和其他 3 个相关问题）。

我更新了您的小提琴以使用此最新提交中的代码，然后它可以正常工作：http://jsfiddle.net/uvULx/17/。因此，更新您的项目以使用最新的 KineticJS '发布'，应该可以解决您的问题（从 gi​​thub here 下载，而不是从 kineticjs.com 网站下载）。

作为旁注，您在小提琴版本中描述的行为也会在笔画为 2 或更大时发生。大约在该行的中心，该事件不会触发。