html5 canvas 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”。 如果您在一行上重復相同的過程，事件將不會觸發。

我很確定它與這個人的問題 （從未回答過）有着相同的意義。 一個注釋是將筆划設置為2，但由於為較小的屏幕尺寸動態調整網格大小，因此這不是一個選項。

有沒有選擇在整個網格上鋪設某種“透明”形狀，可以捕捉網格任何位置的所有事件？

Answer 1

這實際上是KineticJS中關於組，形狀，鼠標事件和別名的錯誤，並且在兩天前由@lavrton解決了。 另請參閱github上的此問題（以及其他3個相關問題）。

我更新了你的小提琴，使用這個最新提交的代碼，然后它工作正常： http ： //jsfiddle.net/uvULx/17/ 。 所以更新你的項目以使用這個最新的KineticJS'版本'，應該可以解決你的問題（從github 這里下載，而不是從kineticjs.com網站下載）。

作為旁注，當您的筆划為2或更大時，您在小提琴版本中描述的行為也會發生。 大約在線的中心，事件不會發射。