Egret矢量绘图与遮罩

绘制矢量图形

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

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。
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • -01- 我有一个朋友跟我同龄,几年前就过了而立之年。 论条件北京有房有车,论长相也拿得出手,论身高也不能算二等残...
    主播亚东阅读 3,751评论 6 1
  • 接下三年级二班是件很棘手的事儿,他们太难带了,三年级七八岁的年纪,用我们的方言来说就是“七岁八岁狗都嫌”,而且孩子...
    沂南036张霞阅读 2,839评论 0 0
  • 丈:十尺也;夫:成年男子也;大丈夫:身高一丈之成年男子也。这是古代中国大丈夫的源出。可他的衍生源自《孟子·滕文公下...
    美丽的井沟村折川社神话阅读 5,738评论 0 6
  • 操作过程:空腔焊 1.用细长条的银片围成一个戒圈,用高温银焊药焊接,把焊好的戒圈套在椭圆形戒指棒上,用锉子和砂纸修...
    D3舍阅读 18,893评论 0 3
  • 风和日丽,出阁学习。 学的是电工,大二时的必修课,院里为挂科的学生专门在周末下午安排的重修课。 这是第一堂课,老师...
    明火白粥阅读 3,025评论 0 1

友情链接更多精彩内容