Git Product home page Git Product logo

itsharex / yft-design Goto Github PK

View Code? Open in Web Editor NEW

This project forked from dromara/yft-design

0.0 0.0 0.0 48.08 MB

基于Canvas的开源版"创客贴", Vue3+TypeScript+Fabric.js+Pinia+Element-Plus, supporting the most commonly used element types such as text, images, shapes, lines, QR codes, and barcodes. Each element has high editable capabilities, thumbnail display, templates

Home Page: https://yft.design

License: MIT License

JavaScript 0.08% TypeScript 83.28% CSS 0.38% HTML 1.92% Vue 14.24% SCSS 0.09% Dockerfile 0.01%

yft-design's Introduction

yft-design

1,一款美观且功能强大的在线设计工具,具备海报设计和图片编辑功能,基于Canvas的开源版【稿定设计】。适用于多种场景,如海报生成、电商产品图制作、文章长图设计、视频/公众号封面编辑等。
2,适配稿定设计导出pdf还原,支持导入psd还原
3,可导出图片,svg,pdf
(国内)Demo:https://yft.design
(国外)Demo:https://dromara.org/yft-design【无法体验psd,pdf,抠图服务】

image

🎉 pdf解析

psd-parse

🎉 psd解析

psd-parse

📋 色彩演示

background

🚀 项目运行

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接口文档

使用fabric.js的编辑器文件解析器可以查看如下 接口文档

  • 支持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.

yft-design's People

Contributors

more-strive avatar wohuweixiya avatar zjc2233 avatar qiu-jun avatar zdw1011781461 avatar sledgehuang avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.