Pixi.js的使用整理

2023-08-13 10:54 由潇洒一回发表于 #前端开发

最近在做的一个前端项目中，有一些图像的处理操作（3D图，2D图都有），其中3D图也是通过获取后端服务的图像2D数据进行绘制展示，通过鼠标各种操作调用后端服务来进行重新获取新图数据。这里前端设计到图像的操作使用了PIXIJS，这里将使用的方式做一个说明，以作参考。
首先pixijs的官网：https://pixijs.com/ pixijs的中文网使用（只有一些最基本的）：http://pixijs.huashengweilai.com/

理解pixijs的几个对象： 最关键的三个就是： Application对象，sprites（精灵）与stage（舞台）
Application：这个是用来创建Pixi应用的。PIXI.Application会自动选择使用Canvas或者是WebGL来渲染图形，这取决于您的浏览器支持情况。PIXI.Application有一个options对象，可以设置一些参数，比如显示的区域的宽，高，，透明度，分辨率等等等。具体官网有很详细说明。
stage：来自PixiJS中文网的解释，stage（舞台）是Pixi的Container（容器）对象。你可以把一个Container（容器）想象成一种空盒子，它会把你放进去的东西组合在一起并储存起来。stage（舞台）对象是场景中所有可见事物的根容器。你在stage（舞台）里放的任何东西都会在canvas画面上渲染出来，。
sprite：sprite（精灵）是一种的特殊图像对象。您可以控制它们的位置、大小和其他属性，
总体的理解和使用步骤就是：首先用Application创建Pixi应用，当创建了Pixi应用后，舞台容器也就自动创建了，可以理解为容器就是一个用来存放物体的东西，比如我们现实中的存钱罐，收纳箱，衣柜什么的。可以通过应用对象访问到舞台。光有舞台这个容器后，我们就是需要将物体放入进去，这里的物体一般就是我们需要操作的图像。我们通过sprite来加入进来。当然图像渲染中自然少不了图像纹理一说，可以使用YIPixi的loader加载图像纹理并创建精灵，然后将其加入到Pixi的容器stage中，这样就完成了Pixi的整个基本的过程。
我这里是在vue3中使用的PixiJS，第一步创建Pixi应用，关键代码如下：
import * as PIXI from 'pixi.js'; import '@pixi/unsafe-eval' let Pixi=new PIXI.Application({width:800,height:800});
第二步：将Pixi应用加入到页面元素中展示。即在onMounted的勾子函数中调用如下代码：document.getElementById("DivLeft3d").appendChild(Pixi.view); 将Pixi加入到页面的的元素中，这里“DivLeft3d”是我页面中的一个div元素。
第三步：创建sprite并将其加入到Pixi的容器中进行展示：我这里的示例代码中是直接加载的图像的二进制byte[]数据，注意Pixi的图像数据格式是RGBA格式的。我之前这里的数据格式BGRA的，导致显示的图像一直是一个颜色，捣鼓了一天才找到原因。针对Pixi的鼠标事件，dataIndex是我的自定义参数，如果这里不需要参数，可以直接用js箭头函数。还有就是我这里事件是卸载精灵上的，也可以写在舞台stage上来触发，具体看各自使用。
`function pixiLoadImg(dataIndex，imagedata){
let pixelData=new Uint8Array(imagedata);
let sprite=PIXI.Sprite.from(PIXI.Texture.fromBuffer(pixelData, 800, 800, {resourceOptions: {width: 800, height: 800,format: 6408}}));

//对于有事件的精灵，通常需要设置sprite.interactive = true ， 对于作按钮用的精灵，需要设置sprite.buttonMode = true;
sprite.buttonMode = true;
 sprite.interactive = true;
//sprite.anchor.set(0.5) //设置锚点在中间

//这里是针对精灵的一些鼠标事件。
sprite.on('pointerdown',(event)=>{PIXImousedown(dataIndex,event)})
      .on('pointerup',(event)=>{PIXImouseup(dataIndex,event)})
      .on('pointermove',(event)=>{PIXImousemove(dataIndex,event)})
      .on('pointerover',(event)=>{PIXImouseover(dataIndex,event)})
      .on('pointerout',(event)=>{PIXImouseout(dataIndex,event)})

  console.log("添加Pixi数据")
  Pixi.stage.removeChildren();
  Pixi.stage.addChild(sprite);

}另外需要注意的是在Pixi上是没有mousewheel事件的。这个我们可以在更外层的元素上触发这个事件，或者在整个window上监听这个事件，然后判断是否是Pixi上的操作即可，我这里是中键进行缩放操作。参考代码类似：window.addEventListener("mousewheel", (event) => {
console.log("mousewheel");
const step = event.wheelDelta > 0 ? 0.1 : -0.1
//event.preventDefault(); //阻止事件冒泡
if(selectDataIndex>0)
{
proxy.$axios.post(proxy.GLOBAL.baseUrl + 'Hear/MouseWheel',
{"dataIndex":selectDataIndex,"delta":event.deltaY})
.then((res)=>{
let byteBuffer= _base64ToArrayBuffer(res.data.base64Image);
//缩放图像
pixiLoadImg(selectDataIndex,byteBuffer);
}).catch((res)=>{
alert("MouseMove异常");
console.log(res);
});
}
})`

最后，附带获取鼠标在Pixi上的坐标位置的方法：
如果我们是用Pixi的精灵来触发的，通过事件参数来获取到位置信息：event.data.getLocalPosition(event.currentTarget.parent);，类似let currentPosition=event.data.getLocalPosition(event.currentTarget.parent);其中currentPosition.x和currentPosition.y就是对应的鼠标坐标：
如果我们是用Pixi的舞台上触发的，通过舞台上的事件参数来获取位置信息：event.data.globalX和event.data.globalY就是对应的鼠标位置。

热门相关：冉冉心动拒嫁豪门，前妻太抢手本法官萌萌哒拒嫁豪门，前妻太抢手大妆