2.4 矢量绘图
本节将讲解矢量绘图。上一节讲到 graphics 对象是绘制矢量图形的关键,它具备绘制矢量图形的全部功能。本节将更具体地讲解一下它的其他用法。
graphics对象的类型是Graphics,这个类不能直接使用,而是需要在一些显示对象,比如Shape和Sprite类里间接使用。
上一节已经讲解了如何绘制矩形,这一节将重点介绍如何绘制圆形、直线、曲线、圆弧,这些代码都来源于Egret的官方文档。
2.4.1 绘制圆形
首先创建一个称为“GraphicsDrawing”的项目,删除 src 里的所有文件,然后创建一个称为Main.ts的类文件,添加如下代码,参见二维码2-11:
二维码2-11
运行调试播放器,会看到这样的运行效果,如图2-28所示:
图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:
二维码2-12
而且onAddToStage方法也要做出修改:
运行调试播放器观看结果,如图2-29所示:
图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是二次贝塞尔曲线的结构图:
图2-30 曲线的结构(图片来源于Egret官方文档)
其中P0是起始点,P1是控制点,P2是终点。
继续之前的项目,在Main类里继续添加如下的代码:
而且onAddToStage方法也要做出修改:
运行调试播放器观看结果,如图2-31所示:
图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所示:
图2-32 程序运行结果(绘制圆弧)
在曲线下方绘制出一个弧形。
在drawArc方法里,代码在第4行绘制了一个圆弧,其中的drawArc方法的原型如下:
以下是对各个参数的解释:
● x:圆弧中心(圆心)的x轴坐标,相对父显示对象x坐标的水平距离。
● y:圆弧中心(圆心)的y轴坐标,相对父显示对象y坐标的垂直距离。
● radius:圆弧的半径。
● startAngle:圆弧的起始点,由x轴方向开始计算,单位以弧度表示。
● endAngle:圆弧的终点,单位以弧度表示。
● anticlockwise:如果为 true,逆时针绘制圆弧,反之,顺时针绘制。该参数是可选的,如果没指定这个参数,则按顺时针绘制。