Createjs應用線性漸變筆畫

Question

使用Createjs而不是Kinetics編寫Web應用程序。我對createjs SVG感興趣。無論如何，我不知道我是否在浪費時間轉換。我只是試圖添加一個筆觸到線性漸變按鈕。動力學很容易，createjs，並非如此。

我不明白他們爲什麼包括許多不同的類爲同一件事（矩形，graphics.rect，形狀）。幹得好。我試圖鎖定電話。

var bttn = new c.Shape(); 
     bttn.graphics.beginLinearGradientFill(["blue", "white"], [.2, .9], 0, 0,0,50).drawRoundRect(100, 10, 80, 35,5).setStrokeStyle(13).beginLinearGradientStroke(["black", "blue"], [.2, .9], 0, 0,0,50); 

但是，當我運行它，我得到的梯度，但沒有中風的矩形。查看文檔，他們發佈屬性beginLinearGradientStroke的格式並將其應用於新的矩形，並且該矩形沒有填充。這繪製了筆畫，但它不附加到原始對象。

bttn.graphics.setStrokeStyle(13).beginLinearGradientStroke(["black", "blue"], [.2, .9], 0, 0,0,50).drawRect(20, 20, 120, 120); 

我在這裏錯過了什麼？

謝謝。

Answer 1

EaselJS使用一個模型來定義您的筆畫和填充，然後使用這些樣式進行繪製。所以，你只需要調整你的代碼來定義筆觸繪製矩形前：

var bttn = new c.Shape(); 
     bttn.graphics.beginLinearGradientFill(["blue", "white"], [.2, .9], 0, 0,0,50).setStrokeStyle(13).beginLinearGradientStroke(["black", "blue"], [.2, .9], 0, 0,0,50).drawRoundRect(100, 10, 80, 35,5); 

，並解決您的其他問題，矩形CreateJS爲幾何長方形 - 這是用於存儲數據代表一個矩形類，和方法來操縱矩形，它不會繪製任何東西。