介绍
@pixi/display 是基于 PIXI.js 的一个核心模块，主要负责处理显示对象图形化渲染。显示对象是 PIXI.js 里非常重要的概念，可以是图片、文本、图形、容器等等，这些对象本质上都是 DisplayObject 的实例。
在这篇文章中，我们将提供详细的 @pixi/display 使用教程，帮助前端开发者更加深入地了解 PIXI.js 的显示对象机制，以及如何使用该模块进行图形渲染。
安装
在使用 @pixi/display 之前，你需要先在你的项目中安装好 PIXI.js。可以通过以下命令进行安装：
npm install pixi.js
安装好 PIXI.js 之后，你可以直接通过 npm 进行 @pixi/display 的安装：
npm install @pixi/display
安装完成后，你可以将其导入到你的项目中：
import { DisplayObject } from '@pixi/display';或者，通过以下方式全局导入：
import * as PIXI from 'pixi.js';
使用方法
基本使用
在 PIXI.js 中，所有的显示对象都继承自 DisplayObject 类。这个类包含了一些基本属性和方法，比如位置、缩放、旋转、父子关系等等。下面是一个基本的例子：
-- -------------------- ---- ------- ------ - -- ---- ---- ---------- -- ---- ----- --- - --- ------------------ ------ ---- ------- ---- ---------- ----- ------------ ------ ----------- -- --- -- ------ --- - ------------------------------------ -- ------ ----- --------- - --- ---------------- ------------------------------ --------------------- -- --- ---- -------------------- ----------- - ---- ----------- - ---- -- ------ ------------------------------ -- ---- -------------
在这个例子中，我们创建了一个画布，并将其添加到 DOM 中。然后，我们创建了一个矩形对象，并设置其颜色、大小、位置。最后，我们将矩形对象添加到舞台中，并调用 app.render() 方法进行图形渲染。
容器
PIXI.js 中的容器对象是一种特殊的显示对象，可以包含多个子对象。容器对象本身不具有可见的形状，而是充当一个显示组的角色。容器可以用来组织和管理多个显示对象，也可以进行复杂的层叠和布局。
在 @pixi/display 中，容器对象是 Container 类的实例。下面是一个容器的例子：
-- -------------------- ---- ------- ------ - -- ---- ---- ---------- -- ---- ----- --- - --- ------------------ ------ ---- ------- ---- ---------- ----- ------------ ------ ----------- -- --- -- ------ --- - ------------------------------------ -- -------- ----- --------- - --- ----------------- ----------- - ---- ----------- - ---- -- -------- ----- ---------- - --- ---------------- ------------------------------- ---------------------- -- --- ---- --------------------- ------------ - -- ------------ - -- ----- ---------- - --- ---------------- ------------------------------- ---------------------- -- --- ---- --------------------- ------------ - --- ------------ - --- -- --------- ------------------------------ ------------ -- --------- ------------------------------ -- ---- -------------
在这个例子中，我们创建了一个容器对象，并设置了其位置。然后，我们创建了两个矩形对象，将其添加到容器对象中。最后，我们将容器对象添加到舞台中，并进行图形渲染。
图片和文本
在 PIXI.js 中，可以通过 Sprite 类来创建图片对象，可以通过 Text 类来创建文本对象。这两种对象的使用方法非常类似，都是创建一个实例并设置属性（比如图片链接、字体等等），然后将其添加到舞台中。
下面是一个图片和文本的例子：
-- -------------------- ---- ------- ------ - -- ---- ---- ---------- -- ---- ----- --- - --- ------------------ ------ ---- ------- ---- ---------- ----- ------------ ------ ----------- -- --- -- ------ --- - ------------------------------------ -- ------ ----- ----- - ------------------------------------------------------ ------- - ---- ------- - ---- -- ------ ----- ---- - --- ----------------- -------- - ----------- -------- --------- --- ----- --------- ------ --------- --- ------ - ---- ------ - ---- -- ------------ ------------------------- ------ -- ---- -------------
在这个例子中，我们使用了 PIXI.Sprite.from 方法来加载一张图片，并设置其位置。同时，我们也创建了一个文本对象，并设置其字体、大小、填充颜色、对齐方式。最后，将这两个对象添加到舞台中，并进行图形渲染。
深入学习
在已经掌握上述基本操作的基础上，我们可以深入学习 @pixi/display 的更多用法和技巧，以及某些常见用法的实现原理。
锚点
锚点（anchor）是 PIXI.js 中非常重要的一个概念。锚点可以理解为一个固定点，用于定位和旋转显示对象。锚点默认为对象的中心点，可以通过修改对象的 anchor 属性来改变锚点的位置。锚点的位置是相对于对象本身而言的。
-- -------------------- ---- ------- ------ - -- ---- ---- ---------- -- ---- ----- --- - --- ------------------ ------ ---- ------- ---- ---------- ----- ------------ ------ ----------- -- --- -- ------ --- - ------------------------------------ -- -------- ----- --------- - --- ---------------- ------------------------------ ----------------------- ---- --- ---- -- ------------- -------------------- ----------- - ---- ----------- - ---- -- ---- ------------------ - ---- ------------------ - ---- -- -- ------------------ - ------- - -- -- --------- ------------------------------ -- ---- -------------
在这个例子中，我们创建了一个矩形对象，并将其中心点移到了左上角。然后，我们将锚点设置为 (0.5, 0.5)（即矩形的中心点），并旋转了 π/4 弧度。最后将其添加到舞台中，并进行图形渲染。
旋转和缩放
对于显示对象，可以通过设置其 rotation 属性来进行旋转，通过设置其 scale 属性来进行缩放。
-- -------------------- ---- ------- ------ - -- ---- ---- ---------- -- ---- ----- --- - --- ------------------ ------ ---- ------- ---- ---------- ----- ------------ ------ ----------- -- --- -- ------ --- - ------------------------------------ -- ------ ----- ----- - ------------------------------------------------------ ------- - ---- ------- - ---- -- ----- -------------- - ------- - -- ------------------ --- -- --------- -------------------------- -- ---- -------------
在这个例子中，我们创建了一张图片，并设置了其位置。然后，我们将其旋转了 π/4 弧度，并将其水平和垂直缩放了两倍。最后将其添加到舞台中，并进行图形渲染。
图形剪裁
在某些情况下，我们可能需要对某个显示对象进行剪裁，只显示其一部分内容。在 PIXI.js 中，可以通过 MASK 属性来进行剪裁。
-- -------------------- ---- ------- ------ - -- ---- ---- ---------- -- ---- ----- --- - --- ------------------ ------ ---- ------- ---- ---------- ----- ------------ ------ ----------- -- --- -- ------ --- - ------------------------------------ -- ------ ----- ----- - ------------------------------------------------------ ------- - ---- ------- - ---- -- ------ ----- --------- - --- ---------------- ----------------------------- ----- --------------------- -- ---- ----- -------------------- -- ------ ---------- - ---------- -- ------------ ------------------------- ----------- -- ---- -------------
在这个例子中，我们创建了一张图片，并设置了其位置。然后，我们创建了一个黑色半透明的矩形，并将其设置为图片对象的 MASK 属性。最后将两个对象添加到舞台中，并进行图形渲染。这样，图片对象的显示区域就被剪裁为矩形的范围内。
自定义显示对象
在 PIXI.js 中，可以通过继承 DisplayObject 类，来自定义一些特殊的显示对象。自定义显示对象可以与 PIXI.js 自身提供的对象一样，具有可见的形状、位置、缩放、旋转等属性，但也可以根据需求添加特定的方法或属性。
下面是一个自定义显示对象的例子：
-- -------------------- ---- -------
------ - -- ---- ---- ----------
----- -------- ------- ------------------ -
------------- -
--------
-- ------
-------------- - --- ----------------
-----------------------------------
-------------------------- -- --- ----
-------------------------
-- ---------
------------------------------
-
-- -----
-------------- -
----------------- -- - ------ ----------
-
-
-- ----
----- --- - --- ------------------
------ ----
------- ----
---------- -----
------------ ------
----------- --
---
-- ------ --- -
------------------------------------
-- -------
----- -------- - --- -----------
---------- - ----
---------- - ----
-- ------------
-----------------------------
-- -------
------------------------
-- ----
-------------在这个例子中，我们通过继承 DisplayObject 类，来创建了一个自定义对象。该对象包含了一个矩形，并添加到自定义对象中。同时，我们也添加了一个自定义方法。最后，我们将自定义对象添加到舞台中，并调用了自定义方法。最后进行图形渲染。
总结
在本文中，我们详细介绍了 @pixi/display 包的使用方法，介绍了 PIXI.js 中的显示对象机制，以及常见的使用技巧和实现原理。希望这篇文章对前端开发者有指导意义，并帮助他们更加深入地了解 PIXI.js 的强大之处。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/164122