简体中文
简体中文
# DrawableContext
# DrawableContext 的属性值
| 名称 | 类型 | 必备 | 默认值 | 描述 |
|---|---|---|---|---|
| font | string | 是 | 10px | 设置字体大小 |
| fillStyle | string.ColorString | 是 | #000 (黑色) | 设置填充颜色 |
| lineCap | string | 是 | butt | 指定如何绘制每一条线条末端的属性，可选值：butt线段末端以方形结束；round线段末端以圆形结束；square线段末端以方形结束，但是会增加一个一半宽度的矩形区域。 |
| lineDashOffset | number | 是 | - | 设置虚线偏移量 |
| lineJoin | string | 是 | miter | 设置 2 个长度不为 0 的线条相连部分如何连接在一起的属性，可选值：bevel斜角；round圆角；miter尖角。 |
| lineWidth | number | 是 | 1px | 设置线条的宽度 |
| strokeStyle | string.ColorString | 是 | #000 (黑色) | 设置边框的颜色 |
| textAlign | string | 是 | left | 设置文本的对齐方式，可取值：left左对齐；center居中对齐；right右对齐。 |
# 方法
# beginPath()
创建一个新的空路径
# arc(x, y, radius, startAngle, endAngle, anticlockwise?)
绘制一段弧线
# 参数
| 名称 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| x | number | 是 | - | 圆心的X轴坐标 |
| y | number | 是 | - | 圆心的Y轴坐标 |
| radius | number | 是 | - | 圆弧的半径 |
| startAngle | number | 是 | - | 圆弧的起始点，x 轴方向开始计算，单位为弧度 |
| endAngle | number | 是 | - | 圆弧的终点，单位为弧度 |
| anticlockwise | boolean | null | 否 | true | 圆弧绘制方向，true：逆时针绘制，false：顺时针绘制。 |
# moveTo(x, y)
将一个新的路径的起始点移动到 (x，y) 坐标
# 参数
| 名称 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| x | number | 是 | - | 点的X轴坐标 |
| y | number | 是 | - | 点的Y轴坐标 |
# rect(x, y, width, height)
创建一个矩形路径
# 参数
| 名称 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| x | number | 是 | - | 矩形起点的X轴坐标 |
| y | number | 是 | - | 矩形起点的Y轴坐标 |
| width | number | 是 | - | 矩形宽度 |
| height | number | 是 | - | 矩形高度 |
# lineTo(x, y)
将路径的最后一个点连接到 (x，y) 坐标
# 参数
| 名称 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| x | number | 是 | - | 线终点的X轴坐标 |
| y | number | 是 | - | 线终点的Y轴坐标 |
# closePath()
闭合路径，将最后一个点与起点连接起来。如果图形已经封闭，或者只有一个点，那么此方法不会产生任何效果。
# stroke()
绘制当前或已经存在的路径的边框。
# strokeRect(x, y, width, height)
绘制一个矩形框
# 参数
| 名称 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| x | number | 是 | - | 矩形起点的X轴坐标 |
| y | number | 是 | - | 矩形起点的Y轴坐标 |
| width | number | 是 | - | 矩形宽度 |
| height | number | 是 | - | 矩形高度 |
# strokeText(text, x, y)
绘制空心字符
# 参数
| 名称 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| text | string | 是 | - | 要绘制的字符 |
| x | number | 是 | - | 字符开始绘制的X轴坐标 |
| y | number | 是 | - | 字符开始绘制的Y轴坐标 |
# fill(fillRule?)
填充当前或已存在的路径
# 参数
| 名称 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| fillRule | string | null | 否 | nonzero | 填充规则。可取值：nonzero非零环绕规则；evenodd奇偶环绕规则。 |
# fillRect(x, y, width, height)
绘制一个实心矩形
# 参数
| 名称 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| x | number | 是 | - | 矩形起点的X轴坐标 |
| y | number | 是 | - | 矩形起点的Y轴坐标 |
| width | number | 是 | - | 矩形宽度 |
| height | number | 是 | - | 矩形高度 |
# fillText(text, x, y)
绘制实心字符
# 参数
| 名称 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| text | string | 是 | - | 要绘制的字符 |
| x | number | 是 | - | 字符开始绘制的X轴坐标 |
| y | number | 是 | - | 字符开始绘制的Y轴坐标 |
# reset()
清空绘制数据
# update()
将所有绘制内容更新到画布上
# setLineDash(segments)
设置虚线样式
# 参数
| 名称 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| segments | number[] | 是 | - | 一组描述交替绘制线段和间距长度的数字。 |
# bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
创建三次方贝塞尔曲线路径
# 参数
| 名称 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| cp1x | number | 是 | - | 第一个贝塞尔控制点的 x 坐标 |
| cp1y | number | 是 | - | 第一个贝塞尔控制点的 y 坐标 |
| cp2x | number | 是 | - | 第二个贝塞尔控制点的 x 坐标 |
| cp2y | number | 是 | - | 第二个贝塞尔控制点的 y 坐标 |
| x | number | 是 | - | 结束点的 x 坐标 |
| y | number | 是 | - | 结束点的 y 坐标 |
# Bug & Tips
- 同时使用
border-radius和DrawableContext，可能会出现DrawableContext绘制内容超出border区域的情况。 - 如果绘制过多内容或者绘制复杂图形时，建议设置
android-layer-type为hardware，提高绘制效率。具体可参考android-layer-type文档 - iOS 平台绘制大量文字时相较于绘制其他内容性能会显著下降，可使用
text组件代替。
