PixiJS学习（5）几何图形

简介：

几何图形其实说的简单一点就是在数学上的：点、线、面。

点：

在平面几何图形中一般把点认为是一个质点，只表示为笛卡尔坐标系中的一个坐标点，因此没有画一个点这样的方法；在实践中一般用圆表示一个点。

线：

在平面几何图形中的线一般可以分为两种：直线和曲线。直线，在数学中的定义是一条无限长的线段，这里的可以将此直线认为是一条线段线段，它有自己的起点和终点，而且还会有宽度、样式、线段节点的类型等等；曲线的话就相对的比较复杂了，常见的有弧线、二次贝塞尔曲线、三次贝塞尔曲线等等，但是这些东西也不是太常用。

面：

这个所说的面不是一个无限大的平面。其实就是一些常见的图形或形状：矩形，圆，椭圆，多边形。这些闭合的图形可以进行内部的填充，从而绘制出许多精彩的图案。

 

在 canvas 这个巨大的画板上，我们可以随意的进行绘制填充，描绘出各种匪夷所思的图案。这些几何图案进行最基础的东西。

几何类：

在pixiJs中有一个专门用作几何图形操作的类，叫做 Graphics 。这个类里面包含了很多绘制图形的方法和设置。在绘制图形之前，首先介绍几个基础的方法。

• 设置线条颜色：lineStyle，可以设置线条的宽度、颜色。在设置完成之后才能应用；
• 设置填充颜色：beginFill，可以设置线条的颜色、透明度。需要在调用结束填充时才填充；
• 结束填充：endFill，将填充自上次调用beginFill（）方法以来添加的线条和形状；
• 清空几何体：clear，清空这个几何题对象。

// 创建一个几何体
this.Graphics = new PIXI.Graphics();
this.app.stage.addChild(this.Graphics);

// 设置线条颜色,包括：宽度、颜色、透明度
this.Graphics.lineStyle(2,0x000000,1);

// 开始设置填充颜色:颜色、透明度
this.Graphics.beginFill(0x66CCFF,1);

// 结束填充，将填充自上次调用beginFill（）方法以来添加的线条和形状
this.Graphics.endFill();

// 清空整个几何体
this.Graphics.clear()

 

基础操作：

矩形：

drawRec(x, y, width, height);

根据左上角坐标和宽高即可绘制完成。

// 填充颜色
this.Graphics.beginFill(0x66CCFF);
// 边框颜色
this.Graphics.lineStyle(4, 0x66CCFF, 1);
//调用drawRect方法来画一个矩形，四个参数是x, y, width 和 height，其中x和y确定矩形的位置
this.Graphics.drawRect(50, 50, 100, 100);
// 结束绘制
this.Graphics.endFill();

 

圆：

drawCircle(x, y, radus);

根据圆心和半径即可绘制完成。

// 填充颜色
this.Graphics.beginFill(0x66CCFF);
// 三个参数是x, y 和 radius
this.Graphics.drawCircle(300, 200, 100);
// 结束绘制
this.Graphics.endFill();

 

椭圆：

drawEllipse(x, y, width, height);

根据圆心和横竖轴即可绘制完成。

// 填充颜色
this.Graphics.beginFill(0x66CCFF);
// 绘制椭圆
this.Graphics.drawEllipse(500, 100, 50, 20);
// 结束绘制
this.Graphics.endFill();

圆角矩形：

drawRoundedRect(x, y, width, height,radus);

就是给矩形加了一个圆角绘制完成。

// 填充颜色
this.Graphics.beginFill(0x66CCFF);
// 绘制圆角矩形
this.Graphics.drawRoundedRect(50, 300, 84, 36, 10);
// 结束绘制
this.Graphics.endFill();

 

多边形：

drawPolygon(Array);

根据一系列点的数组绘制图形。

// 填充颜色
this.Graphics.beginFill(0x66CCFF);
//利用`drawPolygon`定义多边形的路径
this.Graphics.drawPolygon([
  450, 280, //第一个点
  550, 280, //第二个点
  500, 380 //第三个点
]);
// 结束绘制
this.Graphics.endFill();

 

线段：

moveTo(x,y);

lineTo(x,y);

设置起点和终点即可完成；如果未设置起点，将上一个终点当作起点。

 

// 线条颜色
this.Graphics.lineStyle(4, 0x66CCFF, 1);
this.Graphics.moveTo(250, 300); //起点
this.Graphics.lineTo(350, 350); //终点

 

二次贝塞尔曲线：

quadraticCurveTo(cpX, cpY, toX, toY);

根据起点、参考点和终点绘制而成。

 

// 线条颜色 
this.Graphics.lineStyle(4, 0x66CCFF, 1);
this.Graphics.moveTo(250, 300); //起点
this.Graphics.quadraticCurveTo(128, 470, 224, 578); //参数是两个点

 

 

三次贝塞尔曲线：

bezierCurveTo(cpX, cpY, cpX2, cpY2, toX, toY);

根据起点、2个参考点和终点绘制而成。

 

// 线条颜色 
this.Graphics.lineStyle(4, 0x66CCFF, 1);
this.Graphics.moveTo(232, 560); //起点
this.Graphics.bezierCurveTo(200, 470, 484, 470, 404, 578); //参数是三个点

 

弧线：

bezierCurveTo(cx, cy, radius, startAngle, endAngle, anticlockwise);

根据圆心、半径、开始角度（3点钟角度为0度）、结束角度、顺逆时钟（默认值为 false 顺时针）。

 

// 线条颜色 
this.Graphics.lineStyle(4, 0x66CCFF, 1);
this.Graphics.arc(550, 550, 64, 3.14, 5, false);//参数是：圆心，开始角度，结束角度，顺逆时钟

 

关于一些问题的记录和总结：

• 设置线条在用完后，最后设置消失（宽度为0），不然后续的绘制会一直在用；
• 有开始填充就必须有结束填充，而且填充的最后是闭合的图形，不然会有很奇怪的表现形式；

几何类的官方文档：

http://pixijs.download/release/docs/PIXI.Graphics.html