Skip to content

画布与坐标系

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)说明
A4210 × 297标准 A4
A5148 × 210标准 A5
名片90 × 55标准名片
标签100 × 60常见产品标签
票据148 × 210A5 尺寸票据

标尺系统

vkedit 内置标尺系统,显示在画布顶部和左侧。标尺单位为毫米,由核心组件 RulerLayer 渲染,无需额外安装插件。

网格与吸附

SnapPlugincreateEditorHost() 默认安装,提供元素拖拽时的辅助线吸附功能。

吸附开关通过 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(按当前缩放换算)。

下一步

基于 MIT 许可发布