[Egret][文档]矢量绘图
Egret中封装了 Graphics 类实现矢量绘图功能，但是Graphics 类中封装的绘图方法不能直接使用，而需要在显示对象中使用。
一些显示对象（如 Shape 和 Sprite ）中已经包含了绘图方法，因此可以在显示对象中直接调用这些方法进行绘图。
【注】：lineStyle()用来设置边框样式，而beginFill()用来设置填充样式，endFill()用来结束绘制。
一、矩形
调用 beginFill(填充颜色,透明度) 方法设置矩形的填充颜色。
调用 drawRect(x:number, y:number, width:number, height:number) 方法设置矩形的位置和大小。
调用 endFill() 方法结束当前绘制操作。
调用 lineStyle(线条宽度,描边颜色) 设置线条的样式。
shp.graphics.lineStyle( 10, 0x00ff00 ); shp.graphics.beginFill( 0xff0000, 1); shp.graphics.drawRect( 0, 0, 100, 200 ); shp.graphics.endFill();
二、圆形
drawCircle() 方法接受三个参数，第一个参数为圆心的X轴坐标，第二个参数为圆心的Y轴坐标，第三个参数为半径。
drawCircle( x:number, y:number, radius:number): void
【注】：圆心的X轴和Y轴位置是相对于 Shape 对象的锚点计算的.
shp.graphics.lineStyle( 10, 0x00ff00 ); shp.graphics.beginFill( 0xff0000, 1); shp.graphics.drawCircle( 0, 0, 50 ); shp.graphics.endFill();
三、绘制直线
moveTo() 和 lineTo()，它们输入参数是一对坐标值。moveTo() 负责绘制直线的起始点，lineTo() 负责绘制直线的终点。
shp.graphics.lineStyle( 2, 0x00ff00 ); shp.graphics.moveTo( 10,10 ); shp.graphics.lineTo( 100, 20 ); shp.graphics.endFill();
也可以连续绘制多条首尾相接的直线，形成一条折线:
// 绘制折线时，无需多次使用 moveTo() 方法，连续使用 lineTo() 方法即可。 shp.graphics.lineStyle( 2, 0x00ff00 ); shp.graphics.moveTo( 68, 84 ); shp.graphics.lineTo( 167, 76 ); shp.graphics.lineTo( 221, 118 ); shp.graphics.lineTo( 290, 162 ); shp.graphics.endFill();
四、绘制曲线
Egret中提供的曲线绘制是“二次贝塞尔曲线”，下图是“二次贝塞尔曲线”的结构图，其中P0是起始点，P1是控制点，P2是终点。
curveTo() 方法需设置4个参数，前两个参数是控制点(P1)的位置，后两个参数是终点(P2)的位置。
执行绘图时，先使用 moveTo() 方法指定曲线的起始点，然后使用 curveTo() 指定曲线的控制点和终点。
shp.graphics.lineStyle( 2, 0x00ff00 ); shp.graphics.moveTo( 50, 50); shp.graphics.curveTo( 100,100, 200,50); shp.graphics.endFill();
五、绘制圆弧
绘制封闭圆弧使用 Graphics 中的 drawArc() 方法。
drawArc( x:number, y:number, radius:number, startAngle:number, endAngle:number, anticlockwise:boolean ):void
前两个参数是圆弧路径的圆心位置，radius 是圆弧半径。startAngle 是圆弧起点的角度，从x 轴方向开始计算，以弧度为单位，endAngle 是圆弧终点的角度，anticlockwise 控制绘制方向，如果为 true，逆时针绘制圆弧，反之，顺时针绘制。
shp.graphics.beginFill( 0x1122cc ); shp.graphics.drawArc(200,200,100,0,Math.PI,true); shp.graphics.endFill();
六、绘制圆弧高级使用
1.弧线/拱形（边框/填充）
var shape:egret.Shape = new egret.Shape(); shape.graphics.lineStyle(2, 0xffff00);// 只设置边框，则为弧线 shape.graphics.beginFill(0xff0000);// 只设置填充则为拱形 shape.graphics.drawArc(50, 50, 50, 0, Math.PI / 180 * 30, false); shape.graphics.endFill();
2.画扇形（折线方式，加填充色）
var r:number = 50; var shape:egret.Shape = new egret.Shape(); shape.graphics.beginFill(0xff0000); shape.graphics.moveTo(r, r);//绘制点移动(r, r)点 shape.graphics.lineTo(r * 2, r);//画线到弧的起始点 shape.graphics.drawArc(50, 50, 50, 0, 260 * Math.PI / 180, false);//从起始点顺时针画弧到终点 shape.graphics.lineTo(r, r);//从终点画线到圆形。到此扇形的封闭区域形成 shape.graphics.endFill();
3.进度条
进度条的逻辑是用一个每秒渲染的函数，不断地增加条的长度。
var angle:number = 0; egret.startTick(function (timeStamp:number):boolean { angle += 1; changeGraphics(angle); angle = angle % 360; return true; }, this); function changeGraphics(angle) { shape.graphics.clear(); shape.graphics.lineStyle(2, 0x0000ff, 1); shape.graphics.drawArc(50, 50, 50, 0, angle * Math.PI / 180, false); shape.graphics.endFill(); }
4.不规则进度条
在进度条或者扇形进度条上面覆盖一个遮罩，这个遮罩的形状可以是不规则的。
【注】：mask 很消耗 cpu，建议少用不停修改 mask 的方式做动画。
七、清空绘图
清空绘图操作是将已经绘制的图像全部清空，可以执行 Graphics 中的 clear() 方法，代码如下：
shp.graphics.clear();