CANVAS
API_LEVEL
3.0
开始支持,API 兼容性请参考 API_LEVEL。
Canvas 画布。
当前 Canvas 的能力包括:
- 基础图形绘制,线、点、矩形、矩形填充、椭圆、扇形、多边形
- 图片绘制
- 文本绘制
- 画笔
- 画布纵向堆叠,最多可以叠加三层
- 清理画布
- 支持
addEventListener
方法,监听用户交互事件
创建 UI 控件
import { createWidget, widget } from '@zos/ui'
const canvas = createWidget(widget.CANVAS, Param)
Param: object
属性 | 说明 | 是否必须 | 类型 |
---|---|---|---|
x | Canvas x 坐标 | 是 | number |
y | Canvas y 坐标 | 是 | number |
w | Canvas 画布宽度 | 是 | number |
h | Canvas 画布高度 | 是 | number |
const canvas = createWidget(widget.CANVAS, {
x: 0,
y: 0,
w: 100,
h: 100
})
canvas.setPaint
设置画笔
setPaint(Param: object): void
Param: object
属性 | 说明 | 是否必须 | 类型 |
---|---|---|---|
color | 颜色 | 是 | number |
line_width | 线宽 | 是 | number |
canvas.setPaint({
color: 0xff0000,
line_width: 10
})
canvas.drawPixel
绘制单个像素点
drawPixel(Param: object): void
Param: object
属性 | 说明 | 是否必须 | 类型 |
---|---|---|---|
x | x 坐标 | 是 | number |
y | y 坐标 | 是 | number |
color | 颜色 | 否 | number |
canvas.drawPixel({
x: 0,
y: 0,
color: 0xffffff
})
canvas.drawLine
绘制线段,线宽和颜色通过 setPaint
画笔设置
drawLine(Param: object): void
Param: object
属性 | 说明 | 是否必须 | 类型 |
---|---|---|---|
x1 | 起始点 x 坐标 | 是 | number |
y1 | 起始点 y 坐标 | 是 | number |
x2 | 结束点 x 坐标 | 是 | number |
y2 | 结束点 y 坐标 | 是 | number |
color | 颜色 | 否 | number |
canvas.drawLine({
x1: 100,
y1: 100,
x2: 200,
y2: 100,
color: 0xffffff
})
Rectangle
- 绘制矩形路径,线宽和颜色通过
setPaint
画笔设置
strokeRect(Param: object): void
- 绘制矩形填充
drawRect(Param: object): void
Param: object
属性 | 说明 | 是否必须 | 类型 |
---|---|---|---|
x1 | 起始点 x 坐标 | 是 | number |
y1 | 起始点 y 坐标 | 是 | number |
x2 | 结束点 x 坐标 | 是 | number |
y2 | 结束点 y 坐标 | 是 | number |
color | 颜色 | 否 | number |
canvas.drawRect({
x1: 60,
y1: 20,
x2: 120,
y2: 60,
color: 0xff00ff
})
Circle
- 绘制圆形路径,线宽和颜色通过
setPaint
画笔设置
strokeCircle(Param: object): void
- 绘制圆形填充
drawCircle(Param: object): void
Param: object
属性 | 说明 | 是否必须 | 类型 |
---|---|---|---|
center_x | 圆心 x 坐标 | 是 | number |
center_y | 圆心 y 坐标 | 是 | number |
radius | 半径 | 是 | number |
color | 颜色 | 否 | number |
canvas.drawCircle({
center_x: 80,
center_y: 140,
radius: 40,
color: 0xfff400
})
Ellipse
- 绘制椭圆路径,线宽和颜色通过
setPaint
画笔设置
strokeEllipse(Param: object): void
- 绘制椭圆填充
drawEllipse(Param: object): void
Param: object
属性 | 说明 | 是否必须 | 类型 |
---|---|---|---|
center_x | 椭圆中心 x 坐标 | 是 | number |
center_y | 椭圆中心 y 坐标 | 是 | number |
radius_x | x 方向轴半径 | 是 | number |
radius_y | y 方向轴半径 | 是 | number |
color | 颜色 | 否 | number |
canvas.drawEllipse({
center_x: 80,
center_y: 300,
radius_x: 60,
radius_y: 80,
color: 0xff0000
})
Arc
与 Ellipse 相比多了 start_angle
和 end_angle
,从椭圆中心来截取椭圆的一部分作为扇形。
- 绘制路径
strokeArc(Param: object): void
- 绘制填充
drawArc(Param: object): void
Param: object
属性 | 说明 | 是否必须 | 类型 |
---|---|---|---|
center_x | 椭圆中心 x 坐标 | 是 | number |
center_y | 椭圆中心 y 坐标 | 是 | number |
radius_x | x 方向轴半径 | 是 | number |
radius_y | y 方向轴半径 | 是 | number |
start_angle | 开 始角度(3 点钟方向为 0 度) | 是 | number |
end_angle | 开始角度(3 点钟方向为 0 度) | 是 | number |
color | 颜色 | 否 | number |
canvas.drawArc({
center_x: 280,
center_y: 200,
radius_x: 60,
radius_y: 80,
start_angle: -150,
end_angle: -30,
color: 0xfff400
})
Polygon
- 绘制多边形路径,线宽和颜色通过
setPaint
画笔设置
strokePoly(Param: object): void