当前位置： 首页 > news >正文

Pixi.js技术探索：开发者必备的视觉开发工具

news 来源：原创 2024/8/24 18:39:01

pixi.js是一个开源的轻量级2D渲染引擎，专注于利用WebGL和HTML5中的Canvas技术来实现高性能的交互式图形和动画。它旨在提供一个简单而强大的工具集，使开发者能够轻松地创建各种类型的视觉效果，包括游戏、数据可视化、广告和其他富媒体应用程序。

目录

搭建pixi应用

纹理与动画交互实现

设置文字效果

搭建pixi应用

pixi是一个强大的跨平台的js图形库，它是专门用于开发我们交互式的图形、游戏等方面的一个渲染库，它可以帮助我们开发类似于搞定设计或者非常酷炫的网站。它的渲染速度非常快速并且其对应的api也是非常简单，它的兼容性也是非常强的基本上适配我们主流的所有浏览器，最重要的是它是开源免费的，我们可以对其进行任意的修改和加强。

这里先给出pixi的 官网 和 中文网 便于后期我们翻阅查看相关API文档进行学习，接下来我们开始正式的去使用我们的这个pixi库，这里我们借助vite框架进行项目搭建，如果不了解vite框架的朋友，可以阅读我之前的文章：vite脚手架的搭建与使用 ，接下来我们开始搭建我们的项目：

框架搭建好之后，接下来我们需要安装相应的pixi库了，终端执行如下命令进行安装，目前博主安装的pixi.js版本是^8.2.5，如果你使用的版本更高或者更低导致语法出现问题的话，需要自行去翻阅官方文档，查阅对应的写法，这里不再赘述：

npm install pixi.js

安装完相应的库之后，接下来我们在App根组件处开始创建初始pixi应用，如下：

<script setup lang="ts">
import { onMounted } from 'vue'
// 导入pixi
import * as PIXI from 'pixi.js'let app: PIXI.Application;
// 初始化pixi容器
const initPixiContainer = async () => {app = new PIXI.Application();await app.init({ width: 640, height: 360, backgroundColor: 0x1099bb });document.body.appendChild(app.canvas); // 添加容器到body中
}onMounted(() => {initPixiContainer()
})
</script><style lang="scss">
* {margin: 0;padding: 0;box-sizing: border-box;
}
canvas {width: 100vw;height: 100vh;position: fixed;left: 0;top: 0;
}
</style>

最终呈现在页面的效果如下所示：

接下来我们开始一个最简单的操作就是在场景当中添加一个红色的矩形，具体代码如下所示：

