Pixi.js的使用整理

  • Pixi.js的使用整理已关闭评论
  • 54 次浏览
  • A+
所属分类:Web前端
摘要

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

最近在做的一个前端项目中,有一些图像的处理操作(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就是对应的鼠标位置。