pixi的基本图形绘制

pixi的基本图形绘制

舞台的创建以及基本样式如下

const app = new PIXI.Application({
  width:window.innerWidth,
  height:window.innerHeight,
  backgroundColor:0x1099bb,
  resolution:window.devicePixelRatio ||1,
  antialias:true, //抗锯齿
});
document.body.appendChild(app.view);

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
canvas{
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

1.矩形

// 创建矩形
const rectangle = new PIXI.Graphics();
// 设置边框样式 线宽、颜色、透明度
rectangle.lineStyle(4,0xff0000,1)
// benginFill(color,alpha)
rectangle.beginFill(0x66ccff,0.9);
// drawRect(x,y,width,height)
rectangle.drawRect(0,0,164,64);

// 图形的缩放
// rectangle.scale.set(2,2)
// 图形的位移
rectangle.position.set(100,100)
// 图形的旋转
// rectangle.rotation = 0.5
// 图形的锚点
// rectangle.pivot.set(82,32)

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

2.圆形

const circle = new PIXI.Graphics()
circle.beginFill(0x66ccff, 0.9)
circle.drawCircle(0,0,32)
circle.endFill()
circle.position.set(300,300)
app.stage.addChild(circle)

3.圆角矩形

const roundedRectangle = new PIXI.Graphics()
roundedRectangle.beginFill(0x66ccff, 0.9)
// x,y,width,height,angle
roundedRectangle.drawRoundedRect(0,0,164,64,10)
roundedRectangle.endFill()
roundedRectangle.position.set(500,500)
app.stage.addChild(roundedRectangle)

4.椭圆

const ellipse = new PIXI.Graphics()
ellipse.beginFill(0x66ccff, 0.9)
// x,y,width,height 
ellipse.drawEllipse(0,0,164,64)
ellipse.endFill()
ellipse.position.set(1000,500)
app.stage.addChild(ellipse)

5.多边形

const polygon = new PIXI.Graphics()
polygon.beginFill(0x660000,0.9)
// [x0,y0,x1,y1...]
polygon.drawPolygon([0,0,100,0,100,100,0,100])
polygon.endFill()
polygon.position.set(500,300)
app.stage.addChild(polygon)

6.圆弧

const arc = new PIXI.Graphics()
arc.beginFill(0x660000,0.9)
//x,y,r,startAngle,endAngle,是否逆时针
arc.arc(0,0,32,0,Math.PI/2,false)
arc.endFill()
arc.position.set(300,50)
app.stage.addChild(arc)

7.线段

const line = new PIXI.Graphics()
line.lineStyle(4, 0xff0000, 1)
// 起始点
line.moveTo(0,0)
// 结束点或途经点
line.lineTo(100,100)
line.lineTo(200,0)
line.position.set(500,50)
app.stage.addChild(line)

全部代码

<template>
  <div>

  </div>
</template>

<script setup>
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.body.appendChild(app.view);

// 创建矩形
const rectangle = new PIXI.Graphics();
// 设置边框样式 线宽、颜色、透明度
rectangle.lineStyle(4,0xff0000,1)
// benginFill(color,alpha)
rectangle.beginFill(0x66ccff,0.9);
// drawRect(x,y,width,height)
rectangle.drawRect(0,0,164,64);

// 图形的缩放
// rectangle.scale.set(2,2)
// 图形的位移
rectangle.position.set(100,100)
// 图形的旋转
// rectangle.rotation = 0.5
// 图形的锚点
// rectangle.pivot.set(82,32)

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

// 创建一个圆形
const circle = new PIXI.Graphics()
circle.beginFill(0x66ccff, 0.9)
circle.drawCircle(0,0,32)
circle.endFill()
circle.position.set(300,300)
app.stage.addChild(circle)

// 创建一个圆角矩形
const roundedRectangle = new PIXI.Graphics()
roundedRectangle.beginFill(0x66ccff, 0.9)
// x,y,width,height,angle
roundedRectangle.drawRoundedRect(0,0,164,64,10)
roundedRectangle.endFill()
roundedRectangle.position.set(500,500)
app.stage.addChild(roundedRectangle)

// 创建一个椭圆
const ellipse = new PIXI.Graphics()
ellipse.beginFill(0x66ccff, 0.9)
// x,y,width,height 
ellipse.drawEllipse(0,0,164,64)
ellipse.endFill()
ellipse.position.set(1000,500)
app.stage.addChild(ellipse)

// 绘制多边形
const polygon = new PIXI.Graphics()
polygon.beginFill(0x660000,0.9)
// [x0,y0,x1,y1...]
polygon.drawPolygon([0,0,100,0,100,100,0,100])
polygon.endFill()
polygon.position.set(500,300)
app.stage.addChild(polygon)

// 绘制圆弧
const arc = new PIXI.Graphics()
arc.beginFill(0x660000,0.9)
//x,y,r,startAngle,endAngle,是否逆时针
arc.arc(0,0,32,0,Math.PI/2,false)
arc.endFill()
arc.position.set(300,50)
app.stage.addChild(arc)

// 绘制线段
const line = new PIXI.Graphics()
line.lineStyle(4, 0xff0000, 1)
// 起始点
line.moveTo(0,0)
// 结束点或途经点
line.lineTo(100,100)
line.lineTo(200,0)
line.position.set(500,50)
app.stage.addChild(line)

</script>

<style>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
canvas{
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}
</style>