Question

进行互动

在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在中风太小的情况下遇到事件有问题，你可以看到任何行程中显而易见的情况＆lt; 3PX。

这是我从Eric Rowell（KineticJS的创造者）得到的回应：

是的，KineticJS忽略了抗锯齿像素。如果您正在绘制1px对角线，并且希望它是可检测的，则需要创建自定义命中功能来定义命中区域。您可能希望创建一个大约5px左右的线的命中区域。以下是创建自定义匹配区域的示例：

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

Answer 2

试试这个fiddle 我正在使用Kinetic.Rect与您的行width=1和height= y2-y1。

line = new Kinetic.Rect({
    x: 125, y: 10,
        width: 1, height: 150,    
    fill: 'black',
});

如何让Kinetic.Line像其他动力学形状一样发生火灾？

2 个答案: