如何在 EaselJS 中更新径向渐变填充颜色

Question

我正在为 javascript canvas 动画在 easelJS 中构建径向渐变填充圆：

const blur1 = new createjs.Shape();
const endColor = this.hexToRGBA(data.settings.startColor,0);
blur1.circleCmd = blur1.graphics.beginRadialGradientFill([data.settings.startColor,endColor], [.25, .9], 0, 0, 0, 0, 0, 50).command;
blur1.graphics.drawCircle(0,0,50);

我正在使用命令功能以便稍后更新该填充。

在请求动画帧中，我希望能够说 update the fill of this circle to the current color - 我正在补间的颜色值。所以我有：

thisBlur1.circleCmd.style.props.colors[0] = curColor;
thisBlur1.circleCmd.style.props.colors[1] = this.hexToRGBA(curColor,0);

我看到它正确地设置了圆的属性，但它没有更新屏幕上的颜色，所以我猜 style.props.colors 数组是只读的？或者，也许我需要在每一帧中完全重绘圆圈？我想避免这种情况，因为还有许多其他属性可以在该圆的任何帧发生变化。

如何在 easelJS 中更新圆的渐变填充？

Answer 1

您的方法非常接近。由于 Canvas 创建渐变的方式，您不能直接修改渐变属性。相反，在您的填充命令上调用 radialGradient 函数：

thisBlur1.circleCmd.radialGradient([...newColors], [.25, .9], 0, 0, 0, 0, 0, 5);

我最近回答了一个关于补间渐变的问题，你可以在这里阅读：How to animate an EaselJS gradient using TweenJS?

如何在 EaselJS 中更新径向渐变填充颜色

how to update a radial gradient fill color in EaselJS

javascript

animation

canvas

createjs

easeljs