javascript - EaselJS:在属性更改时更新形状颜色

我正在使用EaselJS在JS中编写一个简单的游戏。我尝试保持所有面向对象的状态，以保持游戏状态，EaselJS对象状态以及画布上显示的内容的同步。我希望可以通过更改其属性来更改画布上显示的形状的笔触颜色。我在文档append() here中找到了，但无法正常工作。

到目前为止，这是我取得的成就：

形状定义：

var bLetter = new createjs.Shape();
bLetter.graphics.append({exec: setPoweredState});
bLetter.graphics.moveTo(0, 0)
                .lineTo(0, segSize * 2)
                .arc(circSize, segSize * 2, circSize, Math.PI, Math.PI + 0.0001, true);

setPoweredState功能-当我设置bLetter.powered = true时，线条颜色应更改：

setPoweredState = function(ctx, shape) {
    if(shape.powered) {
        shape.color = consts.COLOR_LINE_ACTIVE;
    } else {
        shape.color = consts.COLOR_LINE_INACTIVE;
    }
    shape.graphics.beginStroke(shape.color).setStrokeStyle(consts.STROKE_SIZE, 'round', 'round');

}

当我设置bLetter.powered = true并检查bLetter.color时，似乎函数已执行-bLetter.color属性更改。但是，画布上的bLetter对象不会更新。而且，它根本没有绘制-可能我以错误的方式使用了append()。我想念什么？

顺便说一句：我省略了在画布上初始化createjs.Stage并在其子级添加bLetter的代码，我不认为这是个问题，形状绘制正确，只有颜色不会改变。

最佳答案

问题是您不断向图形队列的末尾追加新的stroke / strokestyle命令，因此它们对前面的路径没有影响。

我认为最简单的方法是按照Lanny的建议保存该命令，并在您的setPoweredState方法中修改其样式。

这是上述示例，对您的方法进行了最小的修改即可实现：
https://jsfiddle.net/u4o4hahw/