写作时间：2025-08-21

学习Pixi.js2d图形库。创建关于 Pixi.js 可以通过官方提供的脚手架 Pixi.js 快速入门，也可以引入到自己的项目中，本章主要讲的是在 vue 中使用。学习的版本：pixi.js == 8.12.0

⚠️官网提示：
如果使用 Vite，您仍然需要将代码包装在异步函数中。在为生产环境构建时，将顶级await与PixiJS一起使用时存在问题。

已知此问题会影响 Vite <=6.0.6。Vite 的未来版本可能会解决此问题。

1.Pixi.js 安装

npm install pixi.js

2.项目示例

⚠️项目示例注意前提：

PixiJS 8.x 在默认情况下使用了 eval 或类似的代码执行方式，而你的 Vue 环境（可能是在严格的 CSP 策略下）不允许这种不安全的代码执行。

解决方法：
在index.html中的meta元素中的content属性中添加：

1. connect-src 'self' data:;
2. worker-src 'self' blob:;
3. script-src 'self' 'unsafe-eval'

示例代码

<!-- App.vue -->
<template>
  <div></div>
</template>

<script setup lang="ts">
  import { Application, Assets, Container, Sprite } from 'pixi.js';
  import { onMounted } from 'vue';

  onMounted(async () => {
    // 创建新应用程序
    const app = new Application();

    // 初始化应用程序
    await app.init({ background: '#1099bb', resizeTo: window });

    // 将应用程序画布附加到元素 body 中
    document.body.appendChild(app.canvas);

    // 创建容器并将其添加到程序画布中
    const container = new Container();
    app.stage.addChild(container);

    // 加载一个图片（建议本地图片）
    const texture = await Assets.load('/src/assets/bunny.png');

    // 将图片以 5x5 的网格形式插入到容器中
    for (let i = 0; i < 25; i++) {
      const bunny = new Sprite(texture);

      bunny.x = (i % 5) * 40;
      bunny.y = Math.floor(i / 5) * 40;
      container.addChild(bunny);
    }

    // 将容器移动至中心
    container.x = app.screen.width / 2;
    container.y = app.screen.height / 2;
  })

</script>

<style lang="scss">
  canvas {
    width: 100%;
    height: 100%;
    display: block;
  }
</style>

示例结果

注意思路：

通过代码可以绘制形状，加载图片，绑定绘制的元素需要的事件，操作绘制的元素，绘制动画以帧为单位。

api文档：Pixi.js的Api文档

常用类型

1. 图形绘制：Graphics
2. 容器（统一管理多个对象）：Container
3. 资源加载：Assets
4. 滤镜：BlurFilter
   - 外部滤镜库：pixi-filters，安装 npm install pixi-filters
5. 精灵：Sprite

• 在 Pixi.js 中，Sprite（精灵）是用于显示图像的核心类，是渲染 2D 图像（如图片、纹理）的主要载体。简单来说，Sprite 就像一个 “图像容器”，可以将加载好的图片或纹理（Texture）显示在画布上，并支持各种变换操作（移动、旋转、缩放等）。
• 参与交互：结合 Pixi.js 的交互系统，Sprite 可以响应鼠标 / 触摸事件（如点击、悬停），实现交互功能。
• 主要作用
  - 显示图像资源：最核心的功能是将图片（如 PNG、JPG）或纹理（Texture）渲染到屏幕上。例如游戏中的角色、道具、背景图等，通常都用 Sprite 实现。
  - 支持各种变换操作：可以通过属性直接控制 Sprite 的位置、大小、旋转、透明度等，例如：

• • 移动：修改 x/y 坐标
  • 缩放：调整 scale.x/scale.y
  • 旋转：设置 rotation（弧度值）
  • 透明度：修改 alpha（0~1 之间）