我正在使用 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 作为其子项的代码，我认为这不是问题，形状已绘制正确，只有颜色不会改变。
最佳答案
问题是您不断将新的笔划/笔划样式命令附加到图形队列的末尾，因此它们对前面的路径没有影响。
我认为最简单的方法是按照 Lanny 的建议保存命令，并在 setPoweredState 方法中修改其样式。
这是上述示例，只需对您的方法进行最少的修改即可实现: https://jsfiddle.net/u4o4hahw/
关于javascript - EaselJS:更新属性更改时的形状颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39827584/