Pixi.js的魅力

摘要：官网

Web开发的时代，图形和动画已经成为了吸引用户注意力的重要手段之一。而 Pixi.js 作为一款高效、易用的2D渲染引擎，已经成为了许多开发者的首选~~
项目中，有一些图像的处理操作（3D图，2D图都有），其中3D图也是通过获取后端服务的图像2D数据进行绘制展示，通过鼠标各种操作调用后端服务来进行重新获取新图数据。这里前端设计到图像的操作使用了PIXIJS

pixijs的最关键的三个对象：
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应用加入到页面元素中展示。将Pixi加入到页面的的元素中，这里“DivLeft3d”是我页面中的一个div元素。，即在onMounted的勾子函数中调用如下代码：

document.getElementById("DivLeft3d").appendChild(Pixi.view);

创建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就是对应的鼠标位置。