无需重新创建即可更改形状的颜色

Question

我有一个使用 easelJS 的项目，我试图简单地更改形状对象的颜色。我有一个 couple of examples 但它们似乎都表明我需要再次调用 graphics.beginFill() 来完全重绘形状。考虑到我已经存储了我的形状对象并且能够对其执行其他操作，这似乎完全过分了。我也尝试过使用 ColorFilter and ColorMatrix 但没有运气来进行干净的颜色更改。在某些情况下，颜色本质上是 "overwrites" 形状的细节。

我有一个 ShapeObject 数组，我将 createjs.Shape() 对象存储在其中。

    var ShapeObject = function() 
    {
            this.name;
            this.shape;
            this.rotation;
            this.color;
    };

sObject = new ShapeObject();

myShape = new createjs.Shape();
sObject.shape = myShape;

shapes = new Array();
shapes.push(sObject);

稍后我可以从数组中检索形状并应用过滤器，例如，

    s = shapes[i];
    filter = new createjs.ColorFilter(0,0,0,1, 255,128,0,0);
    s.shape.filters = [ filter ];

使用相同的示例，我想避免必须完全重新创建形状。我尝试了以下方法，但是当它改变颜色时，我丢失了最初应用的形状的所有其他细节。

    s.shape.graphics.clear().beginFill(color);

有没有人知道如何在不完全重新创建原始形状的情况下简单地更改颜色？

编辑

根据有关 .command 和 createjs command blog post 的回答，我创建了以下内容。

    var theShape = new createjs.Shape();

    var fillCommand = theShape.graphics.beginFill("yellow").command;

    theShape.graphics.setStrokeStyle(1)
        .beginStroke(createjs.Graphics.getRGB(0, 0, 0))
        .drawCircle(0, 0, 20)
        .moveTo(0,-20)
        .lineTo(0,0)
        .moveTo(0,0)
        .lineTo(20,0);

    fillCommand.style = "orange";

尽管与示例几乎相同，但我在上面的最后一行收到错误 Uncaught TypeError: Cannot set property 'style' of undefined。

Answer 1

我不会使用 ColorFilter 或 ColorMatrix，它可能会慢得多。但是你可以使用 Graphics 命令对象，查看文档：http://www.createjs.com/docs/easeljs/classes/Graphics.html

 var fillCommand = myGraphics.beginFill("red").command;
 // ... later, update the fill style/color:
 fillCommand.style = "blue";

无需重新创建即可更改形状的颜色

Change color of shape without recreating

javascript

colors

createjs

easeljs