Skip to content

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

License

Notifications You must be signed in to change notification settings

wind-road/vue-fabric-editor

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

文档说明 | English | 中文

vue-fabric-editor

Demo 基于 fabric.js 和 Vue 开发的图片编辑器,可自定义字体、素材、设计模板。

image

已有功能

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

  • 导入 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
hudenghui
hudenghui
xiaozhuclassmate
xiaozhuclassmate
liucity
liucity
icleitoncosta
icleitoncosta
macheteHot
macheteHot
makeng
makeng
slarkerino
slarkerino
vvbear
vvbear
wozhi-cl
wozhi-cl
xiaozeo
xiaozeo
luke358
luke358
yehan68
yehan68

License

Licensed under the MIT License.

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Vue 66.2%
  • TypeScript 28.7%
  • JavaScript 2.6%
  • Less 1.9%
  • HTML 0.4%
  • CSS 0.1%
  • Shell 0.1%