探索 PixiJS:强大的 2D 图形渲染库

news2024/10/2 9:52:55

探索 PixiJS:强大的 2D 图形渲染库

  1. 演示地址 演示地址
  2. 源码地址 源码地址
  3. 获取更多 获取更多
  • 随着 Web 技术的发展,越来越多的开发者希望在网页中实现丰富的视觉效果和动画。PixiJS 作为一个高性能的 2D 渲染库,凭借其强大的功能和易用性,成为了许多游戏和互动应用开发者的首选。本文将深入探讨 PixiJS 的特点、应用场景以及核心功能,帮助你更好地理解并应用这个库。

什么是 PixiJS?

  • PixiJS 是一个开源的 2D 渲染引擎,旨在为 Web 应用提供高性能的图形渲染。它使用 WebGL 渲染技术,能够在现代浏览器中实现流畅的动画和交互效果,同时也兼容 Canvas 作为回退方案。PixiJS 的灵活性和扩展性使其非常适合开发游戏、图形应用、数据可视化等多种场景。

为什么选择 PixiJS?

  • PixiJS 的设计理念是高效和易用。它不仅提供了强大的图形处理能力,还确保了良好的性能,能够支持大规模的图形和动画。以下是使用 PixiJS 的一些主要优势:

  • 高性能渲染:

  1. PixiJS 基于 WebGL 构建,能够利用 GPU 加速渲染,提供极高的帧率,适合制作动画密集型的应用。
    灵活的场景图形:

  2. PixiJS 允许开发者创建复杂的场景结构,通过容器和精灵(Sprite)来管理和渲染对象,使得构建复杂的用户界面变得简单。
    丰富的内置功能:

  3. PixiJS 内置了对滤镜、遮罩、纹理管理、动画等功能的支持,极大地简化了图形处理和效果实现。
    友好的开发体验:

  4. PixiJS 提供了简洁的 API 和详细的文档,开发者可以快速上手,降低学习曲线。

  • 跨平台支持:
  • 由于基于 HTML5 技术,PixiJS 可以在所有支持 WebGL 的浏览器中运行,包括桌面和移动设备,确保了广泛的兼容性。

快速上手

  • 首先,你需要在你的项目中引入 PixiJS。你可以通过 CDN 或 npm 安装。
  1. 使用 CDN
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PixiJS Example</title>
    <script src="https://pixijs.download/release/pixi.js"></script>
  </head>
  <body>
    <script>
      // PixiJS 代码将在这里编写
    </script>
  </body>
</html>
  1. 使用 CDN
  • 如果你使用 Node.js 项目,可以通过 npm 安装 PixiJS:
npm install pixi.js
  1. 创建 PixiJS 应用
  • PixiJS 应用的创建非常简单。首先需要实例化一个 PIXI.Application 对象,并将其视图(canvas)添加到 HTML 文档中。
import * as PIXI from 'pixi.js';

// 添加应用
const app = new PIXI.Application({
    width:window.innerWidth,
    height:window.innerHeight,
    background:0x1099bb,
    resolution:window.devicePixelRatio | 1
});


const circle = new PIXI.Graphics();
circle.beginFill(0x66ccff,0.9);
circle.drawCircle(0,0,32);
circle.endFill();
circle.position.set(300,200);
app.stage.addChild(circle);


document.body.appendChild(app.view as any);

常见图元绘制

  1. 绘制矩形
  • 绘制矩形可以使用 drawRect 方法。需要指定矩形的位置和尺寸:
import * as PIXI from 'pixi.js';

const app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    background: 0x1099bb,
    resolution: window.devicePixelRatio || 1
});


const graphics = new PIXI.Graphics();
graphics.beginFill(0xff0000);
graphics.drawRect(50,50,100,100);
graphics.endFill();
graphics.position.set(100,100);
app.stage.addChild(graphics);

document.body.appendChild(app.view as any);
  1. 绘制圆形
  • 使用 drawCircle 方法可以绘制圆形。需要指定圆心坐标和半径:
import * as PIXI from 'pixi.js';

const app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    background: 0x1099bb,
    resolution: window.devicePixelRatio || 1
});

const graphics = new PIXI.Graphics();
graphics.beginFill(0xff0000);
graphics.drawCircle(200, 200, 50);
graphics.endFill();
graphics.position.set(100,100);
app.stage.addChild(graphics);


document.body.appendChild(app.view as any);

  1. 绘制线条
  • 使用 lineStyle 方法设置线条的样式,然后使用 moveTo 和 lineTo 方法绘制线条:
