Fade away

Appearance

六、Pixi ​

1.介绍 ​

PixiJS 是一个开源的、基于 Web 的渲染系统，可为游戏、数据可视化和其他图形密集型项目提供超快的性能。这些指南旨在作为 API 文档的配套内容，提供有关使用 API 解决问题和构建项目的结构化介绍。

简而言之，Pixi是一个基于canvas封装的2D渲染引擎

2.安装 ​

2.1 浏览器环境 ​

引入cdn

html
<script src="https://pixijs.download/v6.5.10/pixi.min.js"></script>

或下载别的版本：Releases · pixijs/pixijs (github.com)

2.2 node环境 ​

bash
npm install pixi.js

使用时需导出

js
import * as PIXI from 'pixi.js'

如果导入成功，控制台会打印如下内容

image-20230708090141658

3.使用 ​

3.1 创建PIXI应用 ​

PIXI应用：需要实例化一个PIXI.Application()对象，往后的各种操作都依靠这个实力话对象

  • 传入一个对象形式的实参，用来初始化
js
//创建一个pixi应用对象
let app = new PIXI.Application({width: 256, height: 256});

舞台：PIXI.Application()实例对象中有一个stage对象，叫做舞台，可以看作是一个容器，以后创建的各种要渲染的对象都需要放在舞台上才能被显示出来

js
const stage=app.stage

画布：画布就是一个渲染区域，把画布添加进DOM后，就会创建一个canvas标签，画布对象会默认选择WebGL引擎渲染模式。

js
document.body.appendChild(app.view);

image-20230708090331368

以上代码意为：在HTML DOM中创建了背景颜色为黑色（默认颜色）的一个宽为256,高为256的canvas元素(单位默认是像素)

3.2 属性 ​

我们可以在创建舞台时传入以下属性

js
let app = new PIXI.Application({ 
    width: 256,         //default:800
    height: 256,        //default:600
    antialias: true,    //default:false
    transparent: false, //default:false
    resolution: 1       //default:1
});

以下是各参数说明

属性数据类型默认值描述
widthnumber800canvas元素的宽度
heightnumber600canvas元素的高度
antialiasbooleanfalse抗锯齿
transparentbooleanfalse背景是否透明
resolutionnumber1设置像素比，分辨率
forceCanvasbooleanfalse是否强制使用canvas渲染模式，默认是哟个WebGL
backgroundColorstring0x000000修改canvas画布的背景颜色，格式为16进制
（"0X"加上"0"~"f"之间的任意6个字符组成的8位字符。）
autoResizebooleanfalse设置canvas自动调整尺寸

当我们创建好舞台后，想要单独改变元素的属性，可通过以下方式

获取或设置canvas宽高

js
// 获取
console.log(app.renderer.view.width)
console.log(app.renderer.view.height)

// 设置
app.renderer.view.width=1000
app.renderer.view.height=800

// 以下方法也可以获取，但不能设置
console.log(app.renderer.width)
console.log(app.renderer.height)

设置颜色

js
app.renderer.backgroundColor = 0x061639;

设置画布大小

js
app.renderer.autoResize = true;
app.renderer.resize(512, 512);//第一个512代表宽度，第二个512代表高度

如果有需要 console.log(app.renderer.view.style) 可以看到view.style有哪些属性

js
app.renderer.view.style.position = "absolute";
app.renderer.view.style.display = "block";

4.绘制几何图形 ​

需要实例化一个PIXI.Graphics()对象，从而实现几何图形的绘制

js
let g = new PIXI.Graphics();

4.1 基本样式 ​

4.1.1 开始绘制 ​

通过beginFill(color)，传入一个16进制的颜色代码值可添加颜色

  • 也就是将css16进制颜色的#333333变成了0x333333
js
g.beginFill(0x66CCFF)

4.1.2 绘制边框 ​

通过lineStyle(width,color,alpha)

  • width：边框宽度，数字形式
  • color：边框颜色，十六进制颜色代码
  • alpha：边框透明度，0-1
js
g.lineStyle(4, 0xFF3300, 1);

4.1.2 结束绘制 ​

通过endFill()，就像canvas api的closePath()

以下是一个完整的几何图形绘制

js
g.endFill();

4.1.3 添加至舞台 ​

绘制完图形后，需要添加到舞台才能显示出来

js
app.stage.addChild(g);

以下是一个完整的绘制步骤

js
let g = new PIXI.Graphics();
g.beginFill(0x66CCFF);
g.lineStyle(4, 0xFF3300, 0.5);
g.drawRect(100,100,100,100);
g.endFill()
app.stage.addChild(g);

image-20230708103012110

4.2 绘制矩形 ​

语法：

js
let g = new PIXI.Graphics();

g.drawRect(x,y,width,height)

参数：

  • x：水平座标，相对于画布左上角
  • y：垂直坐标，相对于画布左上角
  • width：矩形宽度
  • height：矩形高度

