如何在 Pixi.js 中像 CSS 中的 `clip-path` 一样剪辑和屏蔽精灵

【问题标题】：How to clip and mask sprites in Pixi.js like `clip-path` in CSS如何在 Pixi.js 中像 CSS 中的 `clip-path` 一样剪辑和屏蔽精灵
【发布时间】：2019-03-18 16:28:47
【问题描述】：

在 CSS 中，我们可以使用clip-path 对形状内的正方形图像进行遮罩/剪裁，例如，clip-path: ellipse(60px 40px at 75px 30px); 将图像剪裁为椭圆。

如何在 Pixi.js 中将精灵剪辑成椭圆？

【问题讨论】：

标签： html5-canvas sprite pixi.js

【解决方案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

【讨论】：