/vue-fabric-editor

基于fabric.js和Vue的图片编辑器,可自定义字体、素材、设计模板。fabric.js and Vue based image editor, can customize fonts, materials, design templates.

Primary LanguageVueMIT LicenseMIT

文档 | English | 中文

vue-fabric-editor

基于 fabric.js 和 Vue 开发的插件化图片编辑器,可自定义字体、素材、设计模板、右键菜单、快捷键。

image

特点

  1. 插件化架构:可自定义素材、右键菜单、快捷键等功能,易扩展。
  2. 简洁易用:以轻量、简洁为主的图形编辑器,而非大而全的在线PS类的重行设计工具。
  3. 功能齐全:自定义模板、渐变、自定义字体等功能,满足轻量图片编辑场景。

已有功能

功能介绍文章 文字 + 动图。

  • 导入 JSON 文件
  • 保存为 PNG、SVG、JSON 文件
  • 插入 SVG、图片文件
  • 多元素水平、垂直对齐方式
  • 字体模板
  • 组合/拆分组合
  • 图层及顺序调整
  • 撤销/重做
  • 背景属性设置
  • 外观属性/字体属性/描边/阴影
  • 自定义字体
  • 自定义模板素材
  • 快捷键
  • 右键菜单
  • 辅助线
  • 标尺
  • 图片替换
  • 图片滤镜
  • 国际化

使用

启动项目

请先安装node.js v16,然后执行以下命令:

yarn install
yarn serve

为非web前端开发人员准备了部署教程,快速解决你的部署需求,你可以联系我进行有偿的部署、定制开发

自定义素材

可自定义字体、设计模板、标题模板等,所有自定义素材在https://github.com/nihaojob/vue-fabric-editor-static 项目中保存。

Pro商业版支持素材管理功能,可以在后台维护字体、模板、字体样式模板、图片素材,支持分类搜索等功能,快速构建符合自己业务的图片编辑器应用

我们通过有偿的方式积累高质量的常见问题、最佳实践文档,欢迎加入星球:

贡献指南

项目致力于打造一个开箱即用的web图片编辑器应用,同时沉淀一个介于web图片编辑器应用与fabric.js之间的封装层,期望封装层面向开发者设计,提供更简单的接口,让开发者可以轻松的实现图片应用开发。

我们离目标还有很长的距离,如果你对这件事情感兴趣,真诚的邀请你加入,我们一起沉淀fabric.js的最佳实践,你会得到包括不限于以下列表的收获,你只要会简单的Git和Javascript语法就可以。

  • 熟悉开源协作方式,成为项目贡献者。
  • Vue3 + TS实践,边学边开发。
  • fabric.js开发,边学边开发。
  • 入门单元测试,边学边开发。
  • 众多的fabric.js开发者交流。
  • 图形编辑器架构经验。

目前有很多需要做的工作,比如英文文档的搭建、SDK拆分等,欢迎与我联系,我愿意与你进行任何问题的交流,微信:13146890191。期待你的 issue 和 PR 。

这是我发表在掘金社区关于编辑器的技术笔记,会有更多的细节:

  1. 使用 fabric.js 快速开发一个图片编辑器
  2. fabric.js开发图片编辑器的细节实现

注:如果遇到技术问题,期望使用 issue 讨论,它更加开放与透明,足够多的信息会让解决问题变得更高效,参考提问的智慧

规划

可能新增功能

第一阶段

  • 缩放
  • 三角形、箭头、线条
  • 复制 粘贴 快捷键
  • 拖动模式,放大缩小
  • 画布大小保存
  • 绘制线条
  • svgIcon 汇总
  • 标题样式列表模板
  • 预览

第二阶段

  • 图片替换
  • 渐变配置
  • 平铺背景、等比例背景
  • 图片裁剪
  • 滤镜
  • 描边 strokeDashArray

第三阶段

  • monorepo升级 进行中
  • 插件化
  • 标尺插件
  • 截图插件
  • 滤镜插件
  • 画布插件
  • 其他工具函数
  • @fabricEditor SDK封装
  • 基于插件开发移动端
  • 基于插件开发其他图片应用
  • 文档建设(中英文)

致谢

贡献者

nihaojob
nihaojob
Qiu-Jun
Qiu-Jun
liumingye
liumingye
bigFace2019
bigFace2019
makeng
makeng
z09176141
z09176141
hudenghui
hudenghui
JiangShuQ
JiangShuQ
briver0825
briver0825
a847244052
a847244052
macheteHot
macheteHot
rolitter
rolitter
slarkerino
slarkerino
vvbear
vvbear
wozhi-cl
wozhi-cl
xiaozeo
xiaozeo
ylx252
ylx252
luke358
luke358
yehan68
yehan68
jooyyy
jooyyy
nanfb
nanfb
dulltackle
dulltackle
Bamzc
Bamzc
Yangzongtai
Yangzongtai
Alicehhhmm
Alicehhhmm
icleitoncosta
icleitoncosta
liucity
liucity

License

Licensed under the MIT License.