美文网首页
Egret矢量绘图与遮罩

Egret矢量绘图与遮罩

作者: PaulLuv | 来源:发表于2018-03-13 10:49 被阅读651次

    绘制矢量图形

    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。
    

    相关文章

      网友评论

          本文标题:Egret矢量绘图与遮罩

          本文链接:https://www.haomeiwen.com/subject/cocofftx.html