一、矩形

调用 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();

扫描二维码关注公众号，回复： 4543419 查看本文章

三、绘制直线

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.进度条

4.不规则进度条

七、清空绘图

清空绘图操作是将已经绘制的图像全部清空，可以执行 Graphics 中的 clear() 方法，代码如下：

shp.graphics.clear();

[Egret][文档]矢量绘图