如何EaselJS

更新徑向漸變填充顏色

我構建在easelJS徑向漸變填充的圓爲JavaScript畫布動畫：如何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中圓的漸變填充？

來源

2017-10-04 mheavers

你將不得不重新繪製。 EaselJS使用常規的畫布繪製方法，它也不提供「更新」功能。「可以改變的其他財產」是什麼意思？ –

你的方法非常接近。由於Canvas創建漸變的方式，您無法直接修改漸變屬性。相反，呼籲個夠命令radialGradient功能：

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

我最近回答了有關補間的梯度，你可以在這裏閱讀一個問題：How to animate an EaselJS gradient using TweenJS?

來源

2017-10-04 15:12:14 Lanny

回答

相關問題