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, // 像素比
  antialias: true, // 抗锯齿
})

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

// 创建圆角矩形
const roundedRectangle = new PIXI.Graphics()
roundedRectangle.beginFill(0x66ccff, 0.9)

// 绘制圆角矩形 x y 宽 高 圆角半径
roundedRectangle.drawRoundedRect(0, 0, 160, 54, 10)
roundedRectangle.endFill()
roundedRectangle.position.set(100, 300)
app.stage.addChild(roundedRectangle)

绘制椭圆

// 绘制椭圆
const ellipse = new PIXI.Graphics()
ellipse.beginFill(0xffccff, 0.9)

// 绘制椭圆 x y 长半径 短半径
ellipse.drawEllipse(0, 0, 160, 54)
ellipse.endFill()
ellipse.position.set(400, 500)
app.stage.addChild(ellipse)

绘制多边形

// 绘制多边形
const polygon = new PIXI.Graphics()
polygon.beginFill(0xccccef, 0.9)

// 绘制多边形，数组每两项为 x y
polygon.drawPolygon([0, 0, 300, 354, 300, 0])
polygon.endFill()
polygon.position.set(500, 200)
app.stage.addChild(polygon)

绘制圆弧

// 绘制圆弧
const arc = new PIXI.Graphics()
arc.beginFill(0x00ffcc, 0.9)
arc.arc(150, 100, 100, 0, Math.PI, false)

arc.endFill()

app.stage.addChild(arc)

绘制线段

const line = new PIXI.Graphics()
line.lineStyle(2, 0x00ffef, 0.9)
line.moveTo(300, 300)
line.lineTo(400, 300)
line.lineTo(500, 190)
app.stage.addChild(line)