vkedit：Vue3 Web 图形编辑器 npm 包，支持标签与二维码设计

🎯 快速开始

📦 通过 npm 安装

vkedit 已发布到 npm 仓库，可以通过 npm、pnpm 或 yarn 一键安装：

# 使用 pnpm（推荐）
pnpm add vkedit vue konva vue-konva pinia

# 或使用 npm
npm install vkedit vue konva vue-konva pinia

# 或使用 yarn
yarn add vkedit vue konva vue-konva pinia

npm 包信息：

• 包名：vkedit
• 最新版本：查看 npmjs.com
• 依赖要求：Vue 3.5+、Node.js 20.19+

1. 安装依赖

首先，确保你的项目已经安装了 Vue 3 和必要的依赖。

2. 配置项目入口

在 main.ts 中配置 Vue 应用，导入 vkedit 的样式文件：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import VueKonva from 'vue-konva'
import 'vkedit/dist/vkedit.css'

const app = createApp(App)
app.use(createPinia())
app.use(VueKonva)
app.mount('#app')

3. 基础使用示例

创建一个简单的编辑器组件，直接从 npm 包导入：

<template>
  <Vkedit :host="host" :show-toolbox="true" :show-property-panel="true" :show-toolbar="true" />
</template>

<script setup lang="ts">
import { createEditorHost, Vkedit } from 'vkedit'
import { RectPlugin, TextPlugin, QrcodePlugin, BarcodePlugin } from 'vkedit'

// 创建编辑器宿主
const host = createEditorHost({ exportPlugin: true, previewPlugin: true, importPlugin: true })

// 安装常用插件
host
  .installPlugin('rect-plugin', RectPlugin)
  .installPlugin('text-plugin', TextPlugin)
  .installPlugin('qr-plugin', QrcodePlugin)
  .installPlugin('barcode-plugin', BarcodePlugin)

// 设置画布尺寸为 A4 纸张
host.setStatus({ dpm: 8, width: 210 * 8, height: 297 * 8, zoom: 0.4 })
</script>

🌟 npm 包特性

• 开箱即用：无需配置，安装即可使用
• 按需加载：支持 Tree Shaking，只打包使用的功能
• 完整类型：TypeScript 类型定义，智能提示友好
• 持续更新：npm 包定期更新，修复问题并添加新功能

🎨 核心功能使用指南

1. 图形元素操作

添加元素

• 点击左侧工具栏的元素图标
• 在画布上拖拽绘制元素
• 或使用快捷键：
  • R: 矩形工具
  • T: 文本工具
  • Q: 二维码工具
  • B: 条形码工具

编辑元素

• 点击元素选中它
• 使用控制点调整大小和旋转
• 在右侧属性面板修改详细属性
• 右键菜单提供快捷操作

对齐与分布

• 选中多个元素
• 使用顶部工具栏的对齐按钮
• 或右键菜单选择对齐选项

2. 撤销与重做

• Ctrl+Z: 撤销上一步操作
• Ctrl+Y: 重做已撤销的操作
• 或使用工具栏的撤销/重做按钮

3. 导入与导出

• 导出: 点击工具栏的导出按钮，选择导出格式（JSON/PNG/PDF）
• 导入: 点击工具栏的导入按钮，选择之前导出的 JSON 文件

4. 画布操作

• 缩放: 使用鼠标滚轮或工具栏的缩放滑块
• 平移: 按住空格键拖拽画布
• 重置视图: 点击工具栏的'重置视图'按钮

📝 实战案例

案例 1：设计产品标签

应用场景：电商产品标签、物流标签、价格标签

解决方案：

// 创建标签编辑器
const host = createEditorHost({ exportPlugin: true, previewPlugin: true })

// 安装标签设计所需插件
host
  .installPlugin('rect-plugin', RectPlugin) // 边框、背景
  .installPlugin('text-plugin', TextPlugin) // 产品名称、规格
  .installPlugin('qr-plugin', QrcodePlugin) // 产品二维码
  .installPlugin('barcode-plugin', BarcodePlugin) // 商品条形码

// 设置标签尺寸（100mm x 60mm）
host.setStatus({ dpm: 8, width: 100 * 8, height: 60 * 8 })

效果：

