2

我正在尝试检测 Kinetic.Line 对象上的鼠标悬停。

根据文档， Kinetic.Line 确实具有 on 功能，因为它是节点的子节点。on 函数将 mousemove 和 mouseover 列为支持的事件。

但是，它似乎不适用于鼠标悬停或鼠标移动。

这是设计使然吗？这个功能会实现吗？难道我做错了什么？

function canvasTest () {
    stage = new Kinetic.Stage({
        container: "tutorial",
        width: 400,
        height: 400
    });

    var layer = new Kinetic.Layer();

    var redLine = new Kinetic.Line({
        points: [73, 70, 340, 23, 450, 60, 500, 20],
        stroke: "red",
        strokeWidth: 15,
        lineCap: "round",
        lineJoin: "round"
    });

    redLine.on('mouseover mousemove', function (ev) {
        alert('line moused over.');
    });

    layer.add(redLine);

    stage.add(layer);
}
4

2 回答 2

2

动力学线使用像素检测来处理事件，因为它们没有路径。您需要使用 shape.saveData() 方法才能检测到它。

这是一个例子：

http://www.html5canvastutorials.com/kineticjs/html5-canvas-pixel-detection-with-kineticjs/

干杯!

于 2012-05-27T16:32:24.707 回答
2

我想补充一下 Erics 的答案。

线所附加的层需要添加到舞台之前！发出 .saveData() 函数。否则你会有一个例外。

祝你好运。

于 2012-06-10T13:29:15.803 回答