import * as PIXI from 'pixi.js';

const app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    background: 0x1099bb,
    resolution: window.devicePixelRatio || 1
});

const graphics = new PIXI.Graphics();
graphics.lineStyle(2,0x0000ff);
graphics.moveTo(300, 50);
graphics.lineTo(400, 150);
graphics.endFill();
graphics.position.set(100,100);
app.stage.addChild(graphics);

document.body.appendChild(app.view as any);

  1. 绘制多边形
  • 使用 drawPolygon 方法可以绘制多边形。你需要传递一个数组,定义多边形的各个顶点:
import * as PIXI from 'pixi.js';

const app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    background:0x1099bb,
    resolution: window.devicePixelRatio || 1,
});

const graphics = new PIXI.Graphics();
graphics.beginFill(0xffff00);
const points = [100, 100, 150, 50, 200, 100];
graphics.drawPolygon(points);
graphics.endFill();
graphics.position.set(100,100);
app.stage.addChild(graphics);

document.body.appendChild(app.view as any);

  1. 绘制贝塞尔曲线
  • 使用 bezierCurveTo 方法可以绘制贝塞尔曲线。需要指定控制点和终点:
import * as PIXI from 'pixi.js';

const app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    background:0x1099bb,
    resolution: window.devicePixelRatio || 1,
});

const graphics = new PIXI.Graphics();
graphics.lineStyle(2,0xff00ff);
graphics.moveTo(400, 200);
graphics.bezierCurveTo(450, 100, 500, 300, 600, 200);
graphics.position.set(100,100);
app.stage.addChild(graphics);

document.body.appendChild(app.view as any);

  1. 设置透明度和线条样式
import * as PIXI from 'pixi.js';

const app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    background:0x1099bb,
    resolution: window.devicePixelRatio || 1,
});

const graphics = new PIXI.Graphics();
graphics.beginFill(0x0000ff,0.5);
graphics.drawRect(150, 150, 100, 100);
graphics.endFill();
graphics.position.set(100,100);
app.stage.addChild(graphics);

document.body.appendChild(app.view as any);

添加精灵

  • 精灵是 PixiJS 中最基本的图形对象,用于显示纹理。你可以从本地文件或网络加载图像。
import * as PIXI from 'pixi.js';

const app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    background:0x1099bb,
    resolution: window.devicePixelRatio || 1,
});

const graphics = new PIXI.Graphics();
graphics.beginFill(0x0000ff,0.5);
graphics.drawRect(150, 150, 100, 100);
graphics.endFill();
graphics.position.set(100,100);
app.stage.addChild(graphics);

// 创建纹理
const texture = PIXI.Texture.from('./vite.svg');
// 创建精灵
const sprite = new PIXI.Sprite(texture);
//  设置精灵位置
sprite.x = app.screen.width / 2;
sprite.y = app.screen.height / 2;

app.stage.addChild(sprite);

// 添加动画
app.ticker.add((delta) => {
    sprite.rotation += 0.01 * delta;
})


document.body.appendChild(app.view as any);

添加交互事件

  • PixiJS 允许你为精灵和图形添加交互事件,如点击、拖拽等。
import * as PIXI from 'pixi.js';

const app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    background:0x1099bb,
    resolution: window.devicePixelRatio || 1,
});

const graphics = new PIXI.Graphics();
graphics.beginFill(0x0000ff,0.5);
graphics.drawRect(150, 150, 100, 100);
graphics.endFill();
graphics.position.set(100,100);
app.stage.addChild(graphics);

// 创建纹理
const texture = PIXI.Texture.from('./vite.svg');
// 创建精灵
const sprite = new PIXI.Sprite(texture);
//  设置精灵位置
sprite.x = app.screen.width / 2;
sprite.y = app.screen.height / 2;
// 交互事件
//-----------------------------
sprite.interactive = true; // 使精灵可交互
sprite.on("click", () => {
  console.log("click");
});


app.stage.addChild(sprite);

// 添加动画
app.ticker.add((delta) => {
    sprite.rotation += 0.01 * delta;
})


document.body.appendChild(app.view as any);

加载纹理和资源

  • PixiJS 提供了资源加载器,可以加载多个图像和纹理。
import * as PIXI from 'pixi.js';

const app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    background: 0x1099bb,
    resolution: window.devicePixelRatio || 1,
});

const graphics = new PIXI.Graphics();
graphics.beginFill(0x0000ff, 0.5);
graphics.drawRect(150, 150, 100, 100);
graphics.endFill();
graphics.position.set(100, 100);
app.stage.addChild(graphics);

