EaselJS：更新屬性更改的形狀顏色

我正在使用EaselJS在JS中編寫一個簡單的遊戲。我儘量保持面向對象的一切，以保持遊戲狀態，EaselJS對象的狀態以及畫布上顯示的內容。我希望可以通過改變其屬性來改變畫布上顯示的形狀的筆觸顏色。我發現在文檔append()here，但我無法得到它的工作。EaselJS：更新屬性更改的形狀顏色

這裏是我到目前爲止已經取得的成就：

形狀定義：

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，因爲它的孩子，我不認爲這是一個問題的代碼，形狀繪製正確，唯一的顏色不會改變。

來源

2016-10-03 Wookie88

問題在於您不斷將新筆畫/筆畫樣式命令追加到圖片末尾hics隊列，所以它們對前面的路徑沒有影響。

我認爲最簡單的方法就是像Lanny建議的那樣保存命令，並在setPoweredState方法中修改它的樣式。

這裏是上面的例子，實現以最小的改動你的方法： https://jsfiddle.net/u4o4hahw/

來源

2016-10-04 18:28:40 gskinner

這正是我想要的。另外，謝謝你回答爲什麼我的方法是無效的。沒有比圖書館創作者本人的回答更好的了;） – Wookie88

而不是使用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

來源

2016-10-03 15:32:57 Lanny

嗨，我知道這一點，但我希望自動多一點，如果這是可能的。此外，如果我使用usr命令，我必須分別存儲不同對象的命令，否則我會一次更改所有對象的顏色。 – Wookie88

啊，有道理。我會再看看你的問題。 – Lanny

EaselJS：更新屬性更改的形狀顏色

回答

相關問題