Question

我是使用HTML5 Canvas和KineticJS的新手，所以请原谅我，如果这是我的一个明显错误。

我的问题是我使用的是由形状组成的组。形状使用drawFunc来完成绘制魔术。所有好东西。但是 - 我注意到我的Shape调用中的设置似乎覆盖了“全局”上下文设置。这最好由我创建的fiddle创建，它将一些十字架（形状）添加到标准“KineticJS拖放组”demo。

  // ----------------------------------------------------------[ my bit starts ]
        var tmp_x = i * 30 + 100
        var tmp_y = i * 30 + 40
        var shape = new Kinetic.Shape({

            drawFunc: function(context) {

                context.moveTo(tmp_x-10, tmp_y);
                context.lineTo(tmp_x + 10, tmp_y);
                context.moveTo(tmp_x, tmp_y - 10);
                context.lineTo(tmp_x, tmp_y + 10);

                this.fill(context);
                this.stroke(context);
            } ,
            fill: "#0FD2FF",
            stroke: "orange"
        });
        group.add(shape);
        // ----------------------------------------------------------[ my bit ends ]

        var box = new Kinetic.Rect({
            x: i * 30 + 210,
            y: i * 18 + 40,
            width: 100,
            height: 50,
            name: colors[i],
            fill: colors[i],
            stroke: 'black',
            strokeWidth: 4
        });

        group.add(box);

您会注意到彩色框设置中的形状标记中的笔触和填充设置 - 除了在最后一个交叉（形状）之后创建的最后一个设置。

感觉就像某种迟到的评价事情，因为事情只有在集团被渲染时才会完成。

有人能给我一个关于我做错了什么的线索吗？

Answer 1

上下文是全局的，因此当您对其应用设置时，它们将为使用上下文绘制的每个形状保留。

您需要在drawFunc中调用context.beginPath()和context.closePath()，围绕您对context的其他调用，以表明这是与其他人形成的独立形状。

现在，您的形状代码将是这样的：

var shape = new Kinetic.Shape({
    drawFunc: function(context) {
        context.beginPath();
        context.moveTo(tmp_x-10, tmp_y);
        context.lineTo(tmp_x + 10, tmp_y);
        context.moveTo(tmp_x, tmp_y - 10);
        context.lineTo(tmp_x, tmp_y + 10);
        context.closePath();

        this.fill(context);
        this.stroke(context);
    },
    fill: "#0FD2FF",
    stroke: "orange"
});

这会阻止您的上下文设置泄漏到其他形状。

KineticJS - 在使用Group时在Shape覆盖上下文设置中使用drawFunc

1 个答案: