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

Question

我正在为JavaScript画布动画在easylJS中构造一个径向渐变填充的圆：

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数组是只读的吗？ 还是我只需要在每帧中完全重画圆圈？ 我想避免这种情况，因为有很多其他属性可以在此圆的任何帧处更改。

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

Answer 1

您的方法非常接近。 由于Canvas如何创建渐变，因此无法直接修改渐变属性。 而是在您的fill命令上调用radialGradient函数：

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

我最近回答了一个有关补间渐变的问题，您可以在这里阅读： 如何使用TweenJS为EaselJS渐变设置动画？