Createjs 應用線性漸變描邊

Question

使用 Createjs 而不是 Kinetics 編寫 Web 應用程序。 我對 createjs SVG 感興趣。 無論如何，我不知道我是否在浪費時間切換。 我只是想為線性漸變按鈕添加一個描邊。 Kinetics 很簡單，createjs 則不然。

我不明白為什么它們為同一事物包含許多不同的類（矩形、圖形、矩形、形狀）。 干得好。 我正在嘗試鏈接調用。

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 中的 Rectangle 表示一個幾何矩形 - 它是一個用於存儲表示矩形的數據的類，以及操作矩形的方法，它不繪制任何東西。