Skip to content

图形插件

图形插件为画布提供可绘制的图形元素。每个插件注册一个工具栏按钮,点击后在画布上拖拽创建元素。

插件列表

插件类名注册标识元素类型详细文档
矩形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))

详见 元素创建

下一步

基于 MIT 许可发布