CODEWITHSUNDEEP
javascriptanimationcanvascreatejseaseljs
mheavers
mheavers

Reputation: 30158

how to update a radial gradient fill color in EaselJS

I am constructing a radial gradient filled circle in easelJS for a javascript canvas animation:

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

I am using the command function so that I can later update that fill.

In a request animation frame, I'd like to be able to say update the fill of this circle to the current color - a color value I'm tweening. So I have:

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

I see that it sets the properties of the circle properly, but it doesn't update the color on the screen, so I'm guessing that the style.props.colors array is read-only? Or maybe I need to just completely redraw the circle each frame? I'd like to avoid that, as there are a number of other properties which can change at any frame for this circle.

How do I update the gradient fill of a circle in easelJS?

Upvotes: 0

Views: 574

Answers (1)

Lanny
Lanny

Reputation: 11294

Your approach is pretty close. You can't modify gradient properties directly due to how the Canvas creates gradients. Instead, call the radialGradient function on your fill command:

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

I recently answered a question about tweening gradients, which you can read here: How to animate an EaselJS gradient using TweenJS?

Upvotes: 1

Related Questions