如何将PIXI.js矩形Sprite图片转换为圆形头像样式

要把矩形/正方形的PIXI Sprite改成圆形头像，最直接的方法是使用**遮罩（Mask）**功能，以下是修改后的完整代码：

import "./styles.css";
import * as PIXI from "pixi.js";

let app = new PIXI.Application({
  width: 800,
  height: 600,
  antialiasing: true,
  transparent: false,
  resolution: 1,
});

document.body.appendChild(app.view);

// 修改背景颜色（注意去掉引号，PIXI接受十六进制数值）
app.renderer.backgroundColor = 0x000000;

PIXI.loader.load(() => {
  const avatar = PIXI.Sprite.from(
    "https://scontent.fsof10-1.fna.fbcdn.net/v/t39.30808-6/328967084_733962544767181_6767350406211342384_n.jpg?_nc_cat=110&ccb=1-7&_nc_sid=5f2048&_nc_ohc=I8xWlna0c1YQ7kNvgGPzMDD&_nc_ht=scontent.fsof10-1.fna&oh=00_AfBH5ijJzlok_XqCN4BPrcjzN2Nj4qMNAHCXr4jqDfh04Q&oe=663E9A2D"
  );

  avatar.width = 100;
  avatar.height = 100;
  avatar.x = 100;
  avatar.y = 200;
  // 设置锚点为中心，简化遮罩定位
  avatar.anchor.set(0.5);

  // 方法1：使用PIXI.Circle直接作为遮罩（更简洁）
  avatar.mask = new PIXI.Circle(0, 0, avatar.width / 2);

  // 方法2：使用PIXI.Graphics绘制圆形作为遮罩（灵活性更高，可自定义形状）
  // const circleMask = new PIXI.Graphics();
  // circleMask.beginFill(0xffffff);
  // circleMask.drawCircle(0, 0, avatar.width / 2);
  // circleMask.endFill();
  // circleMask.x = avatar.x;
  // circleMask.y = avatar.y;
  // avatar.mask = circleMask;

  app.stage.addChild(avatar);
});

关键说明 #

• 锚点设置：avatar.anchor.set(0.5)让精灵的中心点作为坐标原点，这样遮罩的圆心可以直接对应精灵中心，无需额外计算偏移。
• 遮罩原理：遮罩会限制精灵的渲染区域，只有遮罩形状内的部分会显示出来。
• 两种遮罩方式：
  • PIXI.Circle：适合简单圆形场景，代码更简洁，遮罩基于精灵自身坐标系。
  • PIXI.Graphics：适合需要自定义复杂形状的场景，需要手动对齐遮罩与精灵的位置。

内容的提问来源于stack exchange，提问作者Etika49