图形 Graphics

Demo

使用

无需参数，将会返回一个 graphics 挂载 component 实例上，调用 graphics 属性上的方法即可绘制图形

beginFill (color, alpha)

指定一个简单的单色填充，随后调用其他 Graphics 方法（例如：或drawCircle()）在绘制时使用。

endFill ()

对自上一次调用 beginFill() 方法以来添加的线条和形状应用填充。

lineStyle ({ width, color, alpha, alignment, native })

指定用于随后调用 Graphics 方法的线样式，例如：lineTo()方法或 drawCircle()方法

Name	Type	Default	Description
`width`	number	0	optional 画线的宽度，将更新对象存储的样式
`color`	number	0x0	optional 绘制线条的颜色，将更新对象存储的样式
`alpha`	number	1	optional 绘制线条的 Alpha，将更新对象存储的样式
`alignment`	number	0.5	optional 绘制线的对齐方式（0 = 内部，0.5 = 居中，1 = 外部）
`native`	boolean	false	optional 如果为 true，则将使用 LINES 来代替 TRIANGLE_STRIP 绘制线条

lineStyle (width, color, alpha, alignment, native)

指定用于随后调用 Graphics 方法的线样式，例如：lineTo()方法或 drawCircle()方法

Name	Type	Default	Description
`width`	number	0	optional 画线的宽度，将更新对象存储的样式
`color`	number	0x0	optional 绘制线条的颜色，将更新对象存储的样式
`alpha`	number	1	optional 绘制线条的 Alpha，将更新对象存储的样式
`alignment`	number	0.5	optional 绘制线的对齐方式（0 = 内部，0.5 = 居中，1 = 外部）
`native`	boolean	false	optional 如果为 true，则将使用 LINES 来代替 TRIANGLE_STRIP 绘制线条

lineTo (x, y)

Name	Type	Description
`x`	number	要绘制到的 X 坐标
`y`	number	要绘制到的 Y 坐标

moveTo (x, y)

将当前图形位置移动到 x,y。

Name	Type	Description
`x`	number	要移动到的 X 坐标
`y`	number	要移动到的 Y 坐标

quadraticCurveTo (cpX, cpY, toX, toY)

计算二次贝塞尔曲线的点，然后绘制它。基于:

clear ()

清除绘制到此 Graphics 对象的图形，并重置填充和线条样式设置。

closePath ()

关闭当前路径。

arc (cx, cy, radius, startAngle, endAngle, anticlockwise)

圆弧方法创建圆弧/曲线（用于创建圆或圆的一部分）。

Name	Type	Default	Description
`cx`	number		圆心的 x 坐标
`cy`	number		圆心的 y 坐标
`radius`	number		圆的半径
`startAngle`	number		起始角度，以弧度为单位（0 是圆弧的 3 点位置）
`endAngle`	number		终止角度，以弧度为单位
`anticlockwise`	boolean	false	optional 指定图形是逆时针还是顺时针。 `false` 是默认值，表示顺时针，而`true`表示逆时针。

arcTo (x1, y1, x2, y2, radius)

arcTo()方法在画布上的两个切线之间创建弧/曲线。

Name	Type	Description
`x1`	number	圆弧的第一个切点的 x 坐标
`y1`	number	圆弧的第一个切点的 y 坐标
`x2`	number	圆弧末端的 x 坐标
`y2`	number	圆弧末端的 y 坐标
`radius`	number	圆弧半径

bezierCurveTo (cpX, cpY, cpX2, cpY2, toX, toY)

Name	Type	Description
`cpX`	number	控制点 x
`cpY`	number	控制点 y
`cpX2`	number	第二控制点 x
`cpY2`	number	第二控制点 y
`toX`	number	目的点 x
`toY`	number	目的点 y

drawCircle (x, y, radius)

绘制一个圆。

Name	Type	Description
`x`	number	圆心的 X 坐标
	number	圆心的 Y 坐标
`radius`	number	圆的半径

drawEllipse (x, y, width, height)

绘制一个椭圆。

drawPolygon (path)

使用指定的路径绘制多边形。

Name	Type	Description
`path`	number[] \| Array.<{x,y}>	用于构造多边形的路径数据。

drawRect (x, y, width, height)

绘制一个矩形。

Name	Type	Description
`x`	number	矩形左上角的 X 坐标
`y`	number	矩形左上角的 Y 坐标
`width`	number	矩形的宽度
`height`	number	矩形的高度

drawRoundedRect (x, y, width, height, radius)

绘制一个带有圆角/斜角的矩形。

Name	Type	Description
`x`	number	矩形左上角的 X 坐标
`y`	number	矩形左上角的 Y 坐标
`width`	number	矩形的宽度
`height`	number	矩形的高度
`radius`	number	矩形角度的半径

drawStar (x, y, points, radius, innerRadius, rotation)

用任意数量的点画一个星形。

Name	Type	Default	Description
`x`	number		星的中心 X 位置
`y`	number		星的中心 Y 位置
`points`	number		星星的点数必须 > 1
`radius`	number		星星的外半径
`innerRadius`	number		optional 点之间的内半径，默认为`radius`的一半
`rotation`	number	0	optional 星星自转的弧度，其中 0 为垂直