Egret 2D(5)-矢量绘图和遮罩

Graphics矢量绘图

Egret中封装了 Graphics 类实现矢量绘图功能，可以绘制矩形、圆形、直线、曲线、圆弧等。

绘制矩形

drawRect接受4个参数（x，y，宽度，高度）

//绘制
  let shape:egret.Shape=new egret.Shape();
//填充颜色
  shape.graphics.beginFill(0xff0000,1);//第一参数为16进制颜色,第二参数为alpha透明度
//绘制矩形
  shape.graphics.drawRect(0,0,100,100);//x,y,w,h
//结束绘制操作
  shape.graphics.endFill();
  this.addChild(shape);

描边

//描边
shape.graphics.lineStyle(10,0x000000);//宽度,颜色

注意:

描边要在结束绘制和矢量图绘制之前描边

绘制圆形

drawCircle() 方法接受三个参数，第一个参数为圆心的X轴坐标，第二个参数为圆心的Y轴坐标，第三个参数为半径。

//绘制
    let shape:egret.Shape=new egret.Shape();
//填充颜色
    shape.graphics.beginFill(0xff0000,1);//第一参数为16进制颜色,第二参数为alpha透明度
//描边
    shape.graphics.lineStyle(10,0x000000);
//绘制圆形
    shape.graphics.drawCircle(0,0,50);//x,y,radius
//结束绘制操作
    shape.graphics.endFill();           
    this.addChild(shape);

绘制直线

moveTo() 负责绘制直线的起始点，lineTo() 负责绘制直线的终点

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

注意：

在绘图直线前，需要先制定线条的样式，设置 lineStyle() 方法：

绘制折线时，无需多次使用 moveTo() 方法，连续使用 lineTo() 方法即可。

//绘制
  let shape:egret.Shape=new egret.Shape();
//绘制直线的线条样式(描边),必须要，否则看不到任何东西
  shape.graphics.lineStyle(10,0x000000);
//绘制直线起点
  shape.graphics.moveTo(100,100);
//绘制直线终点
   shape.graphics.lineTo(100,200);
//继续绘制直线形成折线
   shape.graphics.lineTo(200,300);
//结束绘制
   shape.graphics.endFill();
   this.addChild(shape);

绘制曲线

Egret中提供的曲线绘制是“二次贝塞尔曲线”，下图是“二次贝塞尔曲线”的结构图，其中P0是起始点，P1是控制点，P2是终点。

curveTo( x1:number, y1:number, x2:number, y2:number ): void

curveTo() 方法需设置4个参数，前两个参数是控制点(P1)的位置，后两个参数是终点(P2)的位置。

注意：

绘制曲线同样需要lineStyle()曲线样式和moveTo()绘制起点

//绘制
  let shape:egret.Shape=new egret.Shape();
//绘制曲线的线条样式(描边),必须要，否则看不到任何东西
  shape.graphics.lineStyle(10,0x000000);
  shape.graphics.moveTo( 50, 50);
//绘制曲线
  shape.graphics.curveTo(100,100,200,50);
//结束绘制
  shape.graphics.endFill();
  this.addChild(shape);

绘制圆弧

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

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

高级用法看官网

遮罩

遮罩的作用是指定一个显示对象的可见区域，所有显示对象都具备遮罩功能。也就是指定要显示一个显示对象自身的哪一块。

矩形遮罩

矩形遮罩，即显示对象的可见区域是方形显示区域而非不规则显示区域。

//用法为：将一个矩形对象赋值给显示对象的 mask 属性。
shp.mask = new egret.Rectangle(20,20,30,50);//x,y,w,h

注意:如果遮罩发生变化，需要重新将遮罩赋值给 shp.mask

显示对象遮罩

显示对象遮罩，即显示对象的可见区域由另一个显示对象确定，可实现不规则遮罩。

也就是用一个显示对象来指定被遮罩显示对象的形状。

用法为：将被遮罩显示对象的 mask 属性设置为遮罩对象：

//将maskSprite设置为mySprite的遮罩
mySprite.mask = maskSprite;

//画一个红色的正方形
var square:egret.Shape = new egret.Shape();
square.graphics.beginFill(0xff0000);
square.graphics.drawRect(0,0,100,100);
square.graphics.endFill();
this.addChild(square);

//画一个蓝色的圆形
var circle:egret.Shape = new egret.Shape();
circle.graphics.beginFill(0x0000ff);
circle.graphics.drawCircle(25,25,25);
circle.graphics.endFill();
this.addChild(circle);

square.mask = circle;

注意：

不能使用一个遮罩对象来遮罩另一个遮罩对象。也就是一个显示对象只能遮罩一个显示对象对象
显示对象作为遮罩，无需像矩形遮罩那样重复赋值 mask，但是 mask 必须是显示列表里的元素。