English | 中文
Demo 基于 fabric.js 和 Vue 开发的图片编辑器，可自定义字体、素材、设计模板。
功能介绍文章 文字 + 动图。
- 导入 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 。
这是我发表在掘金社区关于编辑器的技术笔记，会有更多的细节：
注：如果遇到技术问题，期望使用 issue 讨论，它更加开放与透明，足够多的信息会让解决问题变得更高效，参考提问的智慧。
第一阶段
- 缩放
- 三角形、箭头、线条
- 复制 粘贴 快捷键
- 拖动模式，放大缩小
- 画布大小保存
- 绘制线条
- svgIcon 汇总
- 标题样式列表模板
- 预览
第二阶段
- 图片替换
- 渐变配置
- 平铺背景、等比例背景
- 图片裁剪
- 滤镜
- 描边 strokeDashArray
第三阶段
- monorepo升级 进行中
- 标尺插件
- 截图插件
- 滤镜插件
- 画布插件
- 其他工具函数
- @fabricEditor SDK封装
- 基于插件开发移动端
- 基于插件开发其他图片应用
- 文档建设(中英文)
- color-gradient-picker-vue3 一个 vue3 版本的渐变组件，作者Qiu-Jun 。
nihaojob |
Qiu-Jun |
liumingye |
bigFace2019 |
hudenghui |
liucity |
icleitoncosta |
macheteHot |
makeng |
slarkerino |
vvbear |
xiaozeo |
luke358 |
yehan68 |
xiaozhuclassmate |
Licensed under the MIT License.