Egret 2D (5) - vector drawing and masking

Graphics vector drawing

Egret encapsulates the Graphics class to implement vector drawing functions, which can draw rectangles, circles, straight lines, curves, arcs, etc.

draw rectangle

drawRect accepts 4 parameters (x, y, width, height)

//绘制
  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);

stroke

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

Notice:

Stroke to be stroked before end drawing and vector drawing

draw a circle

The drawCircle() method accepts three parameters, the first parameter is the X-axis coordinate of the center of the circle, the second parameter is the Y-axis coordinate of the center of the circle, and the third parameter is the radius.

//绘制
    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);

draw straight lines

moveTo() is responsible for drawing the starting point of the line, and lineTo() is responsible for drawing the end point of the line

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

Notice: 

Before drawing a straight line, you need to formulate the style of the line and set the lineStyle() method:

When drawing a polyline, instead of using the moveTo() method multiple times, you can use the lineTo() method continuously.

//绘制
  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);

draw curve

The curve drawing provided in Egret is a "quadratic Bezier curve". The following figure is the structure diagram of a "quadratic Bezier curve", where P0 is the starting point, P1 is the control point, and P2 is the end point.

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

 The curveTo() method needs to set 4 parameters, the first two parameters are the position of the control point (P1), and the last two parameters are the position of the end point (P2).

Notice:

Drawing a curve also requires lineStyle() curve style and moveTo() to draw the starting point

//绘制
  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);

draw arc

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

The first two parameters are the position of the center of the arc path, and radius is the radius of the arc. startAngle is the angle of the starting point of the arc, calculated from the x-axis direction, in radians, endAngle is the angle of the ending point of the arc, anticlockwise controls the drawing direction, if it is true, the arc is drawn counterclockwise, otherwise, it is drawn clockwise

See the official website for advanced usage 

mask

The function of the mask is to specify the visible area of ​​a display object, and all display objects have the mask function. That is, specifying which part of a display object itself is to be displayed.

rectangle mask

A rectangular mask, that is, the visible area of ​​the display object is a square display area rather than an irregular display area.

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

Note: If the mask changes, you need to reassign the mask to shp.mask

Show Object Mask

Display object masking, where the visible area of ​​a display object is determined by another display object, enables irregular masking .

That is, a display object is used to specify the shape of the masked display object.

The usage is: set the mask property of the masked display object to the mask object:

//将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;

Notice:

• You cannot use one mask object to mask another mask object. That is, a display object can only mask one display object object.
• The display object is used as a mask, and there is no need to repeatedly assign the mask like a rectangular mask, but the mask must be an element in the display list.