Как обрезать и маскировать спрайты в Pixi.js как `clip-path` в CSS

Question

В CSS мы можем замаскировать / обрезать квадратное изображение внутри фигуры с помощью clip-path, например, clip-path: ellipse(60px 40px at 75px 30px); обрезает изображение в эллипсе.

Как я могу обрезать спрайт в эллипсев Pixi.js?

Answer 1

Просто нарисуйте PIXI.Graphics с указанным размером, а затем присвойте его sprite.mask.

const sprite = PIXI.Texture.fromImage('image-file')
const mask = new PIXI.Graphics()
mask.beginFill(0x000000)
mask.drawEllipse(75, 30, 60, 40)
sprite.mask = mask