图形插件
图形插件为画布提供可绘制的图形元素。每个插件注册一个工具栏按钮,点击后在画布上拖拽创建元素。
插件列表
| 插件 | 类名 | 注册标识 | 元素类型 | 详细文档 |
|---|---|---|---|---|
| 矩形 | RectPlugin | 'rect-plugin' | 'rect' | 矩形 |
| 文本 | TextPlugin | 'text-plugin' | 'text' | 文本 |
| 线条 | LinePlugin | 'line-plugin' | 'line' | 线条 |
| 表格 | TablePlugin | 'table-plugin' | 'table' | 表格 |
| 二维码 | QrcodePlugin | 'qr-plugin' | 'qr' | 二维码 |
| 条形码 | BarcodePlugin | 'barcode-plugin' | 'barcode' | 条形码 |
| 图表 | ChartPlugin | 'chart-plugin' | 'chart' | 图表 |
二维码命名注意
二维码插件的类名是 QrcodePlugin,但注册标识是 'qr-plugin'(不是 'qrcode-plugin'),元素类型是 'qr'(不是 'qrcode')。
安装图形插件
typescript
import {
RectPlugin, TextPlugin, LinePlugin, TablePlugin,
QrcodePlugin, BarcodePlugin, ChartPlugin,
} from 'vkedit'
host.installPlugin('rect-plugin', RectPlugin)
host.installPlugin('text-plugin', TextPlugin)
host.installPlugin('line-plugin', LinePlugin)
host.installPlugin('table-plugin', TablePlugin)
host.installPlugin('qr-plugin', QrcodePlugin)
host.installPlugin('barcode-plugin', BarcodePlugin)
host.installPlugin('chart-plugin', ChartPlugin)按需安装
生产环境中建议只安装需要的图形插件,减少包体积。ChartPlugin 依赖 ECharts(~1MB),不需要图表功能时不要安装。
创建元素
图形插件安装后,点击工具栏按钮在画布上拖拽即可创建元素。也可通过代码创建:
typescript
import { AddElementCommand } from 'vkedit'
const elementManager = host.getPlugin('element-manager-plugin')
const element = elementManager.createElement('rect')
element.xmm = 10
element.ymm = 10
element.wmm = 50
element.hmm = 30
host.executeCommand(new AddElementCommand(host, element))详见 元素创建。