更改形狀的顏色而不重新創建

我有一個項目使用了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。

來源

2016-02-04 McArthey

您使用EaselJS舊版本的任何機會呢？命令在0.7.0中添加。這裏是你使用0.8.2的例子：http://jsfiddle.net/lannymcnie/5km8a4st/ – Lanny

原來我在那裏使用0.7.0這麼好的電話。我跟着一個教程，我添加了cdn引用，但從來沒有打擾到驗證當前版本！ – McArthey

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

來源

2016-02-04 09:38:45 derz

我已經通過了相當多的文檔，但我沒有注意到'命令'。我會看一看。 – McArthey

http://blog.createjs.com/new-command-approach-to-easeljs-graphics/ – Lanny

請參閱我對.command屬性的編輯 – McArthey

更改形狀的顏色而不重新創建

回答

相關問題