/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 项目中保存。

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

贡献指南

项目致力于打造一个开箱即用的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
briver0825
briver0825
a847244052
a847244052
liucity
liucity
icleitoncosta
icleitoncosta
Bamzc
Bamzc
dulltackle
dulltackle
macheteHot
macheteHot
rolitter
rolitter
slarkerino
slarkerino
vvbear
vvbear
wozhi-cl
wozhi-cl
xiaozeo
xiaozeo
ylx252
ylx252
luke358
luke358
yehan68
yehan68

License

Licensed under the MIT License.