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能够处理多个路径，直到谷歌在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);

以下是小提琴中的代码：http://jsfiddle.net/QcsBH/

我在文档中找不到关于某个组的事件处理的引用，但我很惊讶地看到一个组处理其中所有成员的事件。

Answer 2

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

canvas.stroke（本）; canvas.fill（本）; canvas.fillStroke（本）;

以下是绘制自定义形状的示例：

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

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

鼠标事件不会触发kineticjs形状

2 个答案: