接受自己的平庸，才是一个人迈向成熟的标志。

前言

DisplayObject是PIXI引擎核心类。它是sprites(精灵)、text(文本)、graphics(图像)、containers(容器)等的基类，并且还为这些对象提供了许多常见功能。了解 DisplayObject类对学习PIXI非常重要，通过它可以了解如何移动、缩放、旋转和组合元素。

但需要注意的是我们不能单独使用 DisplayObject，而是在派生类中使用它的函数和属性。

下面将介绍一些常用的属性

position （位置）

X和Y的位置，以像素为单位，可以改变对象相对于其父对象的位置。

// 分别设置
luFei.position.x = X;
luFei.position.y = Y;

// 统一设置
luFei.position.set(X, Y);

// 若X和Y的值相同,比如都为100
luFei.position.set(100);

以上一篇文章 PixiJS (二)、Hello PixiJS 🔥🔥 中的例子为例，咱们继续编写看一下效果


<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://pixijs.download/release/pixi.js"></script>
    <title>PixiJs</title>
  </head>
  <body>
    <script>
      // 创建一个新的 PIXI.Application 实例
      let app = new PIXI.Application({ width: 640, height: 360, backgroundColor: 0x1099bb });
      // 将实例添加到 DOM 中
      document.body.appendChild(app.view);
      // 创建一个图像精灵
      const luFei = PIXI.Sprite.from('https://img1.baidu.com/it/u=2082729884,1583333066&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=711');
      // 通过 position 设置精灵在画布中的位置
      // luFei.position.x = app.screen.width/2
      // luFei.position.y = app.screen.height/2
      // 上面注释的是分别设置 也可以统一设置
      luFei.position.set(app.screen.width/2, app.screen.height/2); 
      // 把图像精灵添加到舞台（app）上
      app.stage.addChild(luFei);
    </script>
  </body>
</html>

得到的结果如图👇

pivot （枢轴、中心点）

通过 pivot 设置精灵的枢轴，枢轴也可以理解为中心点，枢轴默认为精灵的原点（0, 0）也就是左上角。这里可能不太好理解，举个例子看一下：我想把枢轴设置在精灵X和Y分别在100的位置


<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://pixijs.download/release/pixi.js"></script>
    <title>PixiJs</title>
  </head>
  <body>
    <script>
      // 创建一个新的 PIXI.Application 实例
      let app = new PIXI.Application({ width: 640, height: 360, backgroundColor: 0x1099bb });
      // 将实例添加到 DOM 中
      document.body.appendChild(app.view);
      // 创建一个图像精灵
      const luFei = PIXI.Sprite.from('https://img1.baidu.com/it/u=2082729884,1583333066&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=711');
      // 通过 position 设置精灵在画布中的位置
      // luFei.position.x = app.screen.width/2
      // luFei.position.y = app.screen.height/2
      // 上面注释的是分别设置 也可以统一设置
      luFei.position.set(app.screen.width/2, app.screen.height/2); 

      // 通过 pivot 设置精灵的枢轴，枢轴也可以理解为中心点
      luFei.pivot.set(100, 100);


      // 把图像精灵添加到舞台（app）上
      app.stage.addChild(luFei);
    </script>
  </body>
</html>

得到的结果如图👇

看到这里你可能理解了一点，但理解的还不全，我们把图片旋转起来看一下：

可以看到旋转的焦点就是咱们设置的枢轴，其实枢轴不仅是旋转的焦点，它还是缩放和偏斜的焦点。这个之后再说。

补充： anchor （描点）

这里补充一个知识点：anchor（描点、焦点）。
anchor 和 pivot很相似。 anchor可以移动精灵图的纹理原点，通过设置0-1的值。pivot通过设置像素值来改变精灵的x和y的原点值。

luFei.anchor.set(X, Y); // 默认（0, 0）

举个例子可能就比较好理解，比如我不想使用默认值（左上），我希望以右上角为原点


<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://pixijs.download/release/pixi.js"></script>
    <title>PixiJs</title>
  </head>
  <body>
    <script>
      // 创建一个新的 PIXI.Application 实例
      let app = new PIXI.Application({ width: 640, height: 360, backgroundColor: 0x1099bb });
      // 将实例添加到 DOM 中
      document.body.appendChild(app.view);
      // 创建一个图像精灵
      const luFei = PIXI.Sprite.from('https://img1.baidu.com/it/u=2082729884,1583333066&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=711');
      // 通过 position 设置精灵在画布中的位置
      // luFei.position.x = app.screen.width/2
      // luFei.position.y = app.screen.height/2
      // 上面注释的是分别设置 也可以统一设置
      luFei.position.set(app.screen.width/2, app.screen.height/2); 
      

      // 通过 anchor 设置精灵的右上角为图片精灵的原点
      luFei.anchor.set(1, 0);

      // 把图像精灵添加到舞台（app）上
      app.stage.addChild(luFei);
    </script>
  </body>
</html>

得到的结果如图👇

那么如果以图片的中心点为原点又是怎么设置呢？很简单


<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://pixijs.download/release/pixi.js"></script>
    <title>PixiJs</title>
  </head>
  <body>
    <script>
      // 创建一个新的 PIXI.Application 实例
      let app = new PIXI.Application({ width: 640, height: 360, backgroundColor: 0x1099bb });
      // 将实例添加到 DOM 中
      document.body.appendChild(app.view);
      // 创建一个图像精灵
      const luFei = PIXI.Sprite.from('https://img1.baidu.com/it/u=2082729884,1583333066&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=711');
      // 通过 position 设置精灵在画布中的位置
      // luFei.position.x = app.screen.width/2
      // luFei.position.y = app.screen.height/2
      // 上面注释的是分别设置 也可以统一设置
      luFei.position.set(app.screen.width/2, app.screen.height/2); 
      

      // 通过 anchor 设置精灵的右上角为图片精灵的原点
      // luFei.anchor.set(1, 0);
      // 设置图片精灵的中心点为原点
      luFei.anchor.set(0.5);
      
      // 把图像精灵添加到舞台（app）上
      app.stage.addChild(luFei);
    </script>
  </body>
</html>

得到的结果如图👇

看到这里相信大家都能看出，anchor 和 pivot很相似，都可以设置精灵的焦点。但他们也是有区别的，比如咱们同时把两个属性都写上，


<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://pixijs.download/release/pixi.js"></script>
    <title>PixiJs</title>
  </head>
  <body>
    <script>
      // 创建一个新的 PIXI.Application 实例
      let app = new PIXI.Application({ width: 640, height: 360, backgroundColor: 0x1099bb });
      // 将实例添加到 DOM 中
      document.body.appendChild(app.view);
      // 创建一个图像精灵
      const luFei = PIXI.Sprite.from('https://img1.baidu.com/it/u=2082729884,1583333066&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=711');
      // 通过 position 设置精灵在画布中的位置
      // luFei.position.x = app.screen.width/2
      // luFei.position.y = app.screen.height/2
      // 上面注释的是分别设置 也可以统一设置
      luFei.position.set(app.screen.width/2, app.screen.height/2); 

      // 通过 anchor 设置精灵的右上角为图片精灵的原点
      // luFei.anchor.set(1, 0);
      // 设置图片精灵的中心点为原点
      luFei.anchor.set(0.5);


      // 通过 pivot 设置精灵的枢轴，枢轴也可以理解为中心点
      luFei.pivot.set(100, 100);

      
      // 把图像精灵添加到舞台（app）上
      app.stage.addChild(luFei);
    </script>
  </body>
</html>

得到的结果如图👇

旋转起来看一下：

这里就不卖关子了，其实可以理解为 pivot 是基于 anchor 来设置的，当 anchor 为默认值（0, 0）的时候，pivot 设置多少就是多少，但当 anchor 设置以后，pivot的值就要基于anchor后的焦点来设置。

scale （缩放）

缩放比较好理解，但需要注意的是在设置的时候值为0-1，1即为100%（实际大小）

// 分别设置
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


<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://pixijs.download/release/pixi.js"></script>
    <title>PixiJs</title>
  </head>
  <body>
    <script>
      // 创建一个新的 PIXI.Application 实例
      let app = new PIXI.Application({ width: 640, height: 360, backgroundColor: 0x1099bb });
      // 将实例添加到 DOM 中
      document.body.appendChild(app.view);
      // 创建一个图像精灵
      const luFei = PIXI.Sprite.from('https://img1.baidu.com/it/u=2082729884,1583333066&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=711');
      // 通过 position 设置精灵在画布中的位置
      // luFei.position.x = app.screen.width/2
      // luFei.position.y = app.screen.height/2
      // 上面注释的是分别设置 也可以统一设置
      luFei.position.set(app.screen.width/2, app.screen.height/2); 
      

      // 通过 anchor 设置精灵的右上角为图片精灵的原点
      // luFei.anchor.set(1, 0);
      // 设置图片精灵的中心点为原点
      luFei.anchor.set(0.5);

      // 通过 scale 设置精灵的缩放比例
      luFei.scale.set(0.5);
      
      // 把图像精灵添加到舞台（app）上
      app.stage.addChild(luFei);
    </script>
  </body>
</html>

得到的结果如图👇

rotation （旋转）

旋转比较好理解，就是旋转（这就是一句屁话）。
直接上代码


<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://pixijs.download/release/pixi.js"></script>
    <title>PixiJs</title>
  </head>
  <body>
    <script>
      // 创建一个新的 PIXI.Application 实例
      let app = new PIXI.Application({ width: 640, height: 360, backgroundColor: 0x1099bb });
      // 将实例添加到 DOM 中
      document.body.appendChild(app.view);
      // 创建一个图像精灵
      const luFei = PIXI.Sprite.from('https://img1.baidu.com/it/u=2082729884,1583333066&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=711');
      // 通过 position 设置精灵在画布中的位置
      // luFei.position.x = app.screen.width/2
      // luFei.position.y = app.screen.height/2
      // 上面注释的是分别设置 也可以统一设置
      luFei.position.set(app.screen.width/2, app.screen.height/2); 
      

      // 通过 anchor 设置精灵的右上角为图片精灵的原点
      // luFei.anchor.set(1, 0);
      // 设置图片精灵的中心点为原点
      luFei.anchor.set(0.5);

      // 通过 scale 设置精灵的缩放比例
      luFei.scale.set(0.5);

      // 通过 rotation 设置精灵的旋转角度
      luFei.rotation = 0.5 * Math.PI //90度
      
      // 把图像精灵添加到舞台（app）上
      app.stage.addChild(luFei);
    </script>
  </body>
</html>

这里需要注意的一点就是角度的问题，Math.PI 为 180度，所以 0.5 * Math.PI 为 90 度。

angle （角度）

angle 和 rotation 具有相同的效果。不同点是 rotation 以弧度为单位，angle 以度为单位。


<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://pixijs.download/release/pixi.js"></script>
    <title>PixiJs</title>
  </head>
  <body>
    <script>
      // 创建一个新的 PIXI.Application 实例
      let app = new PIXI.Application({ width: 640, height: 360, backgroundColor: 0x1099bb });
      // 将实例添加到 DOM 中
      document.body.appendChild(app.view);
      // 创建一个图像精灵
      const luFei = PIXI.Sprite.from('https://img1.baidu.com/it/u=2082729884,1583333066&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=711');
      // 通过 position 设置精灵在画布中的位置
      // luFei.position.x = app.screen.width/2
      // luFei.position.y = app.screen.height/2
      // 上面注释的是分别设置 也可以统一设置
      luFei.position.set(app.screen.width/2, app.screen.height/2); 
      

      // 通过 anchor 设置精灵的右上角为图片精灵的原点
      // luFei.anchor.set(1, 0);
      // 设置图片精灵的中心点为原点
      luFei.anchor.set(0.5);

      // 通过 scale 设置精灵的缩放比例
      luFei.scale.set(0.5);

      // 通过 rotation 设置精灵的旋转角度
      // luFei.rotation = 0.5 * Math.PI //90度

      // 通过 skew 设置精灵的偏斜
      // luFei.skew.set(0.1, -0.5)


      // 通过 angle 设置精灵的角度
      luFei.angle = 45

      // 把图像精灵添加到舞台（app）上
      app.stage.addChild(luFei);
    </script>
  </body>
</html>

得到的结果如图👇

skew （偏斜）

