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

Question

我正在easelJS中为javascript Canvas 动画构造一个径向渐变填充圆:

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

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

在请求动画帧中，我希望能够说将此圆圈的填充更新为当前颜色 - 我正在补间的颜色值。所以我有:

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

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

如何在画架JS中更新圆形的渐变填充？

Answer 1

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

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

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