PIXI.js 从图像创建头像

Question

我想设计一个具有矩形/正方形形状的图像，该图像作为 PIXI.JS Sprite 加载，看起来像一个圆形的头像。

这是我的代码示例：

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);

//To change the background color
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;
  app.stage.addChild(avatar);
});

游乐场链接： https://codesandbox.io/p/sandbox/pixi-playground-forked-td9x22

Answer 1

我认为“设计类似圆形头像的样式”你指的是这样的东西：

这称为 masking - 意味着源（图像）仅在与目标（图像）相交的地方可见 - 在您的情况下是圆形。

这可以很容易地使用 Pixi.js

Graphics

API 来绘制一个普通的圆圈并将此 mask 分配给 Sprite 的

.mask

属性。

(async () => {
    let app = new PIXI.Application();
    await app.init({
        width: 400,
        height: 300
    });
    document.body.appendChild(app.canvas);

    const texture = await PIXI.Assets.load('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');
    const avatar = new PIXI.Sprite(texture);
    avatar.width = 100;
    avatar.height = 100;
    avatar.x = 100;
    avatar.y = 200;

    avatar.anchor.set(0.5);

    avatar.x = app.screen.width / 2;
    avatar.y = app.screen.height / 2;

    const mask = new PIXI.Graphics();

    mask.circle(avatar.x, avatar.y, 50);
    mask.fill({
        color: 0x000000
    });

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

<script src="https://pixijs.download/v8.1.0/pixi.js"></script>