使用矢量绘图

Egret中封装了 Graphics 类实现矢量绘图功能，可以绘制矩形、圆形、直线、曲线、圆弧等。下面介绍了矢量绘图功能的基本用法和若干高级用法。

1.绘制矩形

Graphics 类中封装的绘图方法不能直接使用，而需要在显示对象中使用。一些显示对象（如 Shape 和 Sprite ）中已经包含了绘图方法，因此可以在显示对象中直接调用这些方法进行绘图。

下面代码以 Shape 对象为例，绘制矩形的：

class GraphicsTest extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }
    private onAddToStage(event: egret.Event) {
        const shp: egret.Shape = new egret.Shape();
        shp.graphics.beginFill(0xff0000, 1);
        shp.graphics.drawRect(0, 0, 100, 200);
        shp.graphics.endFill();
        this.addChild(shp);
    }
}

编译后运行，效果如图：

这段代码中核心绘图代码是下面这三行:

shp.graphics.beginFill(0xff0000, 1);
shp.graphics.drawRect(0, 0, 100, 200);
shp.graphics.endFill();

访问 shp 的 graphics 属性会返回一个 Graphics 对象，操作此对象中的绘图方法即可实现绘图。

调用 beginFill() 方法设置矩形的填充颜色，这里将填充颜色设置为红色（颜色值0xff0000），同时将alpha设置为1，表示完全不透明。

调用 drawRect() 方法设置矩形的位置和大小，前两个参数分别为矩形左上角的X、Y轴坐标（相对于 shp 的锚点计算），后两个参数分别为矩形的宽和高，这里在 (0, 0) 点绘制了一个 100*200 的矩形。

调用 endFill() 方法结束当前绘制操作。

若要为矩形添加描边，需设置线条的样式，通过 lineStyle() 方法实现。

该方法的第一个参数是描边的线条宽度，第二个参数是描边的颜色。

为绘图代码添加一行:

shp.graphics.lineStyle(10, 0x00ff00);

修改后的代码如下：

class GraphicsTest extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }
    private onAddToStage(event: egret.Event) {
        const shp: egret.Shape = new egret.Shape();
        shp.x = 20;
        shp.y = 20;
        shp.graphics.lineStyle(10, 0x00ff00);
        shp.graphics.beginFill(0xff0000, 1);
        shp.graphics.drawRect(0, 0, 100, 200);
        shp.graphics.endFill();
        this.addChild(shp);
    }
}

编译并运行，效果如图：

2.绘制圆形

绘制圆形的方法与绘制矩形类似，只需将 drawRect() 方法改为 drawCircle() 方法。

declare class Graphics {
    drawCircle(x: number, y: number, radius: number): void;
}

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

注意：圆心的X轴和Y轴位置是相对于 Shape 对象的锚点计算的.

下面代码示例绘制了一个半径为50像素的圆形：

class GraphicsTest extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }
    private onAddToStage(event: egret.Event) {
        const shp: egret.Shape = new egret.Shape();
        shp.x = 100;
        shp.y = 100;
        shp.graphics.lineStyle(10, 0x00ff00);
        shp.graphics.beginFill(0xff0000, 1);
        shp.graphics.drawCircle(0, 0, 50);
        shp.graphics.endFill();
        this.addChild(shp);
    }
}

编译并运行，效果如图：

3.绘制直线

使用Graphics绘制直线需要使用两个方法: moveTo() 和 lineTo()，它们输入参数是一对坐标值。moveTo() 负责绘制直线的起始点，lineTo() 负责绘制直线的终点。

declare class Graphics {
    moveTo(x: number, y: number): void;
    lineTo(x: number, y: number): void;
}

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

shp.graphics.lineStyle(2, 0x00ff00);

然后使用 moveTo() 来设定线条的起始点，使用 lineTo() 来设定线条的终点。完整代码如下：

class GraphicsTest extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }
    private onAddToStage(event: egret.Event) {
        const shp: egret.Shape = new egret.Shape();
        shp.graphics.lineStyle(2, 0x00ff00);
        shp.graphics.moveTo(10, 10);
        shp.graphics.lineTo(100, 20);
        shp.graphics.endFill();
        this.addChild(shp);
    }
}

编译后运行，效果如下图：

