鼠标事件不会在 kineticjs 形状上触发

Question

从 4.0.5 升级到 4.4.1，因为 Chrome 停止正确渲染。

但是，在 4.0.5 版本中，可以在 Kinetic.Shape 对象中绘制一条线并检测其上的鼠标事件。这似乎不再是这样了。即使使用推荐的 Canvas.fillStroke(this) 调用。

这是一些代码：

var myshape = new Kinetic.Shape({
    drawFunc: function(canvas) {
        var context = canvas.getContext();
        context.beginPath();
        context.setLineWidth(20);
        context.moveTo(100, 10);
        context.lineTo(100, 60);
        context.closePath();
        context.stroke(); //this does
        //canvas.fillStroke(this); //this doesn't bring the line on the screen
        //context.fill(); //this doesn't make the event work either
        context.beginPath();
        context.setLineWidth(10);
        context.moveTo(100, 60);
        context.lineTo(100, 120);
        context.closePath();
        //canvas.fillStroke(this); //this doesn't bring the line on the screen
        context.stroke(); //this does
        canvas.fillStroke(this);
    },
    draggable: true
});


myshape.on('mousedown', function(event){
    alert('mousedown');
});

这个小提琴中的一个例子：http://jsfiddle.net/GDQ6G/（似乎只在 Chrome 中渲染该行。不在 firefox 中）

此测试页面上的另一个示例：http://www.planetinaction.com/linetest.htm

很明显，我做错了什么，因为这段代码没有在 Firefox 中呈现。有人可以告诉我这是在链接的小提琴中完成的吗？形状的文档显示了如何绘制单个项目。我需要绘制多个项目来形成我的自定义形状，如这个简化的两行示例所示。

Answer 1

事实证明，根据 Eric Rowells 的回答，形状只能包含一条路径。很遗憾，因为 4.0.5 版能够处理多个路径，直到 Google 在 Chrome 中改变了一些时髦的东西。

无论如何，我一直在寻找的答案在 KineticJS 小组中。代码变得更加复杂，但它确实有效。

var stage = new Kinetic.Stage({
                container: 'container',
                width: $('#container').width(),
                height: $('#container').height()
            });
            var layer = new Kinetic.Layer('spline');
            var group = new Kinetic.Group({
                draggable: true,
            });
            group.add(new Kinetic.Shape({
                drawFunc: function(canvas) {
                    var context = canvas.getContext();
                    context.beginPath();
                    context.moveTo(100, 10);
                    context.lineTo(100, 60);
                    context.closePath();
                    canvas.stroke(this);
                },
                strokeWidth: 6,
            }));

            group.add(new Kinetic.Shape({
                drawFunc: function(canvas) {
                    var context = canvas.getContext();
                    context.beginPath();
                    context.moveTo(100, 60);
                    context.lineTo(100, 120);
                    context.closePath();
                    canvas.stroke(this);
                },
                strokeWidth: 20,
            }));

            group.on('mousedown', function(event){
                    alert('mousedown');
            });

            group.on('mouseover', function(event){
                    alert('mouseover');
            });
            layer.add(group);   
            stage.add(layer);

这是 Fiddle 中的代码：http://jsfiddle.net/QcsBH/

我在文档中找不到关于组事件处理的参考资料，但我很惊喜地看到一个组处理其中所有成员的事件。

Answer 2

每个 KineticJS 形状应该只有一个 beginPath() 和一个 closePath() 执行。您也不应该使用上下文直接描边或填充。您需要使用绑定到 KineticJS 画布渲染器的方法：

canvas.stroke(this); canvas.fill(这个); canvas.fillStroke(this);

这是一个绘制自定义形状的示例：

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/

如果您在该教程中将一个简单的侦听器绑定到三角形，则事件会正确触发（您可以直接在页面上修改代码）