Gzm Design：开源神器！用 Vue3、Vite4、TypeScript 革新海报设计，免费开源的海报设计器，主流技术打造，轻松高效

嗨，大家好，我是小华同学，关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法

海报设计在各个领域都有着广泛的应用，无论是商业广告、活动宣传还是个人创意表达。今天要给大家介绍一款免费开源的海报设计器——Gzm Design，它基于最新的主流技术开发，为用户提供了丰富的功能，让海报设计变得轻松又高效。

Gzm Design的技术基础

Gzm Design采用了当下非常流行的技术栈进行开发，其中包括了Vue3、Vite4以及TypeScript等。Vue3作为一个先进的JavaScript框架，为项目提供了高效的组件化开发模式，使得代码的结构更加清晰，易于维护和扩展。Vite4则是一个快速的构建工具，大大提升了项目的开发效率和构建速度。而TypeScript的使用，为代码带来了类型安全的保障，减少了运行时错误的可能性，提高了代码的质量。

功能亮点

PSD文件处理能力

• PSD导入功能
• PSD解析功能

丰富的编辑功能

• 分组与层级处理

• 元素编辑功能：

  • 文本编辑
  • 图片编辑
  • 元素的其他操作

文件导入与导出功能

• 文件导入
• 文件导出

工具支持

• 标尺工具与钢笔工具
• 二维码与条形码工具

画布操作功能

• 画布缩放、拖动模式：用户可以根据自己的需求对画布进行缩放和拖动操作，方便查看和编辑不同区域的元素。
• 画布尺寸修改、多背景填充：如果需要调整海报的整体尺寸或者为画布添加多个背景填充，Gzm Design也能够轻松实现。

应用场景

1. 商业海报设计
2. 活动宣传海报
3. 个人创意表达

项目效果

具体使用方法

获取项目代码

• 如果想要使用Gzm Design，可以通过以下两种方式获取项目代码：

  • GitHub方式：使用命令 git clone https://github.com/LvHuaiSheng/gzm - design.git。
  • Gitee方式：使用命令 git clone https://gitee.com/sourcenet/gzm - design.git。

安装依赖

• 在获取项目代码后，进入项目目录，例如使用命令 cd gzm - design，然后执行 pnpm install 来安装项目所需的依赖。

运行项目

• 安装依赖完成后，可以使用命令 pnpm dev 来运行项目，这样就可以在本地开始使用Gzm Design进行海报设计了。

打包项目

• 如果想要将项目打包发布或者部署到其他环境，可以使用命令 pnpm build。

同类项目对比

liumingye/fabric

• 这是一款基于fabirc的高性能编辑器。它在性能方面表现出色，能够快速处理复杂的图形编辑任务。然而，与Gzm Design相比，它可能在PSD文件处理方面没有那么全面，例如在PSD导入和解析方面可能没有Gzm Design的功能丰富。而且Gzm Design在海报设计的特定功能上，如二维码工具、条形码工具等是Gzm Design特有的，在制作商业海报等场景下更具优势。

poster - design

• 这是一款基于dom的在线海报图片设计器。它在基于dom的操作上有自己的特点，但在技术架构上与Gzm Design有所不同。Gzm Design采用的Vue3、Vite4和TypeScript等技术使得其在开发效率和代码质量上有一定的优势。同时，Gzm Design在PSD文件处理、元素编辑的丰富度上可能更胜一筹，例如在文本编辑方面的多种属性设置以及富文本支持等功能。

vue - fabric - editor

• 这是一款基于fabric.js和Vue的图片编辑器。它在图片编辑方面有一定的优势，但在整体的海报设计功能上可能不如Gzm Design全面。Gzm Design除了图片编辑功能外，还有丰富的文本编辑、PSD文件处理、多种工具支持以及广泛的文件导入导出功能等，在海报设计的综合功能上更加完善。

总结

Gzm Design以其丰富的功能、易用的操作方法和广泛的应用场景，在海报设计领域是一个非常值得尝试的开源项目。无论是专业设计师还是个人创作者，都可以利用它来制作出精美的海报作品。

项目地址

https://gitee.com/sourcenet/gzm-design