<script setup lang="ts">
import { onMounted } from 'vue'
// 导入pixi
import * as PIXI from 'pixi.js'let app: PIXI.Application;
// 初始化pixi容器
const initPixiContainer = async () => {app = new PIXI.Application();await app.init({ width: 640, height: 360, backgroundColor: 0x1099bb, antialias: true, // 添加抗锯齿resolution: window.devicePixelRatio || 1, // 设备像素比});document.body.appendChild(app.canvas); // 添加容器到body中// 创建图形对象let graphics = new PIXI.Graphics();// 开始绘图设置填充颜色，两个参数分别为(颜色, 不透明度)graphics.fill({color: 0xff0000, alpha: 0.5})// 创建图形，四个参数分别是x,y,widht,height,也就是从x,y坐标开始绘制一个宽100，高200的长方形graphics.rect(50, 50, 100, 200)// 图形缩放 参数为缩放比例graphics.scale.set(2, 1)// 图形位移 参数为位移x,ygraphics.position.set(10, 20)// 图形旋转graphics.rotation = 0.1// 设置图形锚点(原点)graphics.pivot.set(10, 10)// 结束绘制操作graphics.fill()// 开始绘图设置填充颜色，两个参数分别为(颜色, 不透明度)graphics.fill({color: 0xffff00, alpha: 0.5})graphics.circle(100, 50, 50) // 绘制圆形, 参数分别为x,y,半径graphics.fill()//将绘制的图形添加到舞台stage中app.stage.addChild(graphics);
}onMounted(() => {initPixiContainer()
})
</script>

最终呈现的效果如下所示：

当然还有一些其他常见的图形的绘制，这里举几个简单的例子：

<script setup lang="ts">
import { onMounted } from 'vue'
// 导入pixi
import * as PIXI from 'pixi.js'let app: PIXI.Application;
// 初始化pixi容器
const initPixiContainer = async () => {app = new PIXI.Application();await app.init({ width: 640, height: 360, backgroundColor: 0x1099bb, antialias: true, // 添加抗锯齿resolution: window.devicePixelRatio || 1, // 设备像素比});document.body.appendChild(app.canvas); // 添加容器到body中// 创建图形对象let graphics = new PIXI.Graphics();// 开始绘图设置填充颜色，两个参数分别为(颜色, 不透明度)graphics.fill({color: 0xff0000, alpha: 0.9})// 绘制圆角矩形graphics.roundRect(10, 10, 150, 150, 30); // 参数分别为(x, y, width, height, radius)graphics.position.set(100, 100); // 设置位置graphics.fill();graphics.fill({color: 0xff00ff, alpha: 0.9});// 绘制椭圆graphics.ellipse(200, 200, 100, 80); // 参数分别为(x, y, width, height)graphics.position.set(80, 0); // 设置位置graphics.fill();graphics.fill({color: 0xffff00, alpha: 0.9});// 绘制多边形graphics.poly([0, 0, 100, 0, 100, 100, 0, 100]);graphics.position.set(0, 20); // 设置位置graphics.fill();//将绘制的图形添加到舞台stage中app.stage.addChild(graphics);
}onMounted(() => {initPixiContainer()
})
</script>

最终呈现的效果如下所示：

纹理与动画交互实现

从官方文档我们可以看出，要处理图像第一步就是将图像文件从网络服务器中拉到用户的网络浏览器当中，所以这里我们要使用Assets.load进行获取图像，官方文档如下：

接下来我们在本地的编辑器中进行测试，代码如下：

const initPixiContainer = async () => {app = new PIXI.Application();await app.init({ width: 640, height: 360, backgroundColor: 0x1099bb, antialias: true, // 添加抗锯齿resolution: window.devicePixelRatio || 1, // 设备像素比});document.body.appendChild(app.canvas); // 添加容器到body中// 创建一个纹理const texture = await PIXI.Assets.load("../public/textures/jian.png")// 创建一个精灵const sprite = new PIXI.Sprite(texture);// 设置精灵的位置sprite.x = app.screen.width / 3;sprite.y = app.screen.height / 4;// 设置精灵的旋转角度sprite.rotation = Math.PI / 7;// 设置精灵图的缩放sprite.scale.set(0.2, 0.2);// 设置精灵图的透明度sprite.alpha = 0.5;// 添加精灵到舞台app.stage.addChild(sprite);
}

最终呈现的效果如下所示，可以看到我们的页面出现了一个大宝剑，这个图片是加载本地资源出现的，我们可以这个图片资源进行各种操作，操作的方式上述代码给出了部分代码的颜色，效果如下：

接下来我们可以借助官方文档给我们提供的ticker函数实现动画效果：

这里我们设置每一帧实现旋转角度+0.01的效果，代码如下：

最终实现的效果如下所示：

当然，我们也可以给精灵图添加一些点击的交互事件，这些点击交互的事件pixi也是给我们已经封装好了的，效果大致如下所示：

sprite.interactive = true; // 开启交互
// 为精灵添加点击事件
sprite.on("click", () => {console.log("点击了")
})
// 鼠标进入离开修改精灵图的透明度
sprite.on("pointerenter", () => {sprite.alpha = 1
})
sprite.on("pointerout", () => {sprite.alpha = 0.5
})

最终呈现的效果如下所示：

当然我们也可以对我们的资源进行一个异步的加载，代码如下：

const initPixiContainer = async () => {app = new PIXI.Application();await app.init({ width: 640, height: 360, backgroundColor: 0x1099bb, antialias: true, // 添加抗锯齿resolution: window.devicePixelRatio || 1, // 设备像素比});document.body.appendChild(app.canvas); // 添加容器到body中// 添加资源PIXI.Assets.add({ alias: 'jian', src: '../public/textures/jian.png' })PIXI.Assets.add({ alias: 'jian2', src: 'https://pixijs.com/assets/bunny.png' })// 异步加载资源const texturesPromise = PIXI.Assets.load(['jian', 'jian2'], (progress) => {console.log("加载完成：", progress)})// 加载资源后执行texturesPromise.then((textures) => {// 创建容器const container = new PIXI.Container()// 创建精灵const sprite = new PIXI.Sprite(textures['jian'])sprite.x = app.screen.width / 2sprite.y = app.screen.height / 2// 设置精灵的锚点sprite.anchor.set(0.5)// 设置精灵的缩放sprite.scale.set(0.5)// 设置精灵的透明度sprite.alpha = 0.5// 设置精灵的旋转角度sprite.rotation = 0.1// 设置精灵交互sprite.interactive = truesprite.on('pointerdown', () => {console.log("点击了精灵")})// 添加精灵到舞台container.addChild(sprite)// 创建精灵2const sprite2 = new PIXI.Sprite(textures['jian2'])sprite2.scale.set(0.5)container.addChild(sprite2)app.stage.addChild(container)})
}

效果如下所示：

设置文字效果

如果想在pixi中设置文字效果的话，可以采用下面的代码进行：

const initPixiContainer = async () => {app = new PIXI.Application();await app.init({ width: 640, height: 360, backgroundColor: 0x1099bb, antialias: true, // 添加抗锯齿resolution: window.devicePixelRatio || 1, // 设备像素比});document.body.appendChild(app.canvas); // 添加容器到body中// 显示文字const text = new PIXI.Text({text: 'Hello World',style: {fontSize: 36,fontFamily:'short-stack',fill: 'red',align: 'center'}})text.x = app.screen.width / 2;text.y = app.screen.height / 2;//设置文字锚点text.anchor.set(0.5, 0.5);app.stage.addChild(text);
}

最终呈现的效果如下所示：

接下来我们可以给这个文字设置一个模糊度处理，代码如下所示：

// 创建模糊效果
const filter = new PIXI.BlurFilter();
filter.blur = 10; // 设置模糊度
text.filters = [filter]; // 添加滤镜
// 监听鼠标是否进入文字
text.interactive = true;
text.on('pointerover', () => {filter.blur = 0; // 取消模糊
})
text.on('pointerout', () => {filter.blur = 10; // 恢复模糊
})

最终呈现的效果如下所示：

当然这里我们也可以安装如下的pixi的相关第三方库来对一些效果更深一层的进行处理：

 npm i pixi-filters

具体的可以参考文档：地址  ，里面也记载了一些API函数的实际效果，供大家进行选择：

这里我简单的举几个代码的例子，安装完第三方库之后，接下来我们需要引入相关函数：

import { OutlineFilter, GlowFilter } from 'pixi-filters'

然后对文字进行相关的滤镜处理，如下：

// 创建轮廓滤镜
const outlineFilter = new OutlineFilter({thickness: 1,color: 0xffff00
});
// 创建发光轮廓
const glowFilter = new GlowFilter({distance: 10, // 发光距离outerStrength: 5, // 发光强度innerStrength: 0, // 内部发光强度color: 0x00ffff, // 发光颜色quality: 0.5, // 发光质量
})text.filters = [outlineFilter, glowFilter]; // 添加滤镜

最终呈现的效果如下所示：

相关文章：

  • MySQL手机号发送验证码设计与应用
  • Pandas数据可视化宝典：解锁图形绘制与样式自定义的奥秘
  • vscode使用记录
  • PXE、Kickstart和cobbler
  • 数据结构(C语言版）-第二章线性表
  • Windows 虚拟机服务器项目部署
  • Spring MVC 全注解开发
  • Go语言--广播式并发聊天服务器
  • TCP重传、滑动窗口、流量控制、拥塞控制机制
  • 【堆 优先队列 第k大】2551. 将珠子放入背包中
  • Flask启动5000端口后关不掉了？
  • 云原生（Cloud native）
  • AV1 编码标准中帧内预测技术概述
  • 黑马头条-环境搭建、SpringCloud
  • 云盘挂载 开机自动模拟 cmd- alist server
  • [js高手之路]搞清楚面向对象,必须要理解对象在创建过程中的内存表示
  • 【翻译】Mashape是如何管理15000个API和微服务的（三）
  • canvas 绘制双线技巧
  • ES2017异步函数现已正式可用
  • JavaScript中的对象个人分享
  • Java基本数据类型之Number
  • MD5加密原理解析及OC版原理实现
  • Netty 4.1 源代码学习：线程模型
  • node-sass 安装卡在 node scripts/install.js 解决办法
  • scrapy学习之路4(itemloder的使用)
  • Zsh 开发指南（第十四篇 文件读写）
  • 读懂package.json -- 依赖管理
  • 让你的分享飞起来——极光推出社会化分享组件
  • 如何编写一个可升级的智能合约
  • 如何解决微信端直接跳WAP端
  • 怎样选择前端框架
  • 7行Python代码的人脸识别
  • 分布式关系型数据库服务 DRDS 支持显示的 Prepare 及逻辑库锁功能等多项能力 ...
  • ​一些不规范的GTID使用场景
  • # 深度解析 Socket 与 WebSocket：原理、区别与应用
  • ###C语言程序设计-----C语言学习（3）#
  • #07【面试问题整理】嵌入式软件工程师
  • （9）YOLO-Pose:使用对象关键点相似性损失增强多人姿态估计的增强版YOLO
  • （Mac上）使用Python进行matplotlib 画图时，中文显示不出来
  • （八）五种元启发算法（DBO、LO、SWO、COA、LSO、KOA、GRO）求解无人机路径规划MATLAB
  • （附源码）spring boot北京冬奥会志愿者报名系统 毕业设计 150947
  • （附源码）ssm捐赠救助系统 毕业设计 060945
  • （删）Java线程同步实现一：synchronzied和wait()/notify()
  • (四)opengl函数加载和错误处理
  • (微服务实战)预付卡平台支付交易系统卡充值业务流程设计
  • （五）大数据实战——使用模板虚拟机实现hadoop集群虚拟机克隆及网络相关配置
  • (转)jQuery 基础
  • (转)从零实现3D图像引擎：(8)参数化直线与3D平面函数库
  • *ST京蓝入股力合节能 着力绿色智慧城市服务
  • .MyFile@waifu.club.wis.mkp勒索病毒数据怎么处理|数据解密恢复
  • .NET DataGridView数据绑定说明
  • .NET(C#) Internals: as a developer, .net framework in my eyes
  • .NET/ASP.NETMVC 深入剖析 Model元数据、HtmlHelper、自定义模板、模板的装饰者模式（二）...
  • .NET4.0并行计算技术基础（1）
  • .NET编程C#线程之旅：十种开启线程的方式以及各自使用场景和优缺点