Kinetic.Line 鼠标悬停答案

【问题标题】：Kinetic.Line mouseoverKinetic.Line 鼠标悬停
【发布时间】：2012-06-10 21:29:15
【问题描述】：

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

【问题讨论】：

标签： kineticjs

【解决方案1】：

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

这是一个例子：

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

干杯！

【讨论】：

在 line 对象上调用 saveData() 方法会产生：“Uncaught TypeError: Cannot read property 'attrs' of undefined”
同样的问题发生在我身上。会喜欢这个的解决方案！
在尝试保存ImageData之前确保它在舞台/图层上

【解决方案2】：

我想添加到 Erics 的答案。

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

祝你好运。

【讨论】：