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 );

然而，当我运行它时，我得到了带有渐变的矩形，但没有描边。查看文档，他们 post 属性 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 表示一个几何矩形 - 它是一个 class 用于存储表示矩形的数据和操作矩形的方法，它不绘制任何东西。

Createjs应用线性渐变描边

Createjs apply linear gradient stroke

javascript

svg

createjs

linear-gradients