也可以连续绘制多条首尾相接的直线，形成一条折线，代码如下：

const shp: egret.Shape = new egret.Shape();
shp.graphics.lineStyle(2, 0x00ff00);
shp.graphics.moveTo(68, 84);
shp.graphics.lineTo(167, 76);
shp.graphics.lineTo(221, 118);
shp.graphics.lineTo(290, 162);
shp.graphics.lineTo(297, 228);
shp.graphics.lineTo(412, 250);
shp.graphics.lineTo(443, 174);
shp.graphics.endFill();
this.addChild(shp);

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

编译后运行，效果如图：

4.绘制曲线

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

绘制曲线时，需使用 Graphics 中的 curveTo() 方法。

declare class Graphics {
    curveTo(x1: number, y1: number, x2: number, y2: number): void;
}

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

执行绘图时，先使用 moveTo() 方法指定曲线的起始点，然后使用 curveTo() 指定曲线的控制点和终点。在程序进行绘图时，绘制过程如下图：

示例代码：

class GraphicsTest extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }
    private onAddToStage(event: egret.Event) {
        const shp: egret.Shape = new egret.Shape();
        shp.graphics.lineStyle(2, 0x00ff00);
        shp.graphics.moveTo(50, 50);
        shp.graphics.curveTo(100, 100, 200, 50);
        shp.graphics.endFill();
        this.addChild(shp);
    }
}

编译后运行，效果如图：

5.绘制圆弧

绘制封闭圆弧使用 Graphics 中的 drawArc() 方法。

declare class Graphics {
    drawArc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise: boolean): void;
}

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

下面的例子绘制了一个从 0 到 π 的圆弧：

class GraphicsTest extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }
    private onAddToStage(event: egret.Event) {
        const shp: egret.Shape = new egret.Shape();
        shp.graphics.beginFill(0x1122cc);
        shp.graphics.drawArc(200, 200, 100, 0, Math.PI, true);
        shp.graphics.endFill();
        this.addChild(shp);
    }
}

编译并运行，效果如图：

其中 endAngle 使用 Math.PI 表示弧度 π ，可以在数学相关API里查询到。

6.绘制圆弧高级使用

6.1.画弧

const shape: egret.Shape = new egret.Shape();
shape.graphics.lineStyle(2, 0xffff00);
shape.graphics.drawArc(50, 50, 50, 0, Math.PI / 180 * 30, false);
shape.graphics.endFill();

6.2.画拱形

const shape: egret.Shape = new egret.Shape();
shape.graphics.beginFill(0xff0000);
shape.graphics.drawArc(50, 50, 50, 0, Math.PI / 180 * 60, false);
shape.graphics.endFill();

画拱和画弧的区别就是：画拱需要填充图形，画弧不需要填充图形。

6.3.画扇形

扇形其实就是圆心跟弧的2个端点连接后的一个封闭区域。

const r: number = 50;
const shape: egret.Shape = new egret.Shape();
shape.graphics.beginFill(0xff0000);
shape.graphics.moveTo(r, r); //绘制点移动(r, r)点
shape.graphics.lineTo(r * 2, r); //画线到弧的起始点
shape.graphics.drawArc(50, 50, 50, 0, 260 * Math.PI / 180, false); //从起始点顺时针画弧到终点
shape.graphics.lineTo(r, r); //从终点画线到圆形。到此扇形的封闭区域形成
shape.graphics.endFill();

6.4.画弧形进度条

class GraphicsText {
    private getArcProgress(): egret.Shape {
        const shape: egret.Shape = new egret.Shape();
        let angle: number = 0;
        egret.startTick(function (timeStamp: number) {
            angle += 1;
            changeGraphics(angle);
            angle = angle % 360;
            return true;
        }, this);
        function changeGraphics(angle) {
            shape.graphics.clear();
            shape.graphics.lineStyle(2, 0x0000ff, 1);
            shape.graphics.drawArc(50, 50, 50, 0, angle * Math.PI / 180, false);
            shape.graphics.endFill();
        }
    }
}

关于代码中 egret.startTick 的用法，可参考Timer计时器

6.5.画扇形进度条