// 资源管理
PIXI.Assets.add("vite", "./textuer/vite.svg");

const texturePromise = PIXI.Assets.load(['vite']);
texturePromise.then((textures) => {
    const sprite = new PIXI.Sprite(textures.vite);
    sprite.x = app.screen.width / 2;
    sprite.y = app.screen.height / 2;

    sprite.anchor.set(0.5);

    sprite.scale.set(1.5);
    app.stage.addChild(sprite);

})


document.body.appendChild(app.view as any);

添加字体

  • PixiJS 使用 Text 来创建字体样式。
import * as PIXI from "pixi.js";

const app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  background: 0x1099bb,
  resolution: window.devicePixelRatio || 1,
});

const text = new PIXI.Text("hello world", {
  fontFamily: "Arial",
  fontSize: 80,
  fill: 0xff000,
  align: "center",
});

text.x = app.screen.width / 2 - 80;
text.y = app.screen.height / 2 - 80;

app.stage.addChild(text);


document.body.appendChild(app.view as any);

使用滤镜和效果

  • 你可以为精灵和图形应用多种视觉效果,如模糊、颜色调整等。
import * as PIXI from "pixi.js";

const app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  background: 0x1099bb,
  resolution: window.devicePixelRatio || 1,
});


// 创建纹理
const texture = PIXI.Texture.from("./texture/vite.svg");
// 创建精灵
const sprite = new PIXI.Sprite(texture);
//  设置精灵位置
sprite.x = app.screen.width / 2;
sprite.y = app.screen.height / 2;

app.stage.addChild(sprite);

// 添加动画
app.ticker.add((delta) => {
  sprite.rotation += 0.01 * delta;
});

const blurFilter = new PIXI.BlurFilter();
blurFilter.blur = 2;
sprite.filters = [blurFilter];


sprite.interactive = true;
sprite.on('pointerover',() => {
    blurFilter.blur = 0;
});

sprite.on('pointerout',() => {
    blurFilter.blur = 2.0;
})

document.body.appendChild(app.view as any);

粒子系统

  • 粒子系统是创建烟雾、火焰、雨雪等视觉效果的重要工具。PixiJS 提供了 PIXI.ParticleContainer 和 PIXI.particles.ParticleContainer 来高效处理大量粒子。
  1. 安装 PixiJS 的粒子系统模块:
npm install @pixi/particles
  1. 然后,可以创建一个简单的粒子系统:
import * as PIXI from 'pixi.js';
import { Emitter } from '@pixi/particle-emitter';

// 创建一个PixiJS应用
const app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  background: 0x1099bb,
  resolution: window.devicePixelRatio || 1,
});


// 创建一个容器来放置粒子发射器
const container = new PIXI.Container();
app.stage.addChild(container);

// 粒子发射器的配置
const config = {
  lifetime: { min: 0.5, max: 0.5 },
  frequency: 0.008,
  spawnChance: 1,
  particlesPerWave: 1,
  emitterLifetime: 0.31,
  maxParticles: 1000,
  pos: { x: 0, y: 0 },
  addAtBack: false,
  behaviors: [
    {
      type: 'alpha',
      config: {
        alpha: {
          list: [
            { value: 0.8, time: 0 },
            { value: 0, time: 1 }
          ]
        }
      }
    }
  ]
};

// 创建粒子发射器
const emitter = new Emitter(container, config);

// 启动粒子发射器
emitter.emit = true;

// 更新粒子发射器
app.ticker.add(() => {
  emitter.update(app.ticker.deltaTime * 0.001);
});

document.body.appendChild(app.view as any);

物理引擎集成

  • 在游戏开发中,物理引擎用于处理碰撞、重力和其他物理效果。常用的物理引擎有 Matter.js 和 Box2D。下面以 Matter.js 为例。
  1. 安装 Matter.js:
npm install matter-js
  1. 然后,集成到 PixiJS 应用中:
import * as PIXI from 'pixi.js';
import Matter from 'matter-js';

// 创建一个PixiJS应用
const app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  background: 0x1099bb,
  resolution: window.devicePixelRatio || 1,
});

 
// 创建 Matter.js 引擎
const engine = Matter.Engine.create();
const world = engine.world;

// 创建地面
const ground = Matter.Bodies.rectangle(400, 580, 810, 60, { isStatic: true });
Matter.World.add(world, [ground]);

// 创建可移动的物体
const box = Matter.Bodies.rectangle(400, 200, 80, 80);
Matter.World.add(world, [box]);

