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

而不是使用 append，考虑只存储关闭命令进行修改。

这是我回答的另一个问题，概述了它的工作原理：, and here is a blog post: 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 命令的文档的 link：http://createjs.com/docs/easeljs/classes/Graphics.Fill.html

Answer 2

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

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

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

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

EaselJS: Update shape color on property change

html

javascript

canvas

easeljs

createjs

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

EaselJS: Update shape color on property change

html

javascript

canvas

easeljs

createjs

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