Skip to content

二维码(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)

属性类型默认值说明
xmmnumber5X 坐标(毫米)
ymmnumber5Y 坐标(毫米)
wmmnumber20宽度(毫米)
hmmnumber20高度(毫米,自动等于 wmm)
rotationnumber0旋转角度(度)
visiblebooleantrue是否可见

二维码为正方形

二维码元素的 hmm 会自动设为与 wmm 相同的值,保持正方形。

二维码特有属性

属性类型默认值说明
contentstring'https://example.com'编码内容(URL 或文本)
foregroundstring'#000000'前景色(码点颜色)
backgroundstring'#ffffff'背景色
marginMMnumber0.2边距(毫米)

二维码容错

二维码使用 qrcode 库的默认容错级别。内容越长,码点越密。建议 wmm 不小于 20mm 以保证可扫描性。

下一步

基于 MIT 许可发布