comment mettre à jour une couleur de remplissage de dégradé radial dans EaselJS

Question

Je construis un cercle rempli de gradient radial EaselJS pour une animation toile javascript:

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

J'utilise la fonction de commande afin que je puisse plus tard mise à jour remplir .

Dans un cadre d'animation de requête, j'aimerais pouvoir dire update the fill of this circle to the current color - une valeur de couleur que je tweening. J'ai donc:

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

Je vois qu'il définit les propriétés du cercle correctement, mais il ne met pas à jour la couleur sur l'écran, donc je devine que le tableau est lu style.props.colors -seulement? Ou peut-être que je dois juste redessiner complètement le cercle de chaque image? Je voudrais éviter cela, car il y a un certain nombre d'autres propriétés qui peuvent changer à n'importe quelle image pour ce cercle. Comment mettre à jour le remplissage en dégradé d'un cercle dans easelJS?

Answer 1

Votre approche est assez proche. Vous ne pouvez pas modifier les propriétés de dégradé directement en raison de la manière dont le canevas crée des dégradés. Au lieu de cela, appelez la fonction radialGradient sur votre commande de remplissage:

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

J'ai récemment répondu à une question sur les gradients de tween, que vous pouvez lire ici: How to animate an EaselJS gradient using TweenJS?