{"id":13672694,"url":"https://github.com/dromara/yft-design","last_synced_at":"2025-05-15T00:11:40.274Z","repository":{"id":169252960,"uuid":"645157097","full_name":"dromara/yft-design","owner":"dromara","description":"基于fabric.js的开源版【稿定设计】。一款美观且功能强大的在线设计工具，具备海报设计和图片编辑功能。适用于多种场景，如海报生成、电商产品图制作、文章长图设计、视频/公众号封面编辑等 。A beautiful and powerful online design tool","archived":false,"fork":false,"pushed_at":"2025-05-07T03:01:01.000Z","size":53222,"stargazers_count":1256,"open_issues_count":14,"forks_count":251,"subscribers_count":11,"default_branch":"main","last_synced_at":"2025-05-07T03:39:10.763Z","etag":null,"topics":["canvas-editor","clipper","element-plus","fabric-editor","fabricjs","image-crop","online-design","online-editor","pdf-editor","pdf-parser","poster-design","psd-editor","psd-parse","text2path","vue3-fabric"],"latest_commit_sha":null,"homepage":"https://yft.design","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dromara.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-05-25T03:42:07.000Z","updated_at":"2025-05-07T02:59:32.000Z","dependencies_parsed_at":"2024-04-15T14:42:25.967Z","dependency_job_id":"a6cb6dc2-1d73-4589-b4de-dfc5ce7eee34","html_url":"https://github.com/dromara/yft-design","commit_stats":{"total_commits":850,"total_committers":14,"mean_commits":"60.714285714285715","dds":"0.16000000000000003","last_synced_commit":"d49e1a050c832dcc52c5990848222dab9ce78e74"},"previous_names":["more-strive/vue-fabric-draw","more-strive/yft-design","dromara/yft-design"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dromara%2Fyft-design","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dromara%2Fyft-design/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dromara%2Fyft-design/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dromara%2Fyft-design/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dromara","download_url":"https://codeload.github.com/dromara/yft-design/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254249206,"owners_count":22039029,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas-editor","clipper","element-plus","fabric-editor","fabricjs","image-crop","online-design","online-editor","pdf-editor","pdf-parser","poster-design","psd-editor","psd-parse","text2path","vue3-fabric"],"created_at":"2024-08-02T09:01:44.609Z","updated_at":"2025-05-15T00:11:35.266Z","avatar_url":"https://github.com/dromara.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# yft-design\n1，一款美观且功能强大的在线设计工具，具备海报设计和图片编辑功能，基于Canvas的开源版【稿定设计】。适用于多种场景，如海报生成、电商产品图制作、文章长图设计、视频/公众号封面编辑等。  \n2，适配稿定设计pdf还原，支持导入psd还原  \n3，可导出图片，svg，pdf  \n\u003cb\u003edemo：[https://demo.yft.design](https://demo.yft.design)\u003c/b\u003e  \n\u003cb\u003e pro：[https://yft.design](https://yft.design)\u003c/b\u003e  \n\u003cb\u003e wechat: 15972699417 \u003c/b\u003e\n\u003cb\u003e email: yft.design@163.com \u003c/b\u003e\n\n[介绍文章](https://juejin.cn/post/7238804998276087868)  \n[介绍视频](https://www.bilibili.com/video/BV1Zb421H7fT/?buvid=XY3B1253C1118CEF7B4DE80267E1AD86732A0\u0026from_spmid=main.space.0.0\u0026is_story_h5=false\u0026mid=TIDtF8b2h0f7OVMypYFAZQ%3D%3D\u0026p=1\u0026plat_id=116\u0026share_from=ugc\u0026share_medium=android\u0026share_plat=android\u0026share_session_id=56bc8446-776d-4fd6-a742-132ac702b09b\u0026share_source=WEIXIN\u0026share_tag=s_i\u0026spmid=united.player-video-detail.0.0\u0026timestamp=1719707202\u0026unique_k=Z8LQOMT\u0026up_id=149041192)\n\n![image](https://github.com/user-attachments/assets/b6918883-2675-409e-b908-fe50151e91fa)\n\n\u003ctable rules=\"none\" align=\"center\"\u003e\n   \u003ctr\u003e\n      \u003ctd\u003e\n         \u003ccenter\u003e\n            \u003cimg src=\"https://github.com/dromara/yft-design/assets/113762408/ce9d2c5b-0249-4fb3-8327-a533513e5619\" width=\"100%\"/\u003e\n            \u003cbr/\u003e\n            \u003cfont color=\"AAAAAA\"\u003epsd解析\u003c/font\u003e\n         \u003c/center\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n         \u003ccenter\u003e\n            \u003cimg src=\"https://github.com/dromara/yft-design/assets/113762408/8bd89208-cc9e-4b77-b976-1bce078e73bb\" width=\"100%\"/\u003e\n            \u003cbr/\u003e\n            \u003cfont color=\"AAAAAA\"\u003epdf解析\u003c/font\u003e\n         \u003c/center\u003e\n      \u003c/td\u003e\n   \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003ctable rules=\"none\" align=\"center\"\u003e\n   \u003ctr\u003e\n      \u003ctd\u003e\n         \u003ccenter\u003e\n            \u003cimg src=\"https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d443519bc05f4dfbb98bbcf7df7e6bef~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1907\u0026h=997\u0026s=639936\u0026e=jpg\u0026b=f8f0ee\" width=\"100%\" /\u003e\n            \u003cbr/\u003e\n            \u003cfont color=\"AAAAAA\"\u003epsd解析\u003c/font\u003e\n         \u003c/center\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n         \u003ccenter\u003e\n            \u003cimg src=\"https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/59e36b4a389246a1873372e80a94e7cb~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1917\u0026h=993\u0026s=655084\u0026e=png\u0026b=fcfbfb\" width=\"100%\" /\u003e\n            \u003cbr/\u003e\n            \u003cfont color=\"AAAAAA\"\u003epdf解析\u003c/font\u003e\n         \u003c/center\u003e\n      \u003c/td\u003e\n   \u003c/tr\u003e\n\u003c/table\u003e\n\n# 🚀 项目运行\n```\nnode \u003e= 16+\npnpm install  // 安装依赖\npnpm dev      // debug\npnpm build    // prod\n```\n\n# 📖 项目结构\n```\n├── app                           // 静态资源\n│   ├── fabricCanvas              // FabricCanvas\n│   ├── fabricControls            // 选择器\n│   ├── fabricRuler               // 标尺\n│   ├── fabricTool                // 拖动\n│   ├── guideLines                // 辅助线\n│   ├── hoverBorders              // 预选择\n│   └── wheelScroll               // 缩放\n├── assets                        // 静态资源\n│   ├── fonts                     // 在线字体文件\n│   └── styles                    // 样式\n├── components                    // 与业务逻辑无关的通用组件\n├── configs                       // 配置文件，如：颜色，字体。\n├── hooks                         // 供多个组件（模块）使用的 hooks 方法\n├── extension                     // 自定义fabirc对象\n│   ├── controls                  // 裁剪图片controls\n│   ├── mixins                    // 裁剪图片mixins\n│   └── object                    // 自定义元素对象\n├── mocks                         // mocks 数据\n├── plugins                       // 自定义的 Vue 插件\n├── types                         // 类型定义文件\n├── store                         // Pinia store，参考：https://pinia.vuejs.org/\n├── utils                         // 通用的工具方法\n├── views                         // 业务组件目录。\n│    ├── Canvas                   // 编辑器对象\n│    └── Editor                   // 编辑器模块\n└── worker                        // web worker\n```\n\n# 🧾 API接口文档\n### 使用后端文件解析器可以查看如下\n  - 支持pdf\n  - 支持psd\n  - 支持ai(pdf结构)\n  - 支持抠图\n  - cdr解析开发中  \n### 如果有需要可以联系作者 yft.design@163.com\n\n# 📚 功能列表\n### 基础功能\n- 历史记录（撤销、重做）\n- 快捷键\n- 右键菜单\n- 导入PDF(完美还原格式，不支持图片裁切导入)\n- 导入PSD(完美还原格式，支持部分特效还原，亮度，对比度，颜色覆盖)\n- 导入SVG(不支持tspan字体)\n- 导出本地文件（SVG、图片、PDF）\n### 页面编辑\n- 页面添加、删除\n- 页面顺序调整\n- 页面复制粘贴(TODO)\n- 背景设置（纯色、渐变、图片）\n- 设置画布尺寸\n- 网格线(TODO)\n- 标尺\n- 画布缩放、移动\n- 页面模板\n- 选择面板（隐藏元素、层级排序、元素命名）(TODO)\n### 元素编辑\n- 元素添加、删除\n- 元素复制粘贴\n- 元素拖拽移动\n- 元素旋转\n- 元素缩放\n- 元素多选（框选、点选）\n- 多元素组合\n- 多元素批量编辑(TODO)\n- 元素锁定(TODO)\n- 元素吸附对齐（移动和缩放）\n- 元素层级调整\n- 元素对齐到画布\n- 元素坐标、尺寸和旋转角度设置\n#### 文字\n- 文本编辑（颜色、高亮、字体、字号、加粗、斜体、下划线、删除线、对齐方式、项目符号、缩进、清除格式）\n- 行高\n- 字间距\n- 段间距\n- 填充色\n- 阴影\n- 透明度\n#### 图片\n- 滤镜\n- 着色（蒙版）\n- 翻转\n- 边框\n- 阴影\n- 裁切\n#### 形状\n- 填充色\n- 边框\n- 阴影\n- 透明度\n- 翻转\n- 编辑文字\n#### 线条\n- 颜色\n- 宽度\n- 样式\n\n## 联系作者\nwechat: 15972699417  \nemail:  yft.design@163.com\n\n\n## License\nLicensed under the MIT License.\n\n## 管理员\n\u003c!-- readme: collaborators -start --\u003e\n\u003ctable\u003e\n\u003ctr\u003e\n   \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/more-strive\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/113762408?v=4\" width=\"80;\" alt=\"more-strive\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003emore-strive(作者)\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/Qiu-Jun\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/24954362?v=4\" width=\"80;\" alt=\"Qiu-Jun\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eQiu-Jun\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/zjc2233\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/43945226?v=4\" width=\"80;\" alt=\"zjc2233\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003ezjc2233\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \n\u003c/tr\u003e\n\u003c/table\u003e\n\u003c!-- readme: collaborators -end --\u003e\n\n## 贡献者\n\u003c!-- readme: collaborators,contributors -start --\u003e\n\u003ctable\u003e\n\u003ctr\u003e\n   \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/more-strive\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/113762408?v=4\" width=\"80;\" alt=\"more-strive\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003emore-strive(作者)\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/Qiu-Jun\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/24954362?v=4\" width=\"80;\" alt=\"Qiu-Jun\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eQiu-Jun\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/zjc2233\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/43945226?v=4\" width=\"80;\" alt=\"zjc2233\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003ezjc2233\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/wohuweixiya\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/86701050?v=4\" width=\"80;\" alt=\"wohuweixiya\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003ewohuweixiya\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/zdw1011781461\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/42407561?v=4\" width=\"80;\" alt=\"zdw1011781461\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003ezdw1011781461\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/mjhcc365\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/44367932?v=4\" width=\"80;\" alt=\"mjhcc365\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003emjhcc365\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n\u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/ieleg\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/52823905?v=4\" width=\"80;\" alt=\"ieleg\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eieleg\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/qq404388339\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/34053528?v=4\" width=\"80;\" alt=\"qq404388339\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eqq404388339\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/sledgehuang\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/95006723?v=4\" width=\"80;\" alt=\"sledgehuang\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003esledgehuang\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\u003c/tr\u003e\n\u003c/table\u003e\n\u003c!-- readme: collaborators,contributors -end --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdromara%2Fyft-design","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdromara%2Fyft-design","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdromara%2Fyft-design/lists"}