1

我对使用 HTML5 Canvas 和 KineticJS 很陌生，所以如果这是我的明显错误，请原谅我。

我的问题是我正在使用由形状组成的组。Shapes 使用 drawFunc 来实现绘图魔法。都是好东西。但是 - 我注意到在我的 Shape 调用中所做的设置似乎覆盖了“全局”上下文设置。我创建的一个小提琴最好地展示了这一点，它向标准的“KineticJS 拖放组”演示添加了一些十字（形状） 。

  // ----------------------------------------------------------[ 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);

您会注意到在形状标记中对彩色框的设置进行的描边和填充设置 - 除了在最后一个十字（形状）之后创建的最后一个。

感觉像是某种后期评估的事情，因为只有在渲染组时才完成。

有人可以告诉我我做错了什么吗？

4

1 回答 1

6

上下文是全局的，因此当您对其应用设置时，它们将持续存在于使用上下文进行绘制的每个形状中。

您需要在您的 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"
});

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

于 2012-11-16T13:17:41.403 回答