• 5 分钟内完成专业标签设计
• 支持批量打印和数据导出
• 模板可复用，降低 70% 设计成本

案例 2：制作二维码名片

应用场景：个人名片、公司名片、VIP 卡、联系方式分享

解决方案：

// 创建二维码设计器
const host = createEditorHost({ exportPlugin: true })

host
  .installPlugin('text-plugin', TextPlugin) // 姓名、职位、联系方式
  .installPlugin('qr-plugin', QrcodePlugin) // 个人信息二维码
  .installPlugin('rect-plugin', RectPlugin) // 名片边框

// 设置画布尺寸
host.setStatus({ dpm: 8, width: 90 * 8, height: 55 * 8 })

效果：

• 扫码即可保存联系方式到手机
• 支持高清导出，打印效果完美
• 批量生成名片，适合企业应用

案例 3：设计发票/收据

应用场景：电子发票、收据、凭证、报表

解决方案：

import { TablePlugin, LinePlugin } from 'vkedit'

// 创建票据设计器
const host = createEditorHost({ exportPlugin: true, baseCanvasPropertyPanel: true })

host
  .installPlugin('text-plugin', TextPlugin) // 发票抬头、金额
  .installPlugin('table-plugin', TablePlugin) // 明细表格
  .installPlugin('line-plugin', LinePlugin) // 分隔线
  .installPlugin('rect-plugin', RectPlugin) // 边框

// 设置 A5 纸张尺寸
host.setStatus({ dpm: 8, width: 148 * 8, height: 210 * 8 })

效果：

• 表格自动对齐，专业排版
• 支持动态数据填充
• 一键导出 PDF 格式

🛠️ 高级技巧

1. 自定义快捷键

// 监听键盘事件
host.on('stage:keydown', (event) => {
  if (event.ctrlKey && event.key === 's') {
    event.preventDefault()
    // 执行保存操作
    const json = host.toJSON()
    console.log('保存设计:', json)
  }
})

2. 监听编辑器事件

// 监听元素添加事件
host.on('element:added', (payload) => {
  console.log('新元素添加:', payload.element)
})

// 监听选择变化
host.on('selection:changed', (payload) => {
  console.log('选中元素数量:', payload.selectedIds.length)
})

3. 批量操作

import { BatchCommand, UpdatePropertyCommand } from 'vkedit'

// 批量修改多个元素的属性
const commands = [
  new UpdatePropertyCommand(element1, 'fill', '#ff0000'),
  new UpdatePropertyCommand(element2, 'fill', '#00ff00'),
  new UpdatePropertyCommand(element3, 'fill', '#0000ff')
]
const batchCommand = new BatchCommand(commands)
host.executeCommand(batchCommand)

❓ 常见问题

Q: 如何设置画布背景？

A: 点击画布空白处，在右侧属性面板中设置背景颜色或背景图片。

Q: 如何调整元素层级？

A: 右键点击元素，选择'置于顶层'、'置于底层'或调整层级。

Q: 如何导出高清图片？

A: 在导出图片时，设置较高的缩放比例（如 2x 或 3x）。

Q: 如何自定义插件？

A: 参考 README 中的'开发自定义插件'部分，实现 IEditorPlugin 接口。

🚀 技术优势

1. 🔧 插件化架构
   • 按需加载功能模块，减少包体积
   • 支持自定义插件开发，满足个性化需求
   • 插件间松耦合，易于维护和扩展
2. 🎯 精确控制
   • 像素级精确定位和操作
   • 支持毫米/英寸等多种单位
   • 智能对齐和吸附功能
3. ⚡ 高性能
   • 基于 Konva.js 优化的渲染引擎
   • 支持百万级图形元素流畅操作
   • 内存优化，长时间运行不卡顿
4. 📦 开箱即用
   • 内置 20+ 常用图形元素
   • 支持多种导出格式（JSON/PNG/PDF）
   • 完整的文档和示例代码

📊 性能对比

📚 更多资源

• 完整 API 文档: 查看 README.md 中的 API 参考部分
• 插件开发: 参考 README 中的'开发指南'部分
• 示例项目: 查看项目中的 playground/ 目录
• GitHub 仓库: https://github.com/pwg-code/vkedit