PixiJs

--- theme: qklhk-chocolate highlight: a11y-dark --- > 接受自己的平庸，才是一个人迈向成熟的标志。 # 前言 DisplayObject是PIXI引擎核心类。它是sprites(精灵)、text(文本)、graphics(图像)、containers(容器)等的基类，并且还为这些对象提供了许多常见功能。了解 DisplayObject类对学习PIXI非常重要，通过它可以了解如何移动、缩放、旋转和组合元素。但需要注意的是我们不能单独使用 DisplayObject，而是在派生类中使用它的函数和属性。下面将介绍一些常用的属性 # position （位置） X和Y的位置，以像素为单位，可以改变对象相对于其父对象的位置。 ```html // 分别设置 luFei.position.x = X; luFei.position.y = Y; // 统一设置 luFei.position.set(X, Y); // 若X和Y的值相同,比如都为100 luFei.position.set(100); ``` 以上一篇文章 [PixiJS (二)、Hello PixiJS 🔥🔥](https://juejin.cn/post/7086007386384646180) 中的例子为例，咱们继续编写看一下效果 ```html PixiJs ``` 得到的结果如图👇 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/78d9aaad89e04c6aa048898aba2b8cfe~tplv-k3u1fbpfcp-watermark.image?) # pivot （枢轴、中心点）通过 pivot 设置精灵的枢轴，枢轴也可以理解为中心点，枢轴默认为精灵的原点（0, 0）也就是左上角。这里可能不太好理解，举个例子看一下：我想把枢轴设置在精灵X和Y分别在100的位置 ```html PixiJs ``` 得到的结果如图👇 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/633918d6a61f4c2c9eaae82138229cff~tplv-k3u1fbpfcp-watermark.image?) 看到这里你可能理解了一点，但理解的还不全，我们把图片旋转起来看一下： ![1.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9eb00c007c0f4f8fb72ecf5bd0ecc5d2~tplv-k3u1fbpfcp-watermark.image?) 可以看到旋转的焦点就是咱们设置的枢轴，其实枢轴不仅是旋转的焦点，它还是缩放和偏斜的焦点。这个之后再说。 ## 补充： anchor （描点）这里补充一个知识点：anchor（描点、焦点）。
anchor 和 pivot很相似。 anchor可以移动精灵图的纹理原点，通过设置0-1的值。pivot通过设置像素值来改变精灵的x和y的原点值。 ```html luFei.anchor.set(X, Y); // 默认（0, 0） ``` 举个例子可能就比较好理解，比如我不想使用默认值（左上），我希望以右上角为原点 ```html PixiJs ``` 得到的结果如图👇 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a1c1a4db30a044c6b29e76ab3f4dbc57~tplv-k3u1fbpfcp-watermark.image?) 那么如果以图片的中心点为原点又是怎么设置呢？很简单 ```html PixiJs ``` 得到的结果如图👇 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fe5005a8c69e45a285d08afb594104c9~tplv-k3u1fbpfcp-watermark.image?) 看到这里相信大家都能看出，anchor 和 pivot很相似，都可以设置精灵的焦点。但他们也是有区别的，比如咱们同时把两个属性都写上， ```html PixiJs ``` 得到的结果如图👇 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/16b5dc831f984e31a228b7f124f65960~tplv-k3u1fbpfcp-watermark.image?) 旋转起来看一下： ![2.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/31d7dc9502464fd7bbeddb3f78b16c91~tplv-k3u1fbpfcp-watermark.image?) 这里就不卖关子了，其实可以理解为 pivot 是基于 anchor 来设置的，当 anchor 为默认值（0, 0）的时候，pivot 设置多少就是多少，但当 anchor 设置以后，pivot的值就要基于anchor后的焦点来设置。 # scale （缩放）缩放比较好理解，但需要注意的是在设置的时候值为0-1，1即为100%（实际大小） ```html // 分别设置 luFei.scale.x = 0.5; // x坐标缩小一半 luFei.scale.y = 1; // y坐标保持实际大小 // 统一设置 luFei.scale.set(0.5， 1); // 若X和Y的值相同,比如都为0.5 luFei.position.set(0.5); ``` 举个例子，如果整体缩放0.5 ```html PixiJs ``` 得到的结果如图👇 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/20ef3d513b9f46f4bb5b854bb55bfa0c~tplv-k3u1fbpfcp-watermark.image?) # rotation （旋转）旋转比较好理解，就是旋转（这就是一句屁话）。
直接上代码 ```html PixiJs ``` 这里需要注意的一点就是角度的问题，Math.PI 为 180度，所以 0.5 * Math.PI 为 90 度。 # angle （角度） angle 和 rotation 具有相同的效果。不同点是 rotation 以弧度为单位，angle 以度为单位。 ```html PixiJs ``` 得到的结果如图👇 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1d566dbcb9cf47b3a2ae5e91585edcae~tplv-k3u1fbpfcp-watermark.image?) # skew （偏斜）偏斜也不太好理解，所以直接来一个例子说一下 ```html // 通过 skew 设置精灵的偏斜 luFei.skew.set(0.5, 0) // x轴倾斜0.5 ``` 得到的结果如图👇 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2c80acfbfa234b5bbd05bb5871f25a20~tplv-k3u1fbpfcp-watermark.image?) ```html // 通过 skew 设置精灵的偏斜 luFei.skew.set(0, 0.5) // y轴倾斜0.5 ``` 得到的结果如图👇 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cd180cb6ba634b629689da98819610f7~tplv-k3u1fbpfcp-watermark.image?) 若是同时倾斜的话，一下效果 ```html PixiJs ``` 得到的结果如图👇 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c64d6d6c21774d24a22e41eb31cfceec~tplv-k3u1fbpfcp-watermark.image?) 这里需要注意的是，x和y的值可以是负值。 # alpha （透明度）透明度其实很好理解，但还是举个例子看一下。 ```html PixiJs ``` 得到的结果如图👇 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7f593f2cc49a4cd3aaa12ae87533fe93~tplv-k3u1fbpfcp-watermark.image?) # visible (可见否）通过布尔值设置精灵是否可见，和 alpha （透明度）相似，但不同的是只能设置可见和不可见
举个例子看一下 ```html PixiJs ``` 得到的结果如图👇 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2cded3707e6e4cc7a3185c080fe616c8~tplv-k3u1fbpfcp-watermark.image?) # renderable （渲染） renderable 和 visible 显示的效果一样，但不一样的是，visible 会渲染到画布，renderable 不会渲染到画布上。
同样看一下效果把 ```html PixiJs ``` 得到的结果如图👇 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1bdb487894644c1cb1c1b587ff72b188~tplv-k3u1fbpfcp-watermark.image?) # mask（掩模）掩模是一个物体，能将精灵的可见性限制于掩模的形状。举个例子看一下就懂了，首先咱们再添加一个圆（图形精灵）到画布上。 ```html PixiJs ``` 得到的结果如图👇 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cc61cf78beaa4578a5e2a8d448c25e1f~tplv-k3u1fbpfcp-watermark.image?) 接下来把圆形精灵以掩模的形式添加在图片精灵上 ```html PixiJs ``` 得到的结果如图👇 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6e0eb5e99ddf464baa0aedb6232ec531~tplv-k3u1fbpfcp-watermark.image?) 看完是不是觉得恍然大悟？😄 😄 😄 # zIndex (图层层级) 这个和 CSS 里的 z-index 一样，zIndex 的值越大，层级就越高。
需要注意的是，父精灵设置了sortableChildren为true, 子精灵才能按照zIndex的value值进行层级的排序。
简单看一个例子，原本的效果如下（后添加的会覆盖先添加的） ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4b4d9ed6720647119400a30348e73a7c~tplv-k3u1fbpfcp-watermark.image?) 现在我们需要把中间的图片精灵显示在最上面，那就把他的图层层级设置高。 ```html PixiJs ``` 得到的结果如图👇 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0399e16c0b5f44b484339aa9ec54a35a~tplv-k3u1fbpfcp-watermark.image?)
得到的结果如图👇
# interactive（事件交互）启用 DisplayObject 的事件交互。默认触摸（Touch）、指针（pointer）和鼠标（mouse）事件将不会被触发，除非交互式设置为true。 ```html PixiJs ``` 得到的结果如图👇 ![3.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6e0e02b626f2448982ab120c816bf2fd~tplv-k3u1fbpfcp-watermark.image?) 这里需要注意的就是，当需要给精灵添加事件交互时，需要先开始精灵的事件交互。 # buttonMode（指定为按钮模式）元素开启事件交互模式以后，鼠标悬停时还是指针的样式。当 buttonMode 设置为 true 以后，鼠标光标会被更改为手指。 ```html PixiJs ``` 得到的结果如图👇 ![4.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8640dd9d00c6455393e8c46bdc0cca8b~tplv-k3u1fbpfcp-watermark.image?) # cursor (光标） cursor 和 buttonMode 一样可以设置鼠标的光标模式，但不同的是cursor能设置很多不同的模式，具体有哪些模式可以参考：[cursor](https://developer.mozilla.org/en/docs/Web/CSS/cursor) ![5.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fadff683d77e4a1c84916b31982c609b~tplv-k3u1fbpfcp-watermark.image?) 和 buttonMode 的设置一样 ```html // 设置光标的模式 luFei.cursor = 'wait'; ``` # hitArea (命中区域）当我们给一个添加了事件交互的精灵再添加一个命中区域时，那么精灵的事件交互就只是在命中区域内起作用。
看个例子 ```html PixiJs ``` 得到的结果如图👇 ![43221.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bff72340c5644b8396d1c68a67c38a35~tplv-k3u1fbpfcp-watermark.image?) # parent (父元素）精灵元素所在的容器元素 ```html PixiJs ``` 得到的结果如图👇 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d41c3647b44f484fae6dc20d26213796~tplv-k3u1fbpfcp-watermark.image?) # x, y (x轴和y轴的值）精灵相对于父元素的坐标 ```html PixiJs ``` 得到的结果如图👇 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/208fe9aeb76a403880d866d1658c3fcd~tplv-k3u1fbpfcp-watermark.image?) 到此 PIXI.DisplayObject 的基本属性就介绍完毕了，具体详情可以查看：[PIXI.DisplayObject](https://pixijs.download/release/docs/PIXI.DisplayObject.html)