偏斜也不太好理解，所以直接来一个例子说一下

 // 通过 skew 设置精灵的偏斜
 luFei.skew.set(0.5, 0) // x轴倾斜0.5

得到的结果如图👇

 // 通过 skew 设置精灵的偏斜
 luFei.skew.set(0, 0.5) // y轴倾斜0.5

得到的结果如图👇

若是同时倾斜的话，一下效果


<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://pixijs.download/release/pixi.js"></script>
    <title>PixiJs</title>
  </head>
  <body>
    <script>
      // 创建一个新的 PIXI.Application 实例
      let app = new PIXI.Application({ width: 640, height: 360, backgroundColor: 0x1099bb });
      // 将实例添加到 DOM 中
      document.body.appendChild(app.view);
      // 创建一个图像精灵
      const luFei = PIXI.Sprite.from('https://img1.baidu.com/it/u=2082729884,1583333066&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=711');
      // 通过 position 设置精灵在画布中的位置
      // luFei.position.x = app.screen.width/2
      // luFei.position.y = app.screen.height/2
      // 上面注释的是分别设置 也可以统一设置
      luFei.position.set(app.screen.width/2, app.screen.height/2); 
      

      // 通过 anchor 设置精灵的右上角为图片精灵的原点
      // luFei.anchor.set(1, 0);
      // 设置图片精灵的中心点为原点
      luFei.anchor.set(0.5);

      // 通过 scale 设置精灵的缩放比例
      luFei.scale.set(0.5);

      // 通过 rotation 设置精灵的旋转角度
      // luFei.rotation = 0.5 * Math.PI //90度

      // 通过 skew 设置精灵的偏斜
      luFei.skew.set(0.1, -0.5)

      // 把图像精灵添加到舞台（app）上
      app.stage.addChild(luFei);
    </script>
  </body>
</html>

得到的结果如图👇

这里需要注意的是，x和y的值可以是负值。

alpha （透明度）

透明度其实很好理解，但还是举个例子看一下。


<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://pixijs.download/release/pixi.js"></script>
    <title>PixiJs</title>
  </head>
  <body>
    <script>
      // 创建一个新的 PIXI.Application 实例
      let app = new PIXI.Application({ width: 640, height: 360, backgroundColor: 0x1099bb });
      // 将实例添加到 DOM 中
      document.body.appendChild(app.view);
      // 创建一个图像精灵
      const luFei = PIXI.Sprite.from('https://img1.baidu.com/it/u=2082729884,1583333066&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=711');
      // 通过 position 设置精灵在画布中的位置
      // luFei.position.x = app.screen.width/2
      // luFei.position.y = app.screen.height/2
      // 上面注释的是分别设置 也可以统一设置
      luFei.position.set(app.screen.width/2, app.screen.height/2); 
      

      // 通过 anchor 设置精灵的右上角为图片精灵的原点
      // luFei.anchor.set(1, 0);
      // 设置图片精灵的中心点为原点
      luFei.anchor.set(0.5);

      // 通过 scale 设置精灵的缩放比例
      luFei.scale.set(0.5);

      // 通过 rotation 设置精灵的旋转角度
      // luFei.rotation = 0.5 * Math.PI //90度

      // 通过 skew 设置精灵的偏斜
      // luFei.skew.set(0.1, -0.5)


      // 通过 angle 设置精灵的角度
      luFei.angle = 45
      
      // 通过 alpha 设置精灵的透明度 0-1(透明到不透明）
      luFei.alpha = 0.5

      // 把图像精灵添加到舞台（app）上
      app.stage.addChild(luFei);
    </script>
  </body>
</html>

得到的结果如图👇