const texture = PIXI.Texture.from("./texture/vite.svg");
// 创建精灵
const sprite = new PIXI.Sprite(texture);
//  设置精灵位置
sprite.x = app.screen.width / 2;
sprite.y = app.screen.height / 2;
app.stage.addChild(sprite);


app.ticker.add(() => {
    Matter.Engine.update(engine); // 更新物理引擎

    // 更新 PixiJS 中的图形位置
    sprite.x = box.position.x;
    sprite.y = box.position.y;
    sprite.rotation = box.angle;
});

Matter.Events.on(engine, 'collisionStart', (event) => {
  const pairs = event.pairs;
  pairs.forEach(pair => {
      console.log('Collision detected between', pair.bodyA, 'and', pair.bodyB);
  });
});


document.body.appendChild(app.view as any);

联系我们

  1. 关注我们
  1. 联系作者

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2184171.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

《NoSQL》非关系型数据库MongoDB 学习笔记!

Mongo基础&#xff1a; 使用数据库&#xff1a; 使用use 命令 后面跟着要使用的数据库名字即可&#xff0c; 例如&#xff1a;use cities, 值得注意的是&#xff0c; mongo中不像mysql&#xff0c; 还需要先创建数据库&#xff0c;后访问&#xff0c; mongo中&#xff0c;你无…

媒介坊:在数字化时代,企业如何在竞争激烈的市场中脱颖而出

在当今的数字化时代&#xff0c;企业如何在竞争激烈的市场中脱颖而出&#xff0c;成为消费者关注的焦点&#xff1f;软文投放作为一种高效的营销手段&#xff0c;正受到越来越多企业的青睐。而媒介坊&#xff0c;作为一站式软文投放平台&#xff0c;正是帮助企业实现这一目标的…

Android Camera2 与 Camera API技术探究和RAW数据采集

Android Camera2 Android Camera2 是 Android 系统中用于相机操作的一套高级应用程序接口&#xff08;API&#xff09;&#xff0c;它取代了之前的 Camera API。以下是关于 Android Camera2 的一些主要信息&#xff1a; 主要特点&#xff1a; 强大的控制能力&#xff1a;提供…

JavaWeb——Vue组件库Element(4/6):案例:基本页面布局(基本框架、页面布局、CSS样式、完善布局、效果展示,含完整代码)

目录 步骤 基本页面布局 基本框架 页面布局 CSS样式 完善布局 效果展示 完整代码 Element 的基本使用方式以及常见的组件已经了解完了&#xff0c;接下来要完成一个案例&#xff0c;通过这个案例让大家知道如何基于 Element 中的各个组件制作一个完整的页面。 案例&am…

Labview helper

IMAQ Advanced Setup Learn Geometric Pattern 2 VI 参数说明Curve Extraction Mode (0)指定VI如何识别图像中的曲线。如果您希望VI不对图像中对象的均匀性或图像背景做出任何假设&#xff0c;请将此选项设置为正常。如果您希望VI假定图像中的对象或图像背景由均匀的像素值组成…

PCL 最远点采样(FPS)

目录 一、概述 1.1原理 1.2实现步骤 1.3应用场景 二、代码实现 2.1关键函数 2.1.1 可视化函数 2.1.2 最远点采样 2.2完整代码 三、实现效果 PCL点云算法汇总及实战案例汇总的目录地址链接&#xff1a; PCL点云算法与项目实战案例汇总&#xff08;长期更新&#xff0…

事务原理,以及MVCC如何实现RC,RR隔离级别的

事务原理 redo log 保持持久性&#xff1a; 首先原来的情况是我们做一组操作的时候&#xff0c;先去操作bufferpool缓冲区&#xff0c;如果没有&#xff0c;那么后台线程将数据页换入换出到缓冲区&#xff0c;然后我们对这个buffer pool进行修改&#xff0c;为脏页&#xff0c…

Redis篇(Redis原理 - 数据结构)(持续更新迭代)

目录 一、动态字符串 二、intset 三、Dict 1. 简介 2. Dict的扩容 3. Dict的rehash 4. 知识小结 四、ZipList 1. 简介 2. ZipListEntry 3. Encoding编码 五、ZipList的连锁更新问题 六、QuickList 七、SkipList 八、RedisObject 1. 什么是 redisObject 2. Redi…

开放式耳机哪个品牌好?2024年蓝牙耳机排行榜

