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

pixijs基础学习

news 2025/8/24 7:45:31

用的8.0版本

一、基础应用

import {Application, Graphics} from "pixi.js";
import { onUnmounted } from "vue";
// 创建一个Application,8.0版本这种写法已弃用
// const app = new Application({
//   width: 800,
//   height: 600,
//   backgroundColor: 0x1099bb,
//   resolution: window.devicePixelRatio || 1,
// });//8.0版本 新写法，创建应用
const app = new Application();
(async () => {await app.init({width: 800,height: 600,backgroundColor: 0x1099bb,resolution: window.devicePixelRatio || 1,  //设备比率});// 将画布加到容器中,app.view在8.0版本已弃用document.body.appendChild(app.canvas);// 创建一个矩形const rect = new Graphics();rect.rect(0,0,64,64); //绘制矩形rect.fill(0xff0000);  //填充颜色rect.x = 100;  //设置矩形的x坐标rect.y = 100;  //设置矩形的y坐标// 添加到舞台app.stage.addChild(rect);
})();
onUnmounted( () =>{app.destroy();
})

二、Graphics具体应用

Graphics类主要用于将原始形状（如线、圆和矩形）呈现到显示器，并对它们进行着色和填充

const app = new Application();
(async () => {await app.init({width: 800,height: 600,backgroundColor: 0x1099bb,resolution: window.devicePixelRatio || 1, //设备比率antialias: true, //抗锯齿});// 将画布加到容器中,app.view在8.0版本已弃用document.body.appendChild(app.canvas);// 创建一个矩形const rect = new Graphics();rect.rect(0, 0, 64, 64); //绘制矩形rect.setStrokeStyle({color: "#ffffff",width: 2,}); //设置边框样式rect.stroke();  //绘制边框,上面是设置样式，这里是绘制边框，必须要有这个方法// rect.fill( 0xff0000,0.5);  //已弃用rect.fill({color: 0xff0000,alpha: 1,}); //填充颜色// rect.x = 100; //单独设置矩形的x坐标// rect.y = 100; //单独设置矩形的y坐标rect.position.set(100, 100)  //同时设置矩形的位置rect.rotation = 45; //旋转45度rect.pivot = new Point(32, 32); //设置旋转中心// 添加到舞台app.stage.addChild(rect);

1.绘制圆形

  const graphics = new Graphics();graphics.circle(100, 100, 50); // 圆心坐标，半径graphics.fill({color: 0xff0000,alpha: 0.5})app.stage.addChild(graphics);

2.绘制圆角矩形

  const graphics = new Graphics();graphics.roundRect(100, 100, 50, 50, 25); // 左上角坐标，宽，高,圆角graphics.fill({color: 0x00ff00,alpha: 0.5,});

3.绘制椭圆

  const graphics = new Graphics();graphics.ellipse(100, 100, 50, 25);  // 圆心坐标，宽，高graphics.fill({color: 0x0000ff,alpha: 0.5,});

4.绘制圆弧

  const graphics = new Graphics();graphics.arc(300, 300, 50, 0, Math.PI * 2,true); // 圆心坐标，半径，起始弧度，结束弧度, 是否是逆时针绘制graphics.fill({color: 0xff0000,alpha: 0.5,});

5.绘制线段

  // 绘制线段const line = new Graphics();line.moveTo(10, 10);  //画笔移动到10，10这个点line.lineTo(100, 100);  //绘制一条线，从当前点到100，100这个点line.stroke({color: 0x0000ff,width: 2,});app.stage.addChild(line);

三、纹理与动画

import { Application,Sprite,Texture,Assets } from "pixi.js";
import { getAssetsFile } from "./utils/tools";
let app = new Application();
(async () => {await app.init({width: 800,height: 600,backgroundColor: 0x1099bb,resolution: window.devicePixelRatio || 1, //设备比率antialias: true, //抗锯齿});document.body.appendChild(app.canvas);let texture1 =   await Assets.load(getAssetsFile("test.png"))  //必须要先用assets.load加载图片，下面的图片才能正常显示，推荐使用这种方式// 获取贴图let texture = Texture.from(getAssetsFile("test.png"));  //但是用了Assets.load加载了图片，这样不纯多此一举了吗// 创建一个精灵let sprite = new Sprite(texture1);  //直接用Assets.load加载的图片// 设置锚点sprite.anchor.set(0.5);// 设置旋转sprite.rotation = Math.PI / 4;// 设置透明度sprite.alpha = 0.5;// 设置位置sprite.x = 100;sprite.y = 100;let sprite2 = new Sprite(texture);// 加入舞台app.stage.addChild(sprite,sprite2);// 实现动画，每一帧都会触发这个函数app.ticker.add(() => {sprite.rotation += 0.01;});
})();

四、事件交互

  // 开始交互事件，必须要有这一行代码，交互事件才会有效sprite.interactive = true;// 添加点击事件sprite.on("click", () => {console.log("点击了");sprite.alpha = sprite.alpha === 1 ? 0.5 : 1;});sprite.on("mouseenter", () => {sprite.alpha = 1;sprite.cursor = "pointer"; //修改鼠标样式});sprite.on("mouseout", () => {sprite.alpha = 0.5;});

五、多个资源加载

import { ref } from "vue";
import { Application, Sprite, Texture, Assets, Container } from "pixi.js";
import { getAssetsFile } from "./utils/tools";
let progress = ref("0");
let app = new Application();
(async () => {await app.init({width: 800,height: 600,backgroundColor: 0x1099bb,resolution: window.devicePixelRatio || 1, //设备比率antialias: true, //抗锯齿});document.body.appendChild(app.canvas);// 加载多个资源Assets.add({alias: "logo",src: getAssetsFile("logo.svg"),});Assets.add({alias: "test",src: getAssetsFile("test.png"),});Assets.add({alias: "animation",src: getAssetsFile("animation.svg"),});let texture = await Assets.load(["logo", "test", "animation"]);// 第二种加载方式,把资源分组了，更清晰明了Assets.addBundle("bundle", [{alias: "logo",src: getAssetsFile("logo.svg"),},{alias: "test",src: getAssetsFile("test.png"),},{alias: "animation",src: getAssetsFile("animation.svg"),},]);let texture2 = await Assets.loadBundle("bundle",(e) =>{// 监听加载进度console.log(e,"加载完成");progress.value = (e * 100).toFixed(0);});// 创建一个精灵let sprite = new Sprite(texture.logo); //直接用Assets.load加载的图片let sprite2 = new Sprite(texture2.test); //直接用Assets.load加载的图片sprite2.x = 100;sprite2.y = 100;let sprite3 = new Sprite(texture.animation); //svg动画在canvas里面无效sprite3.x = 200;sprite3.y = 200;const con = new Container(); //创建一个容器,相当于一个组件了，成为一个整体，便于整体移动，旋转，交互// 开启交互事件con.interactive = true;con.on("click", (e) => {console.log(e, "点击了");});con.addChild(sprite, sprite2, sprite3);app.stage.addChild(con);
})();

六、文字与遮罩

import { ref } from "vue";
import { Application, Text, Assets, Sprite } from "pixi.js";
import { getAssetsFile } from "./utils/tools";
let progress = ref("0");
let app = new Application();
(async () => {await app.init({width: 800,height: 600,backgroundColor: 0x1099bb,resolution: window.devicePixelRatio || 1, //设备比率antialias: true, //抗锯齿});document.body.appendChild(app.canvas);let text = new Text({text: "hello world",style: {fill: "#ffffff",fontSize: 80,},});// 创建渲染纹理const renderTexture = app.renderer.generateTexture(text);const maskSprite = new Sprite(renderTexture);maskSprite.anchor.set(0.5);maskSprite.x = app.screen.width / 2;maskSprite.y = app.screen.height / 2;// 添加图片Assets.add({alias: "bg",src: getAssetsFile("bg.png"),});// 加载图片let texture = await Assets.load("bg");// 创建精灵let bgSprite = new Sprite(texture);bgSprite.width = app.screen.width;bgSprite.height = app.screen.height;// 文字遮罩bgSprite.mask = maskSprite; //mask必须是一个图形或者精灵app.stage.addChild(maskSprite);app.stage.addChild(bgSprite);
})();

七、滤镜

pixijs有个专门的滤镜库pixi-filters,里面有各种滤镜的演示

npm i pixi-filters

import { ref } from "vue";
import { Application, Text, Assets, Sprite, BlurFilter } from "pixi.js";
import { getAssetsFile } from "./utils/tools";
import { OutlineFilter,GlowFilter } from "pixi-filters";
let progress = ref("0");
let app = new Application();
(async () => {await app.init({width: 800,height: 600,backgroundColor: 0x1099bb,resolution: window.devicePixelRatio || 1, //设备比率antialias: true, //抗锯齿});document.body.appendChild(app.canvas);// 添加资源Assets.add({alias: "test",src: getAssetsFile("test.png"),});// 加载资源let texture = await Assets.load("test");let sprite = new Sprite(texture);sprite.anchor.set(0.5);sprite.position.set(100, 100);// // 创建模糊滤镜// let blurFilter = new BlurFilter();// // 设置模糊度// blurFilter.blur = 10;// // 给精灵图添加滤镜// sprite.filters = [blurFilter];// 描边滤镜let outlineFilter = new OutlineFilter({thickness:2,  //描边厚度color: "#ff0000",  //描边颜色quality:0.5,  //清晰度alpha:0.5,  //透明度knockout:true,  //是否只要描边，不要原本的内容});// 发光滤镜let glowFilter = new GlowFilter({distance:20, //发光距离outerStrength:10,  //外发光强度innerStrength:5,  //内发光强度color: "#ffff00",  //颜色quality:0.5,  //清晰度alpha:0.5,  //透明度knockout:false,  //是否只要发光，不要原本的内容});sprite.filters = [outlineFilter,glowFilter];app.stage.addChild(sprite);
})();