visible (可见否）

通过布尔值设置精灵是否可见，和 alpha （透明度）相似，但不同的是只能设置可见和不可见
举个例子看一下


<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://pixijs.download/release/pixi.js"></script>
    <title>PixiJs</title>
  </head>
  <body>
    <script>
      // 创建一个新的 PIXI.Application 实例
      let app = new PIXI.Application({ width: 640, height: 360, backgroundColor: 0x1099bb });
      // 将实例添加到 DOM 中
      document.body.appendChild(app.view);
      // 创建一个图像精灵
      const luFei = PIXI.Sprite.from('https://img1.baidu.com/it/u=2082729884,1583333066&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=711');
      // 通过 position 设置精灵在画布中的位置
      // luFei.position.x = app.screen.width/2
      // luFei.position.y = app.screen.height/2
      // 上面注释的是分别设置 也可以统一设置
      luFei.position.set(app.screen.width/2, app.screen.height/2); 
      

      // 通过 anchor 设置精灵的右上角为图片精灵的原点
      // luFei.anchor.set(1, 0);
      // 设置图片精灵的中心点为原点
      luFei.anchor.set(0.5);

      // 通过 scale 设置精灵的缩放比例
      luFei.scale.set(0.5);

      // 通过 rotation 设置精灵的旋转角度
      // luFei.rotation = 0.5 * Math.PI //90度

      // 通过 skew 设置精灵的偏斜
      // luFei.skew.set(0.1, -0.5)


      // 通过 angle 设置精灵的角度
      luFei.angle = 45
      
      // 通过 alpha 设置精灵的透明度 0-1(透明到不透明）
      // luFei.alpha = 0.5

      // 通过 visible 设置精灵的可见度
      luFei.visible = false

      // 把图像精灵添加到舞台（app）上
      app.stage.addChild(luFei);
    </script>
  </body>
</html>

得到的结果如图👇

renderable （渲染）

renderable 和 visible 显示的效果一样，但不一样的是，visible 会渲染到画布，renderable 不会渲染到画布上。
同样看一下效果把


<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://pixijs.download/release/pixi.js"></script>
    <title>PixiJs</title>
  </head>
  <body>
    <script>
      // 创建一个新的 PIXI.Application 实例
      let app = new PIXI.Application({ width: 640, height: 360, backgroundColor: 0x1099bb });
      // 将实例添加到 DOM 中
      document.body.appendChild(app.view);
      // 创建一个图像精灵
      const luFei = PIXI.Sprite.from('https://img1.baidu.com/it/u=2082729884,1583333066&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=711');
      // 通过 position 设置精灵在画布中的位置
      // luFei.position.x = app.screen.width/2
      // luFei.position.y = app.screen.height/2
      // 上面注释的是分别设置 也可以统一设置
      luFei.position.set(app.screen.width/2, app.screen.height/2); 
      

      // 通过 anchor 设置精灵的右上角为图片精灵的原点
      // luFei.anchor.set(1, 0);
      // 设置图片精灵的中心点为原点
      luFei.anchor.set(0.5);

      // 通过 scale 设置精灵的缩放比例
      luFei.scale.set(0.5);

      // 通过 rotation 设置精灵的旋转角度
      // luFei.rotation = 0.5 * Math.PI //90度

      // 通过 skew 设置精灵的偏斜
      // luFei.skew.set(0.1, -0.5)


      // 通过 angle 设置精灵的角度
      luFei.angle = 45
      
      // 通过 alpha 设置精灵的透明度 0-1(透明到不透明）
      // luFei.alpha = 0.5

      // 通过 visible 设置精灵的可见度
      // luFei.visible = false

      // 通过 renderable 设置精灵是否可被渲染
      luFei.renderable = false

      // 把图像精灵添加到舞台（app）上
      app.stage.addChild(luFei);
    </script>
  </body>
</html>

得到的结果如图👇

mask（掩模）

掩模是一个物体，能将精灵的可见性限制于掩模的形状。举个例子看一下就懂了，首先咱们再添加一个圆（图形精灵）到画布上。


<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://pixijs.download/release/pixi.js"></script>
    <title>PixiJs</title>
  </head>
  <body>
    <script>
      // 创建一个新的 PIXI.Application 实例
      let app = new PIXI.Application({ width: 640, height: 360, backgroundColor: 0x1099bb });
      // 将实例添加到 DOM 中
      document.body.appendChild(app.view);
      // 创建一个图像精灵
      const luFei = PIXI.Sprite.from('https://img1.baidu.com/it/u=2082729884,1583333066&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=711');
      // 上面注释的是分别设置 也可以统一设置
      luFei.position.set(app.screen.width/2, app.screen.height/2); 
      // 设置图片精灵的中心点为原点
      luFei.anchor.set(0.5);
      // 通过 scale 设置精灵的缩放比例
      luFei.scale.set(0.5);
      // 把图像精灵添加到舞台（app）上
      app.stage.addChild(luFei);

      // 创建一个图形类
      const graphics = new PIXI.Graphics();
      // 指定一个简单的单色填充
      graphics.beginFill(0xFF0000);
      // 通过图形类画一个圆
      graphics.drawCircle(app.screen.width/2, app.screen.height/2, 100);
      // 填充上一次设置的 beginFill()
      graphics.endFill();

      // 把圆添加到舞台（app）上
      app.stage.addChild(graphics);
    </script>
  </body>
</html>

得到的结果如图👇

接下来把圆形精灵以掩模的形式添加在图片精灵上


<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://pixijs.download/release/pixi.js"></script>
    <title>PixiJs</title>
  </head>
  <body>
    <script>
      // 创建一个新的 PIXI.Application 实例
      let app = new PIXI.Application({ width: 640, height: 360, backgroundColor: 0x1099bb });
      // 将实例添加到 DOM 中
      document.body.appendChild(app.view);
      // 创建一个图像精灵
      const luFei = PIXI.Sprite.from('https://img1.baidu.com/it/u=2082729884,1583333066&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=711');
      // 上面注释的是分别设置 也可以统一设置
      luFei.position.set(app.screen.width/2, app.screen.height/2); 
      // 设置图片精灵的中心点为原点
      luFei.anchor.set(0.5);
      // 通过 scale 设置精灵的缩放比例
      luFei.scale.set(0.5);
      // 把图像精灵添加到舞台（app）上
      app.stage.addChild(luFei);
      
      // 创建一个图形类
      const graphics = new PIXI.Graphics();
      // 指定一个简单的单色填充
      graphics.beginFill(0xFF0000);
      // 通过图形类画一个圆
      graphics.drawCircle(app.screen.width/2, app.screen.height/2, 100);
      // 填充上一次设置的 beginFill()
      graphics.endFill();

      // 把圆添加到舞台（app）上
      // app.stage.addChild(graphics);

      // 把圆形精灵以掩模的形式添加在图片精灵上
      luFei.mask = graphics
    </script>
  </body>
</html>

得到的结果如图👇

看完是不是觉得恍然大悟？😄 😄 😄

zIndex (图层层级)

这个和 CSS 里的 z-index 一样，zIndex 的值越大，层级就越高。
需要注意的是，父精灵设置了sortableChildren为true, 子精灵才能按照zIndex的value值进行层级的排序。
简单看一个例子，原本的效果如下（后添加的会覆盖先添加的）

现在我们需要把中间的图片精灵显示在最上面，那就把他的图层层级设置高。


<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://pixijs.download/release/pixi.js"></script>
    <title>PixiJs</title>
  </head>
  <body>
    <script>
      // 创建一个新的 PIXI.Application 实例
      let app = new PIXI.Application({ 
        width: 640, 
        height: 360, 
        backgroundColor: 0x1099bb
      });
      // 只有父精灵设置了sortableChildren为true, 子精灵才能按照zIndex的value值进行层级的排序
      app.stage.sortableChildren = true
      // 将实例添加到 DOM 中
      document.body.appendChild(app.view);

      // 创建一个图像精灵
      const luFei = PIXI.Sprite.from('https://img1.baidu.com/it/u=2082729884,1583333066&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=711');
      // 上面注释的是分别设置 也可以统一设置
      luFei.position.set(app.screen.width/2 - 150, app.screen.height/2 - 100); 
      // 设置图片精灵的中心点为原点
      luFei.anchor.set(0.5);
      // 通过 scale 设置精灵的缩放比例
      luFei.scale.set(0.5);
      luFei.zIndex = 1

      // 创建一个图像精灵
      const luFei1 = PIXI.Sprite.from('https://img1.baidu.com/it/u=2082729884,1583333066&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=711');
      // 上面注释的是分别设置 也可以统一设置
      luFei1.position.set(app.screen.width/2, app.screen.height/2); 
      // 设置图片精灵的中心点为原点
      luFei1.anchor.set(0.5);
      // 通过 scale 设置精灵的缩放比例
      luFei1.scale.set(0.5);
      luFei1.zIndex = 2

      // 创建一个图像精灵
      const luFei2 = PIXI.Sprite.from('https://img1.baidu.com/it/u=2082729884,1583333066&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=711');
      // 上面注释的是分别设置 也可以统一设置
      luFei2.position.set(app.screen.width/2 + 150, app.screen.height/2 + 100); 
      // 设置图片精灵的中心点为原点
      luFei2.anchor.set(0.5);
      // 通过 scale 设置精灵的缩放比例
      luFei2.scale.set(0.5);
      luFei2.zIndex = 1

      // 把图像精灵添加到舞台（app）上
      app.stage.addChild(luFei);
      app.stage.addChild(luFei1);
      app.stage.addChild(luFei2);
      
    </script>
  </body>
</html>

得到的结果如图👇

interactive（事件交互）

启用 DisplayObject 的事件交互。默认触摸（Touch）、指针（pointer）和鼠标（mouse）事件将不会被触发，除非交互式设置为true。


<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://pixijs.download/release/pixi.js"></script>
    <title>PixiJs</title>
  </head>
  <body>
    <script>
      // 创建一个新的 PIXI.Application 实例
      let app = new PIXI.Application({ 
        width: 640, 
        height: 360, 
        backgroundColor: 0x1099bb
      });
      // 将实例添加到 DOM 中
      document.body.appendChild(app.view);

      // 创建一个图像精灵
      const luFei = PIXI.Sprite.from('https://img1.baidu.com/it/u=2082729884,1583333066&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=711');
      // 上面注释的是分别设置 也可以统一设置
      luFei.position.set(app.screen.width/2, app.screen.height/2); 
      // 设置图片精灵的中心点为原点
      luFei.anchor.set(0.5);
      // 通过 scale 设置精灵的缩放比例
      luFei.scale.set(0.5);

      // 开启事件交互
      luFei.interactive = true;

      // 给图像精灵添加点击事件，
      luFei.addListener('click', () => {
        console.log('luFei click') 
      })

      // 把图像精灵添加到舞台（app）上
      app.stage.addChild(luFei);
      
    </script>
  </body>
</html>

得到的结果如图👇

这里需要注意的就是，当需要给精灵添加事件交互时，需要先开始精灵的事件交互。

buttonMode（指定为按钮模式）

元素开启事件交互模式以后，鼠标悬停时还是指针的样式。当 buttonMode 设置为 true 以后，鼠标光标会被更改为手指。


<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://pixijs.download/release/pixi.js"></script>
    <title>PixiJs</title>
  </head>
  <body>
    <script>
      // 创建一个新的 PIXI.Application 实例
      let app = new PIXI.Application({ 
        width: 640, 
        height: 360, 
        backgroundColor: 0x1099bb
      });
      // 将实例添加到 DOM 中
      document.body.appendChild(app.view);

      // 创建一个图像精灵
      const luFei = PIXI.Sprite.from('https://img1.baidu.com/it/u=2082729884,1583333066&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=711');
      // 上面注释的是分别设置 也可以统一设置
      luFei.position.set(app.screen.width/2, app.screen.height/2); 
      // 设置图片精灵的中心点为原点
      luFei.anchor.set(0.5);
      // 通过 scale 设置精灵的缩放比例
      luFei.scale.set(0.5);

      // 开启事件交互
      luFei.interactive = true;
      // 开启按钮模式
      luFei.buttonMode = true;
      // 给图像精灵添加点击事件，
      luFei.addListener('click', () => {
        console.log('luFei click') 
      })

      // 把图像精灵添加到舞台（app）上
      app.stage.addChild(luFei);
      
    </script>
  </body>
</html>

得到的结果如图👇

cursor (光标）

cursor 和 buttonMode 一样可以设置鼠标的光标模式，但不同的是cursor能设置很多不同的模式，具体有哪些模式可以参考：cursor

和 buttonMode 的设置一样


// 设置光标的模式
luFei.cursor = 'wait';

hitArea (命中区域）

当我们给一个添加了事件交互的精灵再添加一个命中区域时，那么精灵的事件交互就只是在命中区域内起作用。
看个例子


<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://pixijs.download/release/pixi.js"></script>
    <title>PixiJs</title>
  </head>
  <body>
    <script>
      // 创建一个新的 PIXI.Application 实例
      let app = new PIXI.Application({ 
        width: 640, 
        height: 360, 
        backgroundColor: 0x1099bb
      });
      // 将实例添加到 DOM 中
      document.body.appendChild(app.view);

      // 创建一个图像精灵
      const luFei = PIXI.Sprite.from('https://img1.baidu.com/it/u=2082729884,1583333066&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=711');
    
      // 通过 scale 设置精灵的缩放比例
      luFei.scale.set(0.5);

      // 开启事件交互
      luFei.interactive = true;
      // 开启按钮模式
      luFei.buttonMode = true;
      // 定义一个矩形对象
      let rec = new PIXI.Rectangle(0, 0, 100, 100);
      // 在图像精灵上添加矩形的命中区域
      luFei.hitArea = rec

      // 给图像精灵添加点击事件，
      luFei.addListener('click', () => {
        console.log('luFei click') 
      })

      // 把图像精灵添加到舞台（app）上
      app.stage.addChild(luFei);
      
    </script>
  </body>
</html>

得到的结果如图👇

parent (父元素）

精灵元素所在的容器元素


<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://pixijs.download/release/pixi.js"></script>
    <title>PixiJs</title>
  </head>
  <body>
    <script>
      // 创建一个新的 PIXI.Application 实例
      let app = new PIXI.Application({ 
        width: 640, 
        height: 360, 
        backgroundColor: 0x1099bb
      });
      // 将实例添加到 DOM 中
      document.body.appendChild(app.view);
      // 创建一个容器
      let container = new PIXI.Container();
      // 为容器添加name属性
      container.name = 'container'
      // 创建一个图像精灵
      const luFei = PIXI.Sprite.from('https://img1.baidu.com/it/u=2082729884,1583333066&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=711');
      // 为图像精灵添加name属性
      luFei.name = 'luFei'
      // 通过 scale 设置精灵的缩放比例
      luFei.scale.set(0.5);

      // 开启事件交互
      luFei.interactive = true;
      // 开启按钮模式
      luFei.buttonMode = true;

      // 给图像精灵添加点击事件，
      luFei.addListener('click', () => {
        console.log("🚀 ~ file: luFei.parent", luFei.parent)
      })
      // 把图像精灵添加到容器上
      container.addChild(luFei);
      // 把容器添加到舞台（app）上
      app.stage.addChild(container);
      
    </script>
  </body>
</html>

得到的结果如图👇

x, y (x轴和y轴的值）

精灵相对于父元素的坐标


<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://pixijs.download/release/pixi.js"></script>
    <title>PixiJs</title>
  </head>
  <body>
    <script>
      // 创建一个新的 PIXI.Application 实例
      let app = new PIXI.Application({ 
        width: 640, 
        height: 360, 
        backgroundColor: 0x1099bb
      });
      // 将实例添加到 DOM 中
      document.body.appendChild(app.view);

      // 创建一个图像精灵
      const luFei = PIXI.Sprite.from('https://img1.baidu.com/it/u=2082729884,1583333066&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=711');

      // 通过 scale 设置精灵的缩放比例
      luFei.scale.set(0.5);

      // 设置x和y轴的值
      luFei.x = 200;
      luFei.y = 100;

      // 把容器添加到舞台（app）上
      app.stage.addChild(luFei);
      
    </script>
  </body>
</html>

得到的结果如图👇

到此 PIXI.DisplayObject 的基本属性就介绍完毕了，具体详情可以查看：PIXI.DisplayObject

PixiJS (三)、PixiJS 引擎的基类 - DisplayObject 🔥🔥

前言

position （位置）

pivot （枢轴、中心点）

补充： anchor （描点）

scale （缩放）

rotation （旋转）

angle （角度）

skew （偏斜）

alpha （透明度）

visible (可见否）

renderable （渲染）

mask（掩模）

zIndex (图层层级)

interactive（事件交互）

buttonMode（指定为按钮模式）

cursor (光标）

hitArea (命中区域）

parent (父元素）

x, y (x轴和y轴的值）