0

您可以在 jsFiddle 上与此代码进行交互

在小提琴中，您可以看到我在旗杆（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);
4

2 回答 2

2

Kinetic.Line 在描边太小的情况下会出现问题，您可以在任何描边 < 3px 的线中看到这一点。

这是我从 Eric Rowell（KineticJS 的创建者）那里得到的回复：

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

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

于 2013-08-27T16:36:16.700 回答
0

试试 我正在使用的这个小提琴和你的线路的 y2-y1。Kinetic.Rectwidth=1height=

line = new Kinetic.Rect({
    x: 125, y: 10,
        width: 1, height: 150,    
    fill: 'black',
});
于 2013-08-27T10:35:37.390 回答