二维码(QR Code)
二维码元素用于在画布上生成 QR 码,支持自定义编码内容(URL 或文本)和前景/背景颜色。常用于产品标签、票据、名片等场景。
安装
typescript
import { QrcodePlugin } from 'vkedit'
host.installPlugin('qr-plugin', QrcodePlugin)安装后,工具栏会显示二维码按钮。点击按钮后即可在画布上创建默认二维码。
命名注意
二维码插件的类名是 QrcodePlugin,但注册标识是 'qr-plugin',元素类型是 'qr'。
通过代码创建
typescript
import { AddElementCommand } from 'vkedit'
const elementManager = host.getPlugin('element-manager-plugin')
const qr = elementManager.createElement('qr')
// 设置位置(毫米)
qr.xmm = 10
qr.ymm = 10
// 设置尺寸(毫米,二维码为正方形,wmm 和 hmm 相同)
qr.wmm = 30
qr.hmm = 30
// 设置内容
qr.content = 'https://vkedit.example.com'
// 设置颜色
qr.foreground = '#000000' // 码点颜色
qr.background = '#ffffff' // 背景色
host.executeCommand(new AddElementCommand(host, qr))自定义颜色
可以创建彩色二维码以匹配品牌风格:
typescript
qr.content = '产品编号:SKU-2026-0001'
qr.foreground = '#6366f1' // 品牌紫色码点
qr.background = '#ffffff'属性
基础属性(继承自 BaseGraphicElement)
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
xmm | number | 5 | X 坐标(毫米) |
ymm | number | 5 | Y 坐标(毫米) |
wmm | number | 20 | 宽度(毫米) |
hmm | number | 20 | 高度(毫米,自动等于 wmm) |
rotation | number | 0 | 旋转角度(度) |
visible | boolean | true | 是否可见 |
二维码为正方形
二维码元素的 hmm 会自动设为与 wmm 相同的值,保持正方形。
二维码特有属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
content | string | 'https://example.com' | 编码内容(URL 或文本) |
foreground | string | '#000000' | 前景色(码点颜色) |
background | string | '#ffffff' | 背景色 |
marginMM | number | 0.2 | 边距(毫米) |
二维码容错
二维码使用 qrcode 库的默认容错级别。内容越长,码点越密。建议 wmm 不小于 20mm 以保证可扫描性。