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

Question

我正在使用 EaselJS 用 JS 编写一个简单的游戏。我尝试保持一切面向对象，以保持游戏状态、EaselJS 对象状态以及 Canvas 上显示的内容同步。我希望能够通过更改属性来更改 Canvas 上显示的形状的描边颜色。我在文档 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属性变化。但是， Canvas 上的 bLetter 对象不会更新。更重要的是，它根本没有绘制 - 可能我以错误的方式使用 append() 。我错过了什么？

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

Answer 1

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

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

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