2.4 矢量绘图

本节将讲解矢量绘图。上一节讲到 graphics 对象是绘制矢量图形的关键，它具备绘制矢量图形的全部功能。本节将更具体地讲解一下它的其他用法。

graphics对象的类型是Graphics，这个类不能直接使用，而是需要在一些显示对象，比如Shape和Sprite类里间接使用。

上一节已经讲解了如何绘制矩形，这一节将重点介绍如何绘制圆形、直线、曲线、圆弧，这些代码都来源于Egret的官方文档。

2.4.1 绘制圆形

首先创建一个称为“GraphicsDrawing”的项目，删除 src 里的所有文件，然后创建一个称为Main.ts的类文件，添加如下代码，参见二维码2-11：

运行调试播放器，会看到这样的运行效果，如图2-28所示：

上面的代码首先创建了一个Shape类型的对象——shape（第13行），然后把它的坐标设置为（100, 100）（第14、15行）。然后设置了边框的样式（第16行），这里使用lineStyle方法来设置边框样式，如果是绘制直线，那它的作用就是设置线的样式。它的原型如下：

它的参数都是可选的。以下是对各个参数的解释：

● thickness：一个整数，以点为单位表示线条的粗细，有效值为0～255。如果未指定数字，或者未定义该参数，则不绘制线条。如果传递的值小于0，则默认值为0。值0表示极细的粗细；最大粗细为255。如果传递的值大于255，则默认值为255。

● color：线条的十六进制颜色值（例如，红色为0xFF0000，蓝色为0x0000FF 等）。如果未指明值，则默认值为0x000000（黑色）。可选。

● alpha：表示线条颜色的 Alpha 值的数字；有效值为0～1。如果未指明值，则默认值为1（纯色）。如果值小于0，则默认值为0。如果值大于1，则默认值为1。

● pixelHinting：布尔型值，指定是否提示笔触采用完整像素。它同时影响曲线锚点的位置以及线条笔触大小本身。在 pixelHinting 设置为 true 的情况下，线条宽度会调整到完整像素宽度。在 pixelHinting 设置为 false 的情况下，对于曲线和直线可能会出现脱节。

● scaleMode：用于指定要使用的比例模式。

● caps：用于指定线条末端处端点类型的CapsStyle类的值。默认值：CapsStyle.ROUND。

● joints：指定用于拐角的连接外观的类型。默认值：JointStyle.ROUND。

● miterLimit：用于表示剪切斜接的极限值的数字。

● lineDash：设置虚线样式。

在第18行，使用drawCircle方法来绘制圆形，它的原型如下：

以下是对各个参数的解释：

● x：圆心的x坐标，相对父显示对象x坐标的水平距离。

● y：圆心的y坐标，相对父显示对象y坐标的垂直距离。

● radius：圆的半径（以像素为单位）。

2.4.2 绘制直线

继续刚才的项目，在Main类里继续添加如下的代码，参见二维码2-12：

而且onAddToStage方法也要做出修改：

运行调试播放器观看结果，如图2-29所示：

程序绘制出几个不规则但是连续的直线。

在drawLines方法里，代码在第3行设置了直线的样式，其中的lineStyle方法已经在上一节讲过了。第4 行代码将直线的起点设置为（68, 84），这个坐标是相对于父节点——shape对象的。其中的moveTo方法原型如下：

以下是对各个参数的解释：

● x：起点的x坐标，相对父显示对象x坐标的水平距离。

● y：起点的y坐标，相对父显示对象y坐标的垂直距离。

第5行代码将直线的下一个点设置为（167, 76），并且在起点和该点之间，根据直线样式绘制一条直线。其中的lineTo方法原型如下：

以下是对各个参数的解释：

● x：下一个点的x坐标，相对父显示对象x坐标的水平距离。

● y：下一个点的y坐标，相对父显示对象y坐标的垂直距离。

第6行代码将直线的下一个点设置为（221, 118），并且在上一个点和该点之间，根据直线样式绘制一条直线。随后代码的作用是一样的。

在onAddToStage方法里，调用drawLines方法才能将这些直线放到舞台上。

2.4.3 绘制曲线

Egret里使用的曲线绘制方法采用二次贝塞尔曲线方法，图2-30是二次贝塞尔曲线的结构图：

其中P0是起始点，P1是控制点，P2是终点。

继续之前的项目，在Main类里继续添加如下的代码：

而且onAddToStage方法也要做出修改：

运行调试播放器观看结果，如图2-31所示：

程序在直线段下方绘制出一段曲线。

接着在drawCurve方法里，代码在第4行将曲线的起点设置为（50, 250），即图2-30中的P0，第5行代码将绘制出一段曲线，其中的curveTo方法的原型如下（结合图2-30）：

以下是对各个参数的解释：

● controlX：控制点P1的x坐标，相对父显示对象x坐标的水平距离。

● controlY：控制点P1的y坐标，相对父显示对象y坐标的垂直距离。

● anchorX：锚点P2的x坐标，相对父显示对象x坐标的水平距离。

● anchorY：锚点P2的y坐标，相对父显示对象y坐标的垂直距离。

在onAddToStage方法里，调用drawCurve方法才能将这个曲线放到舞台上。

2.4.4 绘制圆弧

继续之前的项目，在Main类里继续添加如下的代码：

而且onAddToStage方法也要做出修改：

运行调试播放器观看结果，如图2-32所示：

在曲线下方绘制出一个弧形。

在drawArc方法里，代码在第4行绘制了一个圆弧，其中的drawArc方法的原型如下：

以下是对各个参数的解释：

● x：圆弧中心（圆心）的x轴坐标，相对父显示对象x坐标的水平距离。

● y：圆弧中心（圆心）的y轴坐标，相对父显示对象y坐标的垂直距离。

● radius：圆弧的半径。

● startAngle：圆弧的起始点，由x轴方向开始计算，单位以弧度表示。

● endAngle：圆弧的终点，单位以弧度表示。

● anticlockwise：如果为 true，逆时针绘制圆弧，反之，顺时针绘制。该参数是可选的，如果没指定这个参数，则按顺时针绘制。