import { Rectangle } from '@pixi/math' ; import { RenderTexture , Texture } from '@pixi/core' ; import { Sprite } from '@pixi/sprite' ; import type { ColorStop } from './ColorStop' ; import type { Renderer } from '@pixi/core' ; ignore param color function cssColor ( color ) { let string = color . toString ( 16 ) ; while ( string . length < 6 ) { string = `0${ string }` ; } return `#${ string }` ; } const tempSourceFrame = new Rectangle ( ) ; const tempDestinationFrame = new Rectangle ( ) ; public export class GradientFactory { param renderer param renderTexture param options param options . x0 param options . y0 param options . x1 param options . y1 param options . colorStops todo todo static createLinearGradient ( renderer , renderTexture , options ) { const { x0 , y0 , x1 , y1 , colorStops } = options ; const canvas = document . createElement ( 'canvas' ) ; canvas . width = renderTexture . width ; canvas . height = renderTexture . height ; const context = canvas . getContext ( '2d' ) ; const gradient = context . createLinearGradient ( x0 , y0 , x1 , y1 ) ; colorStops . forEach ( ( stop ) => { gradient . addColorStop ( stop . offset , cssColor ( stop . color ) ) ; } ) ; context . fillStyle = gradient ; context . fillRect ( 0 , 0 , renderTexture . width , renderTexture . height ) ; const renderTarget = renderer . renderTexture . current ; const sourceFrame = tempSourceFrame . copyFrom ( renderer . renderTexture . sourceFrame ) ; const destinationFrame = tempDestinationFrame . copyFrom ( renderer . renderTexture . destinationFrame ) ; const renderSprite = new Sprite ( Texture . from ( canvas ) ) ; renderer . batch . flush ( ) ; renderer . renderTexture . bind ( renderTexture ) ; renderSprite . render ( renderer ) ; renderer . batch . flush ( ) ; renderer . renderTexture . bind ( renderTarget , sourceFrame , destinationFrame ) ; return renderTexture ; } param renderer param renderTexture param options param options . x0 param options . y0 param options . r0 param options . x1 param options . y1 param options . colorStops todo todo static createRadialGradient ( renderer , renderTexture , options ) { const { x0 , y0 , r0 , x1 , y1 , r1 , colorStops } = options ; const canvas = document . createElement ( 'canvas' ) ; canvas . width = renderTexture . width ; canvas . height = renderTexture . height ; const context = canvas . getContext ( '2d' ) ; const gradient = context . createRadialGradient ( x0 , y0 , r0 , x1 , y1 , r1 ) ; colorStops . forEach ( ( stop ) => { gradient . addColorStop ( stop . offset , cssColor ( stop . color ) ) ; } ) ; context . fillStyle = gradient ; context . fillRect ( 0 , 0 , renderTexture . width , renderTexture . height ) ; const renderTarget = renderer . renderTexture . current ; const sourceFrame = tempSourceFrame . copyFrom ( renderer . renderTexture . sourceFrame ) ; const destinationFrame = tempDestinationFrame . copyFrom ( renderer . renderTexture . destinationFrame ) ; const renderSprite = new Sprite ( Texture . from ( canvas ) ) ; renderer . batch . flush ( ) ; renderer . renderTexture . bind ( renderTexture ) ; renderSprite . render ( renderer ) ; renderer . batch . flush ( ) ; renderer . renderTexture . bind ( renderTarget , sourceFrame , destinationFrame ) ; return renderTexture ; } }