Question

我有一个使用easelJS的项目，因为我试图简单地改变形状对象的颜色。我有couple examples但他们似乎都表示我需要再次通过graphics.beginFill()调用完全重绘形状。考虑到我已经存储了我的形状对象并且能够对其进行其他操作，这似乎完全有点过头了。我也试过使用ColorFilter和ColorMatrix，但没有运气做出干净的颜色变化。在某些情况下，颜色基本上会“覆盖”形状的细节。

我有一个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命令对象，查看文档：{{3}}

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

更改形状颜色而不重新创建

1 个答案: