dromara / yft-design Goto Github PK

一款美观且功能强大的在线设计工具，具备海报设计和图片编辑功能，基于fabric.js的开源版【稿定设计】。适用于多种场景，如海报生成、电商产品图制作、文章长图设计、视频/公众号封面编辑等。A beautiful and powerful online design tool

Home Page: https://yft.design

License: MIT License

JavaScript 5.80% HTML 2.41% Vue 21.28% SCSS 0.12% CSS 0.47% TypeScript 69.91% Dockerfile 0.01%

element-plus fabricjs canvas-editor fabric-editor text2path clipper image-crop vue3-fabric pdf-parser psd-parse

yft-design's Introduction

yft-design

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

作者找工作中,有岗位请联系 [email protected]

psd解析

pdf解析

psd解析

pdf解析

🚀 项目运行

node >= 16+
npm install
npm run dev
npm run build

📖 项目结构

├── 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，参考：https://pinia.vuejs.org/
├── utils                         // 通用的工具方法
├── views                         // 业务组件目录。
│    ├── Canvas                   // 编辑器对象
│    └── Editor                   // 编辑器模块
└── worker                        // web worker

🧾 API接口文档

使用后端文件解析器可以查看如下

支持pdf
支持psd
支持ai(pdf结构)
支持抠图
cdr解析开发中

如果有需要可以联系作者 [email protected]

📚 功能列表

基础功能

历史记录（撤销、重做）
快捷键
右键菜单
导入PDF(完美还原格式，不支持图片裁切导入)
导入PSD(完美还原格式，支持部分特效还原，亮度，对比度，颜色覆盖)
导入SVG(不支持tspan字体)
导出本地文件（SVG、图片、PDF）

页面编辑

页面添加、删除
页面顺序调整
页面复制粘贴(TODO)
背景设置（纯色、渐变、图片）
设置画布尺寸
网格线(TODO)
标尺
画布缩放、移动
页面模板
选择面板（隐藏元素、层级排序、元素命名）(TODO)

元素编辑

元素添加、删除
元素复制粘贴
元素拖拽移动
元素旋转
元素缩放
元素多选（框选、点选）
多元素组合
多元素批量编辑(TODO)
元素锁定(TODO)
元素吸附对齐（移动和缩放）
元素层级调整
元素对齐到画布
元素坐标、尺寸和旋转角度设置

文字

文本编辑（颜色、高亮、字体、字号、加粗、斜体、下划线、删除线、对齐方式、项目符号、缩进、清除格式）
行高
字间距
段间距
填充色
阴影
透明度

图片

滤镜
着色（蒙版）
翻转
边框
阴影
裁切

形状

填充色
边框
阴影
透明度
翻转
编辑文字

线条

颜色
宽度
样式

联系作者

wechat: 15972699417
email: [email protected]

License

Licensed under the MIT License.

管理员

_Qiu-Jun

_zjc2233

_more-strive

贡献者

_Qiu-Jun	_zjc2233	_more-strive	_wohuweixiya	_{zdw1011781461}	_mjhcc365
_ieleg	_qq404388339	_sledgehuang

yft-design's People

Contributors

Stargazers

Watchers

Forkers

lvhuaisheng make-dream wuliang-1 nihaojob lss5270 bamzc ykf904839896 hy-vae umanda zuotianorg vinkovsky bigface2019 acglab git-tengsun 2410024100 alexzeng1981 touxing aiical jipengju-github tommylitommy huiguyy freecodersix ammeto clickear moyangit itsharex nangongamo qq840873731 biangenhui xiaodongning xilongpei blkjs x1ng-z kiwh77 solmyr118 yimiqidage qiu-jun dailylearning alpseroglu kekewind bluechenchenchen anyhuang wuwenrui kendrickcheung007 vcat-dev popoimm s5130112ie kdt-hata rishabhnath programlife555 hopkinson mrold ericzhang0215 platform-kit hlovingness p1an8 shunyue1320 two-ice royallei001 ozitrance haulht pdshwc muou55555 jhanay jinbiaode codon19 linecode etherfurnace yqjack gilinfen javahuang zsnmwy jee-zh wohuweixiya red12345678 cooperrjm somtomking zjdyzww xmcase asumaroks yjyang1990 yyjjls geekhuyang yangzongtai neosjs lorsque-sir keyzf michael-py001 staroflife wxh16144-forks tryfashion farmer1979 wanpan11 sunsetmkt tangxiaochu123230 zonewancheng fish-liu ghostcatcg allenheyulong denggy

yft-design's Issues

实时获取元素的坐标和宽高

作者你好，我想实时获取元素（文本、图片）的基于白色画板左上角的坐标和元素的宽高，请问怎么获取呢？

