---

一、详细介绍

Vue开源在线图片海报设计工具网站源码

一款美观且功能强大的在线设计工具，具备海报设计和图片编辑功能，基于Canvas的开源版【稿定设计】。适用于多种场景，如海报生成、电商产品图制作、文章长图设计、视频/公众号封面编辑等。适配稿定设计pdf还原，支持导入psd还原。可导出图片，svg，pdf。

源码功能：

基础功能

历史记录：支持撤销与重做操作，方便用户修改。

快捷键：提供多种快捷键以提升操作效率。

右键菜单：为用户提供便捷的操作选项。

文件导入导出

导入PDF：能够完美还原格式(不支持图片裁切导入)。

导入PSD：不仅完美还原格式，还支持部分特效还原，如亮度、对比度、颜色覆盖。

导入SVG：支持大部分SVG元素(不支持tspan字体)。

导出本地文件：可将设计导出为SVG、图片或PDF格式。

页面编辑

页面添加、删除：灵活管理页面数量。

页面顺序调整：自由调整页面展示顺序。

背景设置：支持纯色、渐变及图片背景设置。

画布尺寸设置：自定义画布大小以适应不同需求。

标尺与画布缩放移动：精确控制设计元素的位置与比例。

元素编辑

元素添加、删除：随心增减设计元素。

元素复制粘贴：快速复用设计内容。

元素拖拽移动：直观调整元素位置。

元素旋转与缩放：精细调整元素角度与大小。

多选与组合：支持框选、点选以及多元素组合操作。

吸附对齐：确保元素在移动和缩放时保持整齐。

层级调整：清晰管理元素之间的层次关系。

文字编辑

提供丰富的文本编辑功能，包括颜色、高亮、字体、字号、加粗、斜体、下划线、删除线、对齐方式、项目符号、缩进、清除格式等。

图片处理

支持滤镜、着色(蒙版)、翻转、边框、阴影、裁切等功能。

形状绘制

包含填充色、边框、阴影、透明度、翻转、编辑文字等功能。

线条绘制

提供颜色、宽度、样式选择。

源码特色

开源性：遵循MIT License，允许自由使用和修改。

多功能性：集成了海报设计、图片编辑等多种功能，满足多样化需求。

扩展性强：支持多种文件格式的导入导出，未来还将支持更多功能(如cdr解析)。

用户体验佳：具备历史记录、快捷键、右键菜单等功能，极大提升了用户操作体验。

二、效果展示

1.部分代码

代码如下（示例）：

项目结构
├── app                           // 静态资源
│   ├── fabricCanvas              // FabricCanvas
│   ├── fabricControls            // 选择器
│   ├── fabricRuler               // 标尺
│   ├── fabricTool                // 拖动
│   ├── guideLines                // 辅助线
│   ├── hoverBorders              // 预选择
│   └── wheelScroll               // 缩放
├── assets                        // 静态资源
│   ├── fonts                     // 在线字体文件
│   └── styles                    // 样式
├── components                    // 与业务逻辑无关的通用组件
├── configs                       // 配置文件，如：颜色，字体。
├── hooks                         // 供多个组件（模块）使用的 hooks 方法
├── extension                     // 自定义fabirc对象
│   ├── controls                  // 裁剪图片controls
│   ├── mixins                    // 裁剪图片mixins
│   └── object                    // 自定义元素对象
├── mocks                         // mocks 数据
├── plugins                       // 自定义的 Vue 插件
├── types                         // 类型定义文件
├── store                         // Pinia store，参考：
├── utils                         // 通用的工具方法
├── views                         // 业务组件目录。
│    ├── Canvas                   // 编辑器对象
│    └── Editor                   // 编辑器模块
└── worker                        // web worker

2.效果图展示

---

三、学习资料下载

蓝奏云：https://qumaw.lanzoul.com/i9urB2r482va