Html5 canvas KineticJS-使用组时在形状覆盖上下文设置中使用drawFunc_Html5 Canvas_Kineticjs_Shape

Html5 canvas KineticJS-使用组时在形状覆盖上下文设置中使用drawFunc

html5-canvas

Html5 canvas KineticJS-使用组时在形状覆盖上下文设置中使用drawFunc,html5-canvas,kineticjs,shape,Html5 Canvas,Kineticjs,Shape,我对使用HTML5Canvas和KineticJS非常陌生，所以如果这是我的一个明显错误，请原谅我我的问题是，我使用的是由形状组成的组。这些形状使用drawFunc来实现绘图的魔力。都是好东西。但是，我注意到在Shape调用中所做的设置似乎覆盖了“全局”上下文设置。我创建了一个图标，在标准的“KineticJS拖放组”中添加了一些十字（形状），这一点最能说明问题您会注意到，除了在最后一个十字（形状）之后创建的最后一个设置之外，在彩色框的设置上的形状戳记中进行的笔划和填充设置这感觉像是某种延

我对使用HTML5Canvas和KineticJS非常陌生，所以如果这是我的一个明显错误，请原谅我

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

您会注意到，除了在最后一个十字（形状）之后创建的最后一个设置之外，在彩色框的设置上的形状戳记中进行的笔划和填充设置

这感觉像是某种延迟评估的事情，因为只有当组被渲染时，事情才会完成

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

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

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

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