Add page error

Add new page will cause an error of not being able to use zoom

【Bug】复制、粘贴结果不正确

试着在网页上先复制一段文字，然后在编辑器中画布区域进行图形复制、左侧搜索等输入框区域进行粘贴，结果不正确。

导出jpeg格式图片，背景色变成黑色，期望按照画布真实背景色生成

这是导出后的jpeg图片情况

it seems server codes are not open source, is that correct?
I couldn't find the code for the server and all the requests for file upload and etc should go to https://yft.design
am i missing something?

环形文字输入

键盘一直输入或者一直按删除时元素坐标会明显跳动变化

条形码切换颜色，没有变化

There may be issues with selecting multiple coordinates

support for importing pdf to fabric

Hello, sorry, I'm currently doing a personal project where I'm trying to import pdf to fabric, I see that you have been able to do it, I already managed to import all this, but when the texts are transferred to fabric, the positions are broken, they appear anywhere except where they should be.

How did you achieve this, sorry?
Do you have some reference libraries?

Support for importing PDF

https://githubfast.com/fabricjs/fabric.js/issues/9489

图层中文字取消可变数据仍旧可以修改文字

红色出血线的位置bug

右侧、下侧的线紧挨着画板了。

【Bug】渲染PDF出错

PDF
效果：旋转失效，渐变消失。

感觉修好了都可以做PDF编辑器了

导出图片的dpi没生效

带箭头的直线复制后，箭头丢失

修改画布尺寸，所有的画布尺寸也会被修改

如题

支持导出 chameleon 的协议，直接生成网页

大佬们要不要考虑，互相共建，支持导出低代码协议给 https://github.com/hlerenow/chameleon 使用

选中一部分文字，设置颜色，会把整个文本组件的颜色都改掉

修改textbox的单个字体大小

好像是找不到类型

在线预览demo 没有这个问题，但是自己拉取代码，控制台显示这个错误，这是为啥

Support for English?

Hi guys,

This is an incredible project and would like to test it out. Good work!

Any option or possibility to use/support English?

元素画布超出区域可见性

当元素拖出画布区域后，应该表现为：看不到元素但可以展示控制条。现在超出画布也会完整可见。

框选中多个元素，包括环形文字的时候，选中的元素拖动时展示的展示有问题

2024-03-04.16.29.36.mov

导出pdf错误

导出页面选择有bug

项目无法正常安装依赖跑起来

本地环境配置

➜ npx envinfo --system --binaries

  System:
    OS: macOS 14.3.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 101.69 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.1 - ~/.nvm/versions/node/v18.19.1/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v18.19.1/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v18.19.1/bin/npm
    pnpm: 8.4.0 - ~/.nvm/versions/node/v18.19.1/bin/pnpm
    bun: 1.0.27 - ~/.bun/bin/bun

执行 npm install 报错

2024-04-02T14_33_04_043Z-debug-0.log

