画布与坐标系
vkedit 面向打印设计场景,画布以毫米为基本单位。理解 DPM 概念是正确使用 vkedit 的基础。
DPM(每毫米点数)
DPM(Dots Per Millimeter)定义了画布的渲染精度:
像素 = 毫米 × DPM| DPM | 用途 | 1mm = ?px |
|---|---|---|
| 8 | 屏幕预览(默认) | 8px |
| 12 | 普通打印 | 12px |
| 24 | 高清打印 | 24px |
默认 DPM
vkedit 默认 DPM 为 8,适合屏幕预览。导出图片时像素比由 ExportPlugin 的 pixelRatio 属性控制(默认 2)。
画布状态
画布的所有尺寸和状态都存储在 host.status 对象中,通过 host.setStatus() 修改:
typescript
// 设置画布尺寸(毫米)
host.setStatus({ wmm: 210, hmm: 297 }) // A4 纵向
// 设置 DPM(会影响像素宽高自动重算)
host.setStatus({ dpm: 12 }) // 普通打印精度
// 设置缩放比例
host.setStatus({ zoom: 0.5 }) // 50%setStatus 会自动联动计算:修改 wmm/hmm 时自动重算 width/height(像素),修改 dpm 时自动重算所有像素尺寸。
读取画布状态
typescript
const { wmm, hmm, width, height, dpm, zoom } = host.status
// wmm/hmm: 毫米尺寸
// width/height: 像素尺寸(= 毫米 × DPM)
// dpm: 每毫米点数
// zoom: 缩放比例常见纸张尺寸
| 名称 | 尺寸(mm) | 说明 |
|---|---|---|
| A4 | 210 × 297 | 标准 A4 |
| A5 | 148 × 210 | 标准 A5 |
| 名片 | 90 × 55 | 标准名片 |
| 标签 | 100 × 60 | 常见产品标签 |
| 票据 | 148 × 210 | A5 尺寸票据 |
标尺系统
vkedit 内置标尺系统,显示在画布顶部和左侧。标尺单位为毫米,由核心组件 RulerLayer 渲染,无需额外安装插件。
网格与吸附
SnapPlugin 由 createEditorHost() 默认安装,提供元素拖拽时的辅助线吸附功能。
吸附开关通过 host.status.snapToGrid 控制:
typescript
// 开启/关闭吸附
host.setStatus({ snapToGrid: true }) // 开启
host.setStatus({ snapToGrid: false }) // 关闭也可通过 SnapPlugin 实例切换:
typescript
import type { SnapPlugin } from 'vkedit'
const snapPlugin = host.getPlugin<SnapPlugin>('snap-plugin')
snapPlugin?.toggleSnap() // 切换吸附开关
snapPlugin?.isSnapEnabled() // 查询当前状态吸附行为
吸附功能在元素拖拽时自动工作,将选中元素对齐到其他元素的边缘和中线。吸附阈值固定为 5px(按当前缩放换算)。