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

EaselJS: Update shape color on property change

本文关键字：更新 颜色 改变 属性 EaselJS      更新时间：2023-09-26

我正在使用EaselJS编写一个简单的JS游戏。我试图保持一切面向对象的保持同步状态的游戏，EaselJS对象的状态和我的画布上显示的东西。我想有可能通过改变其属性来改变在画布上显示的形状的笔触颜色。我在这里找到了文档append()，但是我不能让它工作。

这是我到目前为止所取得的成绩:

形状定义:

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()的方式不正确。我错过了什么?

BTW:我省略了在画布上初始化createjs.Stage和添加bLetter作为它的孩子的代码，我不认为这是一个问题，形状是正确绘制的，只有颜色不会改变。

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

在我看来，最简单的方法是像Lanny建议的那样保存命令，并在setPoweredState方法中修改其样式。

下面是上面的一个例子，对你的方法进行最小的修改:https://jsfiddle.net/u4o4hahw/

与其使用append，不如考虑只存储用于修改的命令。

这是我回答的另一个问题，概述了它是如何工作的:在形状中注入新的描边颜色，这里是一篇博客文章:http://blog.createjs.com/new-command-approach-to-easeljs-graphics/

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

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

下面是示例代码中使用的填充命令的文档链接:http://createjs.com/docs/easeljs/classes/Graphics.Fill.html

相关文章：