Question

我正在使用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()。我错过了什么？

BTW：我在画布上初始化createjs.Stage并在其中添加bLetter省略代码，我不认为这是一个问题，正确绘制形状，只有颜色不会改变

Answer 1

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

我认为最简单的方法是按照Lanny的建议保存命令，并使用homeManagerInstance.primaryHome?.addAccessory(accessory, completionHandler: { (error) in print("ACCESSORY SERVICES: \(accessory.services.count)") })方法修改其样式。

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

Answer 2

不要使用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";

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

EaselJS：更改属性更改时的形状颜色

2 个答案: