kineticjs设置为一个形状，但有些形状也改变了其他形状

Question

jsfiddle.net/C62Xq/17 /

我想要的是：    顶部按钮将改变顶部拱门的颜色 - 没有别的    右，左，下和中间的颜色分别按此顺序排列。

但是 为什么我的setfill都没有正常运行。顶部按钮应该改变顶部拱门的颜色，但它也会修改圆形。按钮的其余部分表现得如此奇怪。有什么想法吗？

Answer 1

将context.beginPath（）放在每组路径命令的开头

beginPath启动一个新路径并停止上一个路径。

如果没有beginPath，任何新填充都将应用于之前绘制的所有路径。

例如：

var middle = new Kinetic.Shape({ drawFunc: function (context) {

    // beginPath is required

    context.beginPath();

    context.moveTo(25 + xaxis, 125); 

......顶部，底部，左侧和右侧相同。

修正了演示：http://jsfiddle.net/m1erickson/yFQ9F/