Pixijs 绘制基本图形

采用的是Pixi的Graphics来绘制。

0.基本结构

let app = new PIXI.Application({
  width:1334, 
  height:750
});
 document.body.appendChild(app.view);
 
 //几何图形
const borderline = new PIXI.Graphics();
borderline.lineStyle(2,0xaaaaaa,0.5)//边线(宽度，颜色，透明度)
borderline.beginFill(0xffffff)//填充
复制代码

1.绘制矩形drawRect

语法:drawRect(x,y,width,height)

//矩形
borderline.drawRect(100,100,200,300);//x,y,w,h
borderline.endFill();
app.stage.addChild(borderline);//添加到舞台中
复制代码

2.绘制圆角矩形drawRoundedRect

惟一跟矩形不一样的代码以下：
borderline.drawRoundedRect(100,100,200,300,15);//x,y,w,h,圆角度数
复制代码

3.绘制圆drawCircle

惟一跟矩形不一样的代码以下：
borderline.drawCircle(100,100,50);//x,y,半径
复制代码

4.绘制椭圆drawEllipse

惟一跟矩形不一样的代码以下：
 borderline.drawEllipse(100,100,50,100);//x,y,w、h
复制代码

5.绘制线段MoveTo/lineTo

惟一跟矩形不一样的代码以下：
 borderline.moveTo(100,100);//x,y 开始
 borderline.lineTo(100,200);//x,y 结束
复制代码

6.绘制多边形 drawPolygon

惟一跟矩形不一样的代码以下：
 const path =[
          100,100,
          200,200,
          100,300
      ]
      borderline.drawPolygon(path)
复制代码

注意事项

• 颜色值采用16进制，例如：0xffffff