前言
大家好，我们是 Gzm Design 的开发团队。
在日常工作中，我们长期依赖各类在线设计工具来制作海报、活动图和营销物料。这些工具功能成熟，但随着使用深入，一些问题也逐渐显现出来：
- 成本随着使用规模不断上升
- 无法私有化部署，系统与数据不可控
- 难以根据业务需求进行定制
尤其是在需要复用现有设计资产（例如 PSD 文件）时，这些问题会变得更加突出。
基于这些实际需求，我们开始思考一个更具体的问题：
能否在浏览器中，构建一个可控、可扩展、且真正可用的设计器？
Gzm Design 就是在这个背景下诞生的。它是一款基于 Vue3 与 LeaferJS 构建的开源在线设计器，支持 PSD 导入、拖拽编辑以及 AI 图片合成等能力。
为什么现有方案难以满足需求？
在动手实现之前，我们先对现有方案做了一轮比较系统的分析，问题主要集中在两个方向。
商业工具
以 Canva、创客贴为代表的在线设计工具，在功能和体验上已经非常成熟，但对于开发者和中小团队来说，仍然存在一些限制：
- 长期订阅成本较高
- 无法私有化部署，数据与系统不可控
- 扩展能力有限，难以进行深度定制
当业务逐渐复杂时，这些限制会成为实际阻力。
开源方案
相比之下，开源方案在可控性上更具优势，但在关键能力上仍存在缺口：
- 缺乏对 PSD 文件的解析与还原能力
- 在多图层、高复杂度场景下，渲染性能不足
- 编辑体验难以接近专业设计工具
这直接导致一个结果：已有设计资产难以复用，Web 端设计器难以真正落地。
为什么选择 LeaferJS？
我们曾对比过 Fabric.js 等老牌引擎，在尝试多个方案之后，我们最终选择了 LeaferJS 作为底层渲染引擎。做这个选择的核心原因，在于它在几个关键维度上达到了一个相对平衡的状态。
性能
海报设计通常包含大量图层、图片以及效果叠加，对渲染性能要求较高。
LeaferJS 在这一点上的表现比较稳定：
- 支持大规模图形渲染
- 在高密度图层场景下依然保持流畅交互
这使它能够承载设计器级别的使用场景。
开发体验
相比传统 Canvas 操作方式，LeaferJS 提供了更高层的抽象：
- API 简洁，结构更接近 UI 开发思路
- 对 TypeScript 支持良好
- 内置自动布局能力（Flow），降低复杂交互实现成本
在实际开发中，可以明显减少底层绘制逻辑带来的负担。
生态潜力
作为一个仍在快速发展的开源项目，LeaferJS 社区活跃度高，在响应速度方面也具备一定优势。
在开发过程中，我们的一些定制需求能够得到及时反馈（开发期间没少麻烦作者 哈哈~），这对于项目长期演进是一个加分项。
实现路径
为了让设计器真正可用，我们将整体实现拆分为三个层面：渲染、兼容与交互。
渲染层：构建稳定的图形基础能力
在底层，我们使用 LeaferJS 搭建渲染体系，实现了设计器所需的基础能力：
- 图层组织与管理
- 矢量图形编辑
- 滤镜效果与混合模式
- 多元素高效渲染
在复杂海报场景中，这一层主要负责保证性能和稳定性。
兼容层：实现 PSD 到画布对象的转换
针对设计资产复用问题，我们重点实现了 PSD 的解析与映射：
- 解析 PSD 文件中的图层结构与样式信息
- 将其转换为 Leafer 可识别的图形对象
- 保留原有层级关系与视觉表现
这一过程的目标很明确：
让 PSD 文件进入系统后即可被直接编辑
从而减少对传统设计软件的依赖。
交互层：将能力转化为具体功能
在上层，我们基于 Vue3 + Vite + TypeScript 构建组件化交互体系，将底层能力封装为可用功能：
- 拖拽与选区操作
- 画布缩放与视图控制
- 图层属性编辑（位置、旋转、样式等）
- 常用编辑行为的组件化封装
通过这种方式，既保证了开发效率，也为后续扩展提供了空间。
最终效果
在整体方案落地后，Gzm Design 在性能和使用体验上都达到了预期。
性能表现
- 高清海报加载时间控制在秒级
- 多图层场景下画布帧率稳定在 60 FPS 左右
能够满足日常设计编辑的流畅性需求。
使用体验
- 支持直接导入 PSD 并进行编辑
- 编辑、预览与导出均可在浏览器中完成
整体流程由多工具协作，简化为单一环境内完成。
实际应用
目前，Gzm Design 已在多个场景中得到使用：
- 电商与活动海报设计
- 二维码与营销物料生成
- 模板化内容快速制作
同时，作为一个开源项目，它也被众多Leafer开发者用于二次开发，成为了大家喜欢的图形编辑基础框架。
结语
Gzm Design 的实现，并不是在“重新发明设计工具”，而是一次相对务实的工程实践：
- 将已有设计资产迁移到 Web 环境
- 在性能与复杂度之间做出平衡
- 用更轻量的方式完成核心需求
LeaferJS 在其中承担的是基础能力的支撑角色，使这一过程具备可实现性。
