Kinetic.Line鼠标悬停

问题描述

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

I am attempting to detect a mouseover on a Kinetic.Line object.

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

According to the docs, Kinetic.Line does have the on function since it is a child of node. The on function lists mousemove and mouseover as supported events.

但是，它似乎不适用于鼠标悬停或在线上移动鼠标的情况.

However, it does not seem to work for mouseover or mousemove on a line.

这是设计使然吗?会实现此功能吗?我在做错什么吗?

Is this by design? Will this feature be implemented? Am I doing something wrong?

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);
}

推荐答案

动态行使用像素检测来处理事件，因为它们没有路径.您需要使用shape.saveData()方法以使其可检测.​​

Kinetic lines use pixel detection to handle events since they have no paths. You need to use the shape.saveData() method so that it's detectable.

这是一个例子:

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

干杯！

这篇关于Kinetic.Line鼠标悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！