pixijs基础学习

最新推荐文章于 2025-09-25 14:45:57 发布

原创最新推荐文章于 2025-09-25 14:45:57 发布 · 294 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #pixijs

用的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);
})();