例子：

js
let g = new PIXI.Graphics();
g.beginFill(0x666666);
g.drawRect(100,100,100,100);
g.endFill()
app.stage.addChild(g);

image-20230708103055636

4.3 绘制圆形 ​

语法：

js
let g = new PIXI.Graphics();

g.drawCircle(x, y, radius)

参数：

  • x：水平座标，相对于画布左上角
  • y：垂直坐标，相对于画布左上角
  • radius：圆的半径

例子：

js
let g = new PIXI.Graphics();
g.beginFill(0x7611FA);
g.drawCircle(100,100,50);
g.endFill()
app.stage.addChild(g);

image-20230708103512715

除此之外，canvas api中的arc和arcTo也同样适用

js
let g = new PIXI.Graphics();

g.beginFill(0x7611fa);
g.arc(100, 100, 50, 0, Math.PI, true);
g.endFill();

g.moveTo(200, 100);
g.lineStyle(4,0x333333)
g.arcTo(300, 100, 300, 200, 100);

app.stage.addChild(g);

image-20230708111243276

4.4 绘制椭圆 ​

语法：

js
let g = new PIXI.Graphics();

g.drawEllipse(x, y, width, height);

参数：

  • x：水平座标，相对于画布左上角
  • y：垂直坐标，相对于画布左上角
  • width：椭圆长半径
  • height：椭圆短半径

例子：

js
let g = new PIXI.Graphics();
g.beginFill(0x7611FA);
g.drawEllipse(100,100, 50, 20);
g.endFill()
app.stage.addChild(g);

image-20230708103648063

4.5 圆角矩形 ​

语法：

js
let g = new PIXI.Graphics();

g.drawRoundedRect(x, y, width, height, cornerRadius)

参数：

  • x：水平座标，相对于画布左上角
  • y：垂直坐标，相对于画布左上角
  • width：矩形宽度
  • height：矩形高度
  • cornerRadius：圆角值

例子：

js
let g = new PIXI.Graphics();
g.beginFill(0x7611FA);
g.drawRoundedRect(100, 100, 84, 36, 10);
g.endFill()
app.stage.addChild(g);

image-20230708103941002

4.6 绘制线段 ​

语法：通过moveTo()以及lineTo()绘制线段

  • 需要使用lineStyle()给线段添加样式
js
let g = new PIXI.Graphics();

g.lineStyle(4, 0xFFFFFF, 1);
g.moveTo(0, 0);
g.lineTo(80, 50);

app.stage.addChild(line);

参数：

  • x：水平座标，相对于画布左上角
  • y：垂直坐标，相对于画布左上角
  • width：矩形宽度
  • height：矩形高度
  • cornerRadius：圆角值

例子：

js
let g = new PIXI.Graphics();
g.lineStyle(4, 0xffffff, 1);
g.moveTo(10,10);
g.lineTo(100,100);
app.stage.addChild(g);

image-20230708104328445

4.7 绘制多边形 ​

语法：通过drawPolygon()

js
let g = new PIXI.Graphics();
g.beginFill(0x7611FA);
g.drawPolygon(
    [
        point1X, point1Y,
        point2X, point2Y,
        point3X, point3Y,
        // ...
    ]
);
g.endFill()
app.stage.addChild(line);

参数：参数为一个数组，数组中每两个值即一个点

例子：

js
let g = new PIXI.Graphics();
g.beginFill(0x7611fa);
g.drawPolygon([-32, 64, 32, 64, 0, 0]);
g.endFill();
app.stage.addChild(g);

image-20230708104904983

4.8 清除图形 ​

语法：

js
graphics.clear()

5.绘制文本 ​

需要实例化一个PIXI.Text()对象，从而实现文本的绘制

语法：

js
const t = new PIXI.Text(text, style);

app.stage.addChild(t);

参数：

  • text：需要渲染的文本
  • style：文本的样式，需要实例化一个PIXI.TextStyle()对象，并传入一个对象，

例子：

js
let style = new PIXI.TextStyle({
    fontFamily: "Arial",
    fontSize: 36,
    fill: "white",
    stroke: '#ff3300',
    strokeThickness: 4,
    dropShadow: true,
    dropShadowColor: "#000000",
    dropShadowBlur: 4,
    dropShadowAngle: Math.PI / 6,
    dropShadowDistance: 6,
});

const t = new PIXI.Text('666666', style);
app.stage.addChild(t);

image-20230708173418823

在创建好文本对象之后，我们也可以通过text属性修改文本内容，

js
t.text='你好'

image-20230708173557709

通过style属性修改样式，不过这样会重置之前设置的样式

js
t.style = {
    fontSize: 50,
    fill:'red'
};

​

精灵即

sprite对象渲染页面中已加载的所有纹理对象的基础

MIT Licensed

Copyright © 2024-present xarzhi