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/

干杯！

Answer 2

我想补充Erics的答案。

线附加到的图层需要先添加到舞台上！发出.saveData（）函数。否则你会有例外。

祝你好运。

Kinetic.Line鼠标悬停

2 个答案: