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

Posted 2023-03-05

【中文标题】EaselJS：在属性更改时更新形状颜色

【英文标题】：EaselJS: Update shape color on property change

【发布时间】：2017-02-11 03:51:26

【问题描述】：

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

【参考方案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

【讨论】：

嗨，我知道这一点，但如果可能的话，我想自动化一点。此外，如果我使用 usr 命令，我必须分别存储不同对象的命令，否则我将立即更改所有对象的颜色。

啊，有道理。我会再看看你的问题。

【参考方案2】：

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

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

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

【讨论】：

这正是我想要的。另外，感谢您回答为什么我的方法无效。没有什么比图书馆创建者自己的回答更好的了；）