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 |