Skip to content
本页目录

PixiJs 绘制图形

绘制椭圆

js
const ellipse = new PIXI.Graphics()
ellipse.beginFill(0x66ccff)
ellipse.drawEllipse(0, 0, 164, 64)
ellipse.endFill()
ellipse.position.set(300, 200)
app.stage.addChild(ellipse)

绘制多边形

js
const polygon = new PIXI.Graphics()
polygon.beginFill(0x660000)
// 参数一个数组,数组中的每一个元素是一个点的坐标,每两个元素是一个点的x坐标和y坐标
polygon.drawPolygon([0, 0, 100, 0, 100, 100, 0, 100])
polygon.endFill()
polygon.position.set(600, 200)
app.stage.addChild(polygon)

创建圆角矩形

js
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)

绘制圆弧

js
const arc = new PIXI.Graphics()
arc.beginFill(0x660000)
// arc(x坐标,y坐标,半径,其实角度,结束角度,顺/逆时针)
arc.arc(0, 0, 32, 0, Math.PI, false)
arc.endFill()
arc.position.set(300, 400)
app.stage.addChild(arc)

绘制线段

js
const line = new PIXI.Graphics()
line.lineStyle(10, 0x660000, 0.6) // 宽度,颜色,透明度
line.moveTo(0, 0)
line.lineTo(100, 100)
line.lineTo(200, 50)
line.endFill()
line.position.set(500, 400)
app.stage.addChild(line)

lemon's personal blog.