Pixi.js 基本图形绘制

绘制矩形

import * as PIXI from "pixi.js"

// 创建应用
const app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundColor: 0x1099bb,
  resolution: window.devicePixelRatio || 1, // 像素比
})

document.documentElement.appendChild(app.view as any)

// 绘制矩形
const rectangle = new PIXI.Graphics()
rectangle.beginFill(0x66ccff) // 填充颜色
rectangle.drawRect(200, 100, 164, 64) // 绘制矩形
rectangle.endFill() // 结束填充

// 将矩形添加到舞台
app.stage.addChild(rectangle)

图形的样式

import * as PIXI from "pixi.js"

// 创建应用
const app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundColor: 0x1099bb,
  resolution: window.devicePixelRatio || 1, // 像素比
  antialias: true, // 抗锯齿
})

document.documentElement.appendChild(app.view as any)

// 绘制矩形
const rectangle = new PIXI.Graphics()
rectangle.beginFill(0x66ccff, 0.8) // 填充颜色
rectangle.lineStyle(4, 0xff0000, 1) // 边框样式，线宽 颜色 透明度, 绘制之前设置
rectangle.drawRect(200, 100, 164, 64) // 绘制矩形
rectangle.endFill() // 结束填充

rectangle.scale.set(2, 2) // 缩放
rectangle.position.set(300, 150) // 位移，相对于左上角
rectangle.rotation = 0.5 // 旋转，相对于左上角
rectangle.pivot.set(300, 120) // 锚点，如旋转，位移的基点，x y 也是从左上角开始计算

// 将矩形添加到舞台
app.stage.addChild(rectangle)