一、什么是 PixiJS

PixiJS的核心是一个渲染系统，它使用WebGL（或可选的Canvas）来显示图像和其他2D视觉内容。它提供完整的场景图（要渲染的对象层次结构），并提供交互支持以启用处理单击和触摸事件。它是现代HTML5世界中Flash的自然替代品，但提供了更好的性能和像素级效果，超出了Flash所能达到的效果。它非常适合在线游戏、教育内容、交互式广告、数据可视化......任何基于 Web 的应用程序，其中复杂的图形很重要。再加上Cordova和Electron等技术，PixiJS应用程序可以作为移动和桌面应用程序分发到浏览器之外。

二、优点

2.1 性能（快）

PixiJS 与其他基于 Web 的渲染解决方案的主要区别之一是速度。从头开始构建渲染管线是为了从用户的浏览器中获得最大性能。

2.2 更小

使用SimpleRope绘制小径和轨道。使用图形绘制多边形，线条，圆形和其他基元。文本提供与sprite一样高性能的全文呈现支持。即使在绘制简单图像时，PixiJS 本身也支持spritesheets，以实现高效加载和易于开发。

2.3 WebGL 原生

WebGL是JavaScript API，用于访问用户的GPU，以实现快速渲染和高级效果。PixiJS利用WebGL有效地显示数千个移动的精灵，即使在移动设备上也是如此。但是使用WebGL提供的不仅仅是速度。通过使用 Filter 类，可以编写着色器程序（或使用预构建的程序！）来实现置换贴图、模糊和其他仅使用 DOM 或 Canvas API 无法完成的高级视觉效果。

2.4 开源

2.5 扩展

2.6 易于部署

Flash需要播放器。Unity 需要安装程序或应用商店。PixiJS只需要一个浏览器。但它并不止于网络。如果要部署移动应用程序，请将PixiJS代码包装在Cordova中。想要部署独立的桌面程序？构建一个电子包装器。

三、缺点

3.1 非框架

PixiJS 是一个渲染引擎，它支持其他功能，例如使用渲染引擎时通常需要的交互管理。但它不是像Unity或Phaser那样的框架。PixiJS 旨在很好地完成一件事 - 渲染图形内容。并使下载 PixiJS 的速度非常快。

3.2 3D渲染器

PixiJS是为2D而构建的。平台游戏、冒险游戏、互动广告、自定义数据可视化...都很好。但是如果你想渲染3D模型，看看babylon.js或three.js。

3.3 移动应用程序

如果你想构建手机游戏，你可以使用PixiJS来完成，但如果你想访问原生绑定，你需要使用像Apache Cordova这样的部署系统。我们不提供对相机、定位服务、通知等的访问。

3.4 无用户界面库

可以使用 PixiJS 的场景图和交互管理器构建自己的 UI，但我们没有开箱即用的 UI 库。

3.5 无数据存储

用于存储设置、分数和其他数据。cookie、网络存储、基于服务器的存储，可以将其中任何一个与 PixiJS 一起使用，但我们不提供这样做的工具。

3.6 音频库

有许多专用的网络音频库（如Howler.js可以与PixiJS一起使用来播放音效和音乐。或者，PixiJS Sound插件旨在与PixiJS很好地配合使用。

3.7 开发环境

pixi是一个渲染引擎，而不是开发环境。打包spritesheets、处理图像、构建 mipmap 或 Retina 就绪精灵 - 这种类型的工具有很棒的独立工具。

四、vue使用pixi

4.1 安装pixi

要安装@pixi/core，不安装屏幕不显示

yarn add pixi.js
yarn add @pixi/core  //PixiJS系统的核心是渲染器，它显示场景图并将其绘制到屏幕上。PixiJS的默认渲染器基于WebGL。

4.2 导入pixi

<script setup>
    import * as PIXI from 'pixi'
</script>

4.3 创建应用程序

let app = new PIXI.Application({
  width: window.innerWidth,                   //画布宽度
  height: window.innerHeight,                 //画布高度
  backgroundColor: 0x1099bb,                  //画布颜色
  resolution:window.devicePixelRatio || 1,   //设备像素比
});

4.4 将视图添加到 DOM

实际是创建一个canvas

document.body.appendChild(app.view);

4.4 创建图像

// 创建一个矩形
const rectangle = new PIXI.Graphics();
rectangle.beginFill(0x66ccff);  //填充颜色
rectangle.drawRect(100, 200, 164, 64); //绘制矩形 x位置，y位置，图形宽，图形高
rectangle.endFill(); //填充结束

4.5 添加到舞台

app.stage.addChild(rectangle);

pixi【概述】