EaselJS：在属性更改时更新形状颜色

Question

我正在使用 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 作为它的孩子的代码，我认为这不是问题，形状绘制正确，只有颜色不会改变。

Answer 1

不要使用append，而是考虑只存储要修改的命令。

这是我回答的另一个问题，概述了它的工作原理：Injecting a new stroke color into a shape，这是一篇博文：http://blog.createjs.com/new-command-approach-to-easeljs-graphics/

基本上，您可以存储任何命令，然后再更改其属性：

var cmd = shape.graphics.beginFill("red").command;
shape.graphics.otherInstructionsHere();
// Later
cmd.style = "blue";

这里是示例代码中使用的 Fill 命令的文档链接：http://createjs.com/docs/easeljs/classes/Graphics.Fill.html

Answer 2

问题是您不断将新的笔划/笔划样式命令附加到图形队列的末尾，因此它们对前面的路径没有影响。

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

以下是上述示例，只需对您的方法进行最少的修改即可实现： https://jsfiddle.net/u4o4hahw/