Egret矢量绘图与遮罩

绘制矢量图形

Egret中封装了Graphics类实现矢量绘图功能，可以绘制矩形、圆形、直线、曲线、弧线等。
Graphics类中封装的绘图方法不能直接使用，而需要在显示对象中使用。一些显示对象（如Shape和Sprite）中已经包含了绘图方法。

1. 绘制矩形

shape.graphics.drawRect()

2. 绘制圆形

shape.graphics.drawCircle()

3. 绘制直线

moveTo() 负责绘制直线的起始点，
lineTo() 负责绘制直线的终点。
在绘图直线前，需要先制定线条的样式，设置 lineStyle() 方法

moveTo( x:number, y:number): void
lineTo( x:number, y:number): void

4. 绘制曲线

Egret中提供的曲线绘制是贝塞尔曲线，先使用moveTo方法指定曲线的其实点，然后使用curveTo()或cubicCurveTo()指定曲线的控制点。

let shape = new egret.Shape();
shape.graphics.lineStyle(4,0xff0000);
shape.graphics.moveTo(280,145);
shape.graphics.cubicCurveTo(190,2,10,189,280,307);
shape.graphics.moveTo(280,145);
shape.graphics.cubicCurveTo(370,2,550,189,280,307);
shape.graphics.endFill();
this.addChild(shape);

运行后的结果：

egret_shape.jpg

5. 绘制圆弧

drawArc( x:number, y:number, radius:number, startAngle:number, endAngle:number, anticlockwise:boolean ):void

前两个参数是圆弧的圆心位置，radius是半径，startAngle是圆弧起点的角度，从x 轴方向开始计算，以弧度为单位，endAngle是圆弧终点的角度，anticlockwise控制绘制方向，如果为 true，逆时针绘制圆弧，反之，顺时针绘制。
下面代码画出一个圆的下半部分：

let shp = new egret.Shape();
shp.graphics.beginFill(0x112244);
shp.graphics.drawArc(400,400,100,0,Math.PI,true);
shp.graphics.endFill();
this.addChild(shp);

遮罩mask

遮罩的作用是指定一个显示对象的可见区域，所有显示对象都具备遮罩功能。

(mask 很消耗 cpu，建议少用不停修改 mask 的方式做动画。)
示例：
将一个矩形对象赋值给显示对象的mask属性

shape.mask = new egret.Rectangle(20,20,30,50);
如果Rect发生变化，需要重新将rect赋值给shape.mask。