class GraphicsText {
    private getSectorProgress(): egret.Shape {
        const shape: egret.Shape = new egret.Shape();
        let angle: number = 0;
        egret.startTick(function (timeStamp: number): boolean {
            angle += 1;
            changeGraphics(angle);
            angle = angle % 360;
            return true;
        }, this);
        return shape;
        function changeGraphics(angle) {
            shape.graphics.clear();
            shape.graphics.beginFill(0xff0000);
            shape.graphics.moveTo(50, 50);
            shape.graphics.lineTo(100, 50);
            shape.graphics.drawArc(50, 50, 50, 0, angle * Math.PI / 180, false);
            shape.graphics.lineTo(50, 50);
            shape.graphics.endFill();
        }
    }
}

6.6.画不规则边框进度条

下面是一个示例，通过结合遮罩 (mask) 和扇形进度条来模拟边框的进度显示。关于 mask 的具体用法，可参考遮罩

首先，提供一个只有边框的全封闭的图形。比如

使用上面介绍的扇形进度条，并确保扇形确定的圆的区域可以完整覆盖边框图。要将扇形的圆心对准边框中心。
将边框的 mask 设置成扇形进度条，至此一个简单的边框进度条已完成。可以通过修改被遮罩图形，来做成适合项目的进度条，比如图形不是一个边框，而是一个灰色框的填充图。

代码:

class GraphicsText {
    private getSectorProgress(): egret.DisplayObjectContainer {
        const container: egret.DisplayObjectContainer = new egret.DisplayObjectContainer();
        const w: number = 100;
        const h: number = 100;
        const r: number = Math.max(w, h) / 2 * 1.5;
        const bitmap = new egret.Bitmap(RES.getRes(key));
        container.addChild(bitmap);
        bitmap.width = w;
        bitmap.height = h;
        const shape: egret.Shape = new egret.Shape();
        shape.x = bitmap.width / 2;
        shape.y = bitmap.height / 2;
        bitmap.mask = shape;
        container.addChild(shape);
        let angle = 0;
        egret.startTick(function (timeStamp: number): boolean {
            angle += 1;
            changeGraphics(angle);
            angle = angle % 360;
            return true;
        }, this);
        return container;
        function changeGraphics(angle) {
            shape.graphics.clear();
            shape.graphics.beginFill(0x00ffff, 1);
            shape.graphics.lineTo(r, 0);
            shape.graphics.drawArc(0, 0, r, 0, angle * Math.PI / 180, true);
            shape.graphics.lineTo(0, 0);
            shape.graphics.endFill();
        }
    }
}

效果图

mask 很消耗 cpu，建议少用不停修改 mask 的方式做动画。

7.多个形状的绘制

以下代码在一个 Shape 对象中绘制4个小格子，互相紧邻，并且红蓝相间。

this.graphics.beginFill(0x0000ff);
this.graphics.drawRect(0, 0, 50, 50);
this.graphics.endFill();
this.graphics.beginFill(0x0000ff);
this.graphics.drawRect(50, 50, 50, 50);
this.graphics.endFill();
this.graphics.beginFill(0xff0000);
this.graphics.drawRect(50, 0, 50, 50);
this.graphics.endFill();
this.graphics.beginFill(0xff0000);
this.graphics.drawRect(0, 50, 50, 50);
this.graphics.endFill();

将该 Shape 对象放到显示列表，编译运行，得到如图效果：

注意：多个形状绘制，互相是独立的，每一次绘制填充，都必须以 endFill() 结束，才能开始下一次绘制。

8.清空绘图

清空绘图操作是将已经绘制的图像全部清空，可以执行 Graphics 中的 clear() 方法，代码如下：

shp.graphics.clear();

#1.绘制矩形

#2.绘制圆形

#3.绘制直线

#4.绘制曲线

#5.绘制圆弧

#6.绘制圆弧高级使用

#6.1.画弧

#6.2.画拱形

#6.3.画扇形

#6.4.画弧形进度条

#6.5.画扇形进度条

#6.6.画不规则边框进度条

#7.多个形状的绘制

#8.清空绘图

1.绘制矩形

2.绘制圆形

3.绘制直线

4.绘制曲线

5.绘制圆弧

6.绘制圆弧高级使用

6.1.画弧

6.2.画拱形

6.3.画扇形

6.4.画弧形进度条

6.5.画扇形进度条

6.6.画不规则边框进度条

7.多个形状的绘制

8.清空绘图