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

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

亦世凡华、

3743人浏览 · 2024-07-16 16:49:46

亦世凡华、 · 2024-07-16 16:49:46 发布

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,y
    graphics.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 / 2
        sprite.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 = true
        sprite.on('pointerdown', () => {
            console.log("点击了精灵")
        })
        // 添加精灵到舞台
        container.addChild(sprite)

        // 创建精灵2
        const 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]; // 添加滤镜

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