绘制矢量图形
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。
网友评论