javascript - 如何使 Kinetic.Line 像其他 Kinetic 形状一样触发事件？

Question

您可以与此代码交互 here on jsFiddle

在 fiddle你可以看到我在旗杆(Kinetic.Line)上制作了一面旗帜(Kinetic.Rect)。我希望当用户将鼠标移动到旗帜或旗杆的任何部分上时触发事件。在之前的尝试中，我已将事件处理程序单独附加到每个形状，只是为了了解 Kinetic.Line 不会触发事件。

在最新的尝试中，我将形状添加到一个组中，并将处理程序附加到该组中，认为这可以解决问题:但事实并非如此。

有什么办法可以实现预期的行为吗？谢谢，请记住按 F12 查看处理程序的控制台消息。

var handler = function(e) {
    console.log("Event fired.");
};

var stage = new Kinetic.Stage({
    container: 'testBlock',
    width: 200,
    height: 200
});

var layer = new Kinetic.Layer();
var group = new Kinetic.Group();

var rect = new Kinetic.Rect({
    x: 75,
    y: 10,
    width: 50,
    height: 50,
    fill: 'silver',
});

line = new Kinetic.Line({
    points: [
        {x: 125, y: 10},
        {x: 125, y: 160},
    ],
    stroke: 'black',
    strokeWidth: 1
});

// add the shapes to the group
group.add(rect);
group.add(line);

// event handler for the group
group.on("mouseover", handler);

// add the group to the layer
layer.add(group);

// add the layer to the stage
stage.add(layer);

Answer 1

当笔画太小时，Kinetic.Line 在处理事件时会遇到问题，您可以在任何笔画 < 3px 的线条上看到这一点。

这是我从 Eric Rowell(KineticJS 的创建者)那里得到的回复:

yep, KineticJS ignores the anti-aliased pixels. If you're drawing a 1px diagonal line, and you want it to be detectable, you need to create a custom hit function to define the hit region. You probably will want to create a hit region that's a line which is about 5px thick or so. Here's an example on creating custom hit regions:

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-custom-hit-function-tutorial/

所以除了Ani的回答之外，您还可以使用drawHitFunc属性为比实际线条粗的线条制作自定义命中区域:

    line = new Kinetic.Line({
        points: [
            {x: 125, y: 10},
            {x: 125, y: 160},
        ],
        stroke: 'black',
        strokeWidth: 1,
        drawHitFunc: function(canvas) {
            var x1=this.getPoints()[0].x;
            var x2=this.getPoints()[1].x;
            var y1=this.getPoints()[0].y;
            var y2=this.getPoints()[1].y;
            var ctx = canvas.getContext();
            ctx.beginPath();
            ctx.lineWidth = 1;
            ctx.moveTo(x1-3,y1-3);
            ctx.lineTo(x1-3,y2+3);
            ctx.lineTo(x2+3,y2+3);
            ctx.lineTo(x2+3,y1-3);
            ctx.closePath();
            canvas.fillStroke(this);
        }
    });

jsfiddle