npm WARN deprecated [email protected]: Please upgrade to v1.0.1
npm WARN deprecated [email protected]: Please upgrade to v1.0.1
npm WARN deprecated [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: Use your platform's native DOMException instead
npm WARN deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead
npm WARN deprecated [email protected]: [email protected]
npm WARN deprecated [email protected]: It is not compatible with newer versions of GA starting with v4, as long as you are using GAv3 it should be ok, but the package is not longer being maintained
npm ERR! code 1
npm ERR! path /Users/wuxh/Code/oss/yft-design/node_modules/canvas
npm ERR! command failed
npm ERR! command sh -c node-pre-gyp install --fallback-to-build --update-binary
npm ERR! Failed to execute '/Users/wuxh/.nvm/versions/node/v18.19.1/bin/node /Users/wuxh/.nvm/versions/node/v18.19.1/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/Users/wuxh/Code/oss/yft-design/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/wuxh/Code/oss/yft-design/node_modules/canvas/build/Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v108' (1)
npm ERR! node-pre-gyp info it worked if it ends with ok
npm ERR! node-pre-gyp info using [email protected]
npm ERR! node-pre-gyp info using [email protected] | darwin | arm64
npm ERR! node-pre-gyp http GET https://registry.npmmirror.com/-/binary/canvas/v2.11.2/canvas-v2.11.2-node-v108-darwin-unknown-arm64.tar.gz
npm ERR! node-pre-gyp ERR! install response status 404 Not Found on https://registry.npmmirror.com/-/binary/canvas/v2.11.2/canvas-v2.11.2-node-v108-darwin-unknown-arm64.tar.gz
npm ERR! node-pre-gyp WARN Pre-built binaries not installable for [email protected] and [email protected] (node-v108 ABI, unknown) (falling back to source compile with node-gyp)
npm ERR! node-pre-gyp WARN Hit error response status 404 Not Found on https://registry.npmmirror.com/-/binary/canvas/v2.11.2/canvas-v2.11.2-node-v108-darwin-unknown-arm64.tar.gz
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | darwin | arm64
npm ERR! gyp info ok
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | darwin | arm64
npm ERR! gyp info find Python using Python version 3.9.6 found at "/Library/Developer/CommandLineTools/usr/bin/python3"
npm ERR! gyp info spawn /Library/Developer/CommandLineTools/usr/bin/python3
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args '/Users/wuxh/.nvm/versions/node/v18.19.1/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
npm ERR! gyp info spawn args 'binding.gyp',
npm ERR! gyp info spawn args '-f',
npm ERR! gyp info spawn args 'make',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/Users/wuxh/Code/oss/yft-design/node_modules/canvas/build/config.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/Users/wuxh/.nvm/versions/node/v18.19.1/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/Users/wuxh/Library/Caches/node-gyp/18.19.1/include/node/common.gypi',
npm ERR! gyp info spawn args '-Dlibrary=shared_library',
npm ERR! gyp info spawn args '-Dvisibility=default',
npm ERR! gyp info spawn args '-Dnode_root_dir=/Users/wuxh/Library/Caches/node-gyp/18.19.1',
npm ERR! gyp info spawn args '-Dnode_gyp_dir=/Users/wuxh/.nvm/versions/node/v18.19.1/lib/node_modules/npm/node_modules/node-gyp',
npm ERR! gyp info spawn args '-Dnode_lib_file=/Users/wuxh/Library/Caches/node-gyp/18.19.1/<(target_arch)/node.lib',
npm ERR! gyp info spawn args '-Dmodule_root_dir=/Users/wuxh/Code/oss/yft-design/node_modules/canvas',
npm ERR! gyp info spawn args '-Dnode_engine=v8',
npm ERR! gyp info spawn args '--depth=.',
npm ERR! gyp info spawn args '--no-parallel',
npm ERR! gyp info spawn args '--generator-output',
npm ERR! gyp info spawn args 'build',
npm ERR! gyp info spawn args '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! /bin/sh: pkg-config: command not found
npm ERR! gyp: Call to 'pkg-config pixman-1 --libs' returned exit status 127 while in binding.gyp. while trying to load binding.gyp
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: `gyp` failed with exit code: 1
npm ERR! gyp ERR! stack at ChildProcess.<anonymous> (/Users/wuxh/.nvm/versions/node/v18.19.1/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:271:18)
npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:517:28)
npm ERR! gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:292:12)
npm ERR! gyp ERR! System Darwin 23.3.0
npm ERR! gyp ERR! command "/Users/wuxh/.nvm/versions/node/v18.19.1/bin/node" "/Users/wuxh/.nvm/versions/node/v18.19.1/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--update-binary" "--module=/Users/wuxh/Code/oss/yft-design/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/Users/wuxh/Code/oss/yft-design/node_modules/canvas/build/Release" "--napi_version=9" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v108"
npm ERR! gyp ERR! cwd /Users/wuxh/Code/oss/yft-design/node_modules/canvas
npm ERR! gyp ERR! node -v v18.19.1
npm ERR! gyp ERR! node-gyp -v v10.0.1
npm ERR! gyp ERR! not ok
npm ERR! node-pre-gyp ERR! build error
npm ERR! node-pre-gyp ERR! stack Error: Failed to execute '/Users/wuxh/.nvm/versions/node/v18.19.1/bin/node /Users/wuxh/.nvm/versions/node/v18.19.1/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/Users/wuxh/Code/oss/yft-design/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/wuxh/Code/oss/yft-design/node_modules/canvas/build/Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v108' (1)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/Users/wuxh/Code/oss/yft-design/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.emit (node:events:517:28)
npm ERR! node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1098:16)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:303:5)
npm ERR! node-pre-gyp ERR! System Darwin 23.3.0
npm ERR! node-pre-gyp ERR! command "/Users/wuxh/.nvm/versions/node/v18.19.1/bin/node" "/Users/wuxh/Code/oss/yft-design/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build" "--update-binary"
npm ERR! node-pre-gyp ERR! cwd /Users/wuxh/Code/oss/yft-design/node_modules/canvas
npm ERR! node-pre-gyp ERR! node -v v18.19.1
npm ERR! node-pre-gyp ERR! node-pre-gyp -v v1.0.11
npm ERR! node-pre-gyp ERR! not ok

npm ERR! A complete log of this run can be found in: /Users/wuxh/.npm/_logs/2024-04-02T14_38_31_913Z-debug-0.log