html5 画布 kineticjs 事件

Posted 2023-03-05

【中文标题】html5 画布 kineticjs 事件

【英文标题】：html5 canvas kineticjs event

【发布时间】：2014-06-08 22:09:27

【问题描述】：

我似乎在使用 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，但这不是一个选项，因为动态调整网格以适应较小的屏幕尺寸。

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

【参考方案1】：

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

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

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

【讨论】：

太棒了！非常感谢@Sjiep 指出这一点！正如您所指出的，效果很好！我会投票给你，但显然我还没有足够的代表：P