kineticjs - Kinetic.Line 鼠标悬停

Question

我正在尝试检测 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);
}

Answer 1

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

这是一个例子:

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

干杯!