开放式蓝牙耳机以其独树一帜的佩戴方式&#xff0c;正逐渐成为音乐爱好者和运动达人的新宠。时尚而又实用。如果你对传统耳机的佩戴方式感到厌倦&#xff0c;或者在寻找一款既能提供高品质音乐体验又能兼顾佩戴舒适性的耳机&#xff0c;那么开放式蓝牙耳机可能会是你的理想选择…

Vue3轻松实现前端打印功能

文章目录 1.前言2.安装配置2.1 下载安装2.2 main.js 全局配置3.综合案例3.1 设置打印区域3.2 绑定打印事件3.3 完整代码4.避坑4.1 打印表格无边框4.2 单选框复选框打印不选中4.3 去除页脚页眉4.4 打印內容不自动换行1.前言 vue3 前端打印功能主要通过插件来实现。 市面上常用的…

【CKA】八、扩容Deployment

8、扩容Deployment 1. 考题内容&#xff1a; 2. 答题思路&#xff1a; 直接使用命令扩容就行 我考的题只是把 loadbalancer 名字换了 &#xff0c;其他都一模一样 3. 官网地址&#xff1a; https://kubernetes.io/zh-cn/docs/concepts/workloads/controllers/deployment/ …

Golang | Leetcode Golang题解之第451题根据字符出现频率排序

题目&#xff1a; 题解&#xff1a; func frequencySort(s string) string {cnt : map[byte]int{}maxFreq : 0for i : range s {cnt[s[i]]maxFreq max(maxFreq, cnt[s[i]])}buckets : make([][]byte, maxFreq1)for ch, c : range cnt {buckets[c] append(buckets[c], ch)}an…

【AI大模型】深入Transformer架构:编码器部分的实现与解析(上)

目录 &#x1f354; 编码器介绍 &#x1f354; 掩码张量 2.1 掩码张量介绍 2.2 掩码张量的作用 2.3 生成掩码张量的代码分析 2.4 掩码张量的可视化 2.5 掩码张量总结 &#x1f354; 注意力机制 3.1 注意力计算规则的代码分析 3.2 带有mask的输入参数&#xff1a; 3.…

华为开源自研AI框架昇思MindSpore应用案例:计算高效的卷积模型ShuffleNet

如果你对MindSpore感兴趣&#xff0c;可以关注昇思MindSpore社区 ShuffleNet ShuffleNet网络介绍 ShuffleNetV1是旷视科技提出的一种计算高效的CNN模型&#xff0c;和MobileNet, SqueezeNet等一样主要应用在移动端&#xff0c;所以模型的设计目标就是利用有限的计算资源来达到…

文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《基于节点碳势响应的新型电力系统鲁棒优化调度 》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

生信初学者教程(二十二):Boruta+RF筛选候选标记物

文章目录 介绍加载R包导入数据准备数据机器学习特征筛选数据分割基础模型Boruta特征筛选调参最终分类模型测试集验证标记基因输出结果总结介绍 采用了Boruta结合 RF(Random Forest) 的方法,对差异基因(参考 @sec-different-limma) 进行了特征筛选。通过这种方法,能够从大…

你以为瀑布流布局很复杂?Vue-Waterfall让你秒变前端高手

你以为瀑布流布局很复杂&#xff1f;Vue-Waterfall让你秒变前端高手 Vue-Waterfall 是一个轻量级的 Vue.js 组件&#xff0c;专为实现灵活的瀑布流布局设计。如果你需要在页面上呈现动态、响应式的布局&#xff0c;那这个组件绝对能帮到你&#xff01;本文将带你快速了解这个组…

推荐 uniapp 相对好用的海报生成插件

插件地址&#xff1a;自定义canvas样式海报 - DCloud 插件市场 兼容性也是不错的&#xff1a;

微软准备了 Windows 11 24H2 ISO “OOBE/BypassNRO“命令依然可用

Windows 11 24H2 可能在未来几周内开始推出。 微软已经要求 OEM 遵循新的指南准备好 Windows 11 24H2 就绪的驱动程序&#xff0c;并且现在已经开始准备媒体文件 (.ISO)。 OEM ISO 的链接已在微软服务器上发布。 一个标有"X23-81971_26100.1742.240906-0331.ge_release_sv…

[Python学习日记-35] Python 中的内置函数(上)

[Python学习日记-35] Python 中的内置函数&#xff08;上&#xff09; 简介 内置函数详解&#xff08;A-E&#xff09; 简介 在 Python 中有很多内置函数&#xff0c;例如 len()&#xff0c;这些函数是 Python 解释器自带的&#xff0c;可以直接使用。本篇将介绍 A-H 的内置函…