Pixi.js的魅力

2024-01-08 03:04:10

在这里插入图片描述

摘要:官网

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

文章来源:https://blog.csdn.net/weixin_45788691/article/details/135409451
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。