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

Pixi.js的使用整理的更多相关文章

  1. js数组学习整理

    原文地址:js数组学习整理 常用的js数组操作方法及原理 1.声明数组的方式 var colors = new Array();//空的数组 var colors = new Array(3); // ...

  2. (原)用pixi.js 实现 方块阵点击后原地自转效果

    源码 各位,请教一个问题,我这个还有BUG,我是想实现,点击一下可以 停止转动,然后再点一下重新转动.而不是一直加速,有没有什么好办法?  PS:问题已经解决,谢谢评论的大神@Antineutrino ...

  3. 让hammer完美支持Pixi.js - 2D webG库

    由于项目改造,采用2D webG的pixi库,那么基于canvas的结构上,事件就是最大的一个问题了 改造的原理很简单,把hammer里面的addEventListeners事件绑定给第三方库代替,事 ...

  4. 利用pixi.js制作精灵动画

    CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生.国内开发者昵称为CSS精灵,通过一定的技术手段,让精灵动起来,我称其为精灵动画,那么目前有哪些实现方式 呢?下面让我们详细的聊聊 ...

  5. pixi.js教程中文版--基础篇

    前言 Pixi.js使用WebGL,是一个超快的HTML5 2D渲染引擎.作为一个Javascript的2D渲染器,Pixi.js的目标是提供一个快速的.轻量级而且是兼任所有设备的2D库.提供无缝 C ...

  6. JS正则表达式大全(整理详细且实用)

    JS正则表达式大全(整理详细且实用).需要的朋友可以过来参考下,希望对大家有所帮助!! 正则表达式中的特殊字符 字符 含意 \ 做为转意,即通常在"\"后面的字符不按原来意义解释, ...

  7. HTML5游戏开发引擎Pixi.js完全入门手册(一)框架简介及框架结构分析,作者思路剖析

    前言: 最近无聊在淘宝弄了个小店,打算做一个兼职.遇到一个客户,要我帮忙拷贝一个html5游戏.. 我这人有一个习惯,拿到自己没见过的东西.都会去研究一番.去网上查了下发现,资料都是英文版.感觉极度不 ...

  8. Js Date泣血整理

    原文:Js Date泣血整理 JS Date 对象用于处理日期和时间. 创建 Date 对象的语法: var myDate=new Date() Date 对象会自动把当前日期和时间保存为其初始值. ...

  9. pixi.js

    添加基本文件(库文件) 渲染库 pixi.js pixi.lib.js是pixi.js的子集,依赖class.js,cat.js,event_emiter.js文件 pixi.scroller.js ...

  10. vue.js面试题整理

    Vue.js面试题整理 一.什么是MVVM? MVVM是Model-View-ViewModel的缩写.MVVM是一种设计思想.Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务 ...

随机推荐

  1. Python忽略NoData计算多张遥感影像的像元平均值:whitebox库

      本文介绍基于Python中whitebox模块,对大量长时间序列栅格遥感影像的每一个像元进行忽略NoData值的多时序平均值求取.   在文章Python ArcPy批量计算多时相遥感影像的各像元 ...

  2. protoBuf 实现客户端与服务端

    转载请注明出处: 1.定义消息格式 在 src/main/proto 目录下创建 person.proto 文件,并定义消息格式,例如: syntax = "proto3"; pa ...

  3. 设置nginx允许服务端跨域

    目前项目大多使用前后端分离的模式进行开发,跨域请求当然就是必不可少了,很多时候我们会使用在客户端的ajax 请求中设置跨域请求,也有的在服务端设置跨域.但是有时候会遇到不使用ajax也没有使用后端服务 ...

  4. weex项目使用iconfont 字体图标

    一.使用本地字体图标 1.在 https://www.iconfont.cn/manage/index 注册自己的账号 2.创建自己的项目 3.添加自己需要的图标,并将其下载到本地 4.入口页面引入 ...

  5. Python基础 - 输入和输出

    输出   Python提供了 print() 内置函数完成输出 1 print("你好") 2 3 4 # 你好 n = "你好" print(n) # 你好 ...

  6. 代码随想录算法训练营Day21 二叉树

    代码随想录算法训练营 代码随想录算法训练营Day21 二叉树| 530.二叉搜索树的最小绝对差 501.二叉搜索树中的众数 236. 二叉树的最近公共祖先 530.二叉搜索树的最小绝对差 题目链接:5 ...

  7. ConcurrentHashMap是如何实现的?

    众所周知 ConcurrentHashMap 是 HashMap 的多线程版本,HashMap 在并发操作时会有各种问题,比如死循环问题.数据覆盖等问题.而这些问题,只要使用 ConcurrentHa ...

  8. shell脚本中特殊筛选文件

    问题描述:在写shell中,总会遇到一些各式各样筛选文件的需求,整理了一些特殊情况 1.查找目标文件下大于100Mb的文件 find $target_dir -type f -size +70M 2. ...

  9. Java设计模式中的几种常用设计模式总结

    一.设计模式概念 1.定义 ​ Java包含23种设计模式,是一套对代码设计经验的总结,被人们反复利用,多人熟知的代码设计方式. 2.目的 ​ 为了提高代码的可读性,可扩展性以及代码的复用性,为了解决 ...

  10. hugp-MemE关键美化

    配置front matter 使用vscode snippet快捷生成front matter 参考博客:vs-code-workflows-for-hugo. markdown-snippets-n ...