开源项目开发（我的开源项目与开源经历分享）

大家好
  
  
  
  
  
  ，我是一位93年的前端开发者  
  
  
  
  
  
 ，最近开源了一款基于Fabric.js + Vue3 开发的Web图形编辑器
 


 


 


 


 


 


，它是一个可以自定义设计模板             、设计素材
 
 
 
 
 
 ，让开发者快捷的开发出一个图片编辑应用   
   
   
   
   
   
 ，类似稿定设计
  
 
  
 
  
 
  
 
  
 
  
 
、创客贴设计这样的工具
  
  
  
  
  
  。

这篇笔记的两个目的：

介绍开源项目
 

 

 

 

 

 

，如果有类似场景大家可直接使用

 

 

 

 

 

 ，不再重复开发  
  
  
  
  
  
 。 分享开源经历             ，鼓励和邀请对开源感兴趣的伙伴一起参与进来
 


 


 


 


 


 


。

项目介绍

Github：https://github.com/nihaojob/vue-fabric-editor

预览：https://nihaojob.github.io/vue-fabric-editor/

技术选型：

项目以Fabric.js 为底层
 
 

 
 

 
 

 
 

 
 

 
 

，使用Vue3框架和精致的View UI Plus组件库构建


 
 
 
 
 
 。

Fabric.js 是业界知名的Canvas工具库











，它已经12岁了                   ，在业界得到了广泛的应用和认可；Vue提供更友好的入门曲线 
 
 
 
 
 
 
 
 
 
 
 
，尤其在国内应用更广；希望借助这些优秀的开源项目


















，构建底层强大











、上手容易 
  
  
  
  
  
  、便捷扩展
  
  
  
  
  
  
、开箱即用的开源图像编辑器产品   
   
   
   
   
   
 。

应用场景

它适用于**海报设计
 


 


 


 


 


 

、封面设计 
 
 
 
 
 
 、T恤设计
   
   
   
   
   
   
、奖状/工卡设计
 

 

 

 

 

 
、电子价签设计 

 

 

 

 

 

 、印章设计            、手机壁纸

 
 

 
 

 
 

 
 

 
 

 
 
、PPT设计等场景            ，**还有更复杂的工业软件场景  
 
  
 
  
 
  
 
  
 
  
 
 ，如机房拓扑拓展











、设备巡检图等
 

 

 

 

 

 

。

产品特点

开源前做了一些调研












，已经有一些比较专业的开源编辑器项目
  
  
  
  
  
  ，比如知名的SVGEdit项目  
  
  
  
  
  
 ，它们很强大
 


 


 


 


 


 


，类似在线版本的PS
 
 
 
 
 
 ，提供给更专业的设计师使用；vue-fabric-editor的产品定位是给非专业设计人员使用

   
   
   
   
   
   
 ，例如让没有设计技能的运营同学在模板上简单修改
 

 

 

 

 

 

，生成一张在公众号中使用的头图

 

 

 

 

 

 。

支持功能

支持导入导出JSON源文件

 

 

 

 

 

 ，导出常见的图片PNG                   、SVG格式             。 可自定义设计模板
 
 
 
 
 
 
 
 
 
 
 
 
、字体样式模板

















、自定义分类素材
 
 

 
 

 
 

 
 

 
 

 
 

。 元素支持拖拽             、组合
  
 
  
 
  
 
  
 
  
 
  
 
、层级管理











、多种对齐操作











。 图片素材支持插入 
  
  
  
  
  
  、替换
  
  
  
  
  
  
、滤镜
 


 


 


 


 


 

、裁剪                   。 支持形状素材 
 
 
 
 
 
 、线条绘制             ，渐变
   
   
   
   
   
   
、边框
 

 

 

 

 

 
、透明度 

 

 

 

 

 

 、阴影设置 
 
 
 
 
 
 
 
 
 
 
 
。 画布可自定义尺寸            、放大缩小

 
 

 
 

 
 

 
 

 
 

 
 
、辅助线











、标尺功能


















。 快捷键                   、右键菜单快捷操作设置            。

以上就是项目的介绍了
 
 

 
 

 
 

 
 

 
 

 
 

，总结一下











，它是一个基于Fabric + Vue3开发的一款开源Web图片编辑器                   ，二次开发简单
 
 
 
 
 
 
 
 
 
 
 
 
、扩展便捷

















、可帮助开发者快速构建一个面向非专业设计人员的图形编辑器  
 
  
 
  
 
  
 
  
 
  
 
 。

开源经历

关于我

我曾就职于优信二手车 
 
 
 
 
 
 
 
 
 
 
 
，参与过低代码平台的开发


















，现在一家互联网保险公司工作            ，参与音视频营销工具             、外呼系统的开发  
 
  
 
  
 
  
 
  
 
  
 
 ，都属于复杂度比较高的前端项目












，一直对架构和开源比较感兴趣
  
  
  
  
  
  ，也在学习和积累设计模式
  
 
  
 
  
 
  
 
  
 
  
 
、架构设计











、开源相关的经验












。

作为一位已经30岁的开发者  
  
  
  
  
  
 ，一直对开源有着强烈的兴趣
 


 


 


 


 


 


，但是从未参与过
 
 
 
 
 
 ，于是在好奇心的驱动下发起了这个开源项目
  
  
  
  
  
  。

项目经历

最初   
   
   
   
   
   
 ，我帮朋友实现了一个基于Fabric.js开发的图片生成工具
 

 

 

 

 

 

，后面将核心功能抽离并开源到了Github上

 

 

 

 

 

 ，投稿到了阮一峰老师的博客             ，获得了一些关注  
  
  
  
  
  
 。

Fabric.js的底层能力非常强大
 
 

 
 

 
 

 
 

 
 

 
 

，接口也很灵活











，我最初以为只需要简单的API调用就可以实现一个图片编辑器                   ，事实上我高估了自己的学习能力 
 
 
 
 
 
 
 
 
 
 
 
，也低估了Fabric.js的强大和灵活
 


 


 


 


 


 


。

很多开发者反馈Fabric.js 的文档不太友好


















，太过强大和灵活也有一个弊端            ，那就是细节太多  
 
  
 
  
 
  
 
  
 
  
 
 ，要实现一个基础功能完整 
  
  
  
  
  
  、功能丰富的图编辑器应用并不轻松












，要掌握很多的细节
  
  
  
  
  
  ，做很多基础的封装工作
 
 
 
 
 
 。

我将开发过程发布到了技术社区  
  
  
  
  
  
 ，结识了很多Fabric.js的开发者   
   
   
   
   
   
 。

《使用fabric.js 快速开发一个图片编辑器》 《fabric.js开发图片编辑器的细节实现》 《fabric.js开发图片编辑器可以实现哪些功能？》

短短几个月的时间
 


 


 


 


 


 


，项目**在Github上已经从0涨到1K+ Star
 
 
 
 
 
 ，**开源给我带来了新奇的体验
 

 

 

 

 

 

。

沉淀

在和众多的开发者交流后   
   
   
   
   
   
 ，发现大家都在做同一件事情
 

 

 

 

 

 

，重复的开发；大家更期望在不做太多基础工作的情况下

 

 

 

 

 

 ，快速构建一个功能完整
  
  
  
  
  
  
、易于扩展的图片编辑应用

 

 

 

 

 

 。

目前的项目还只是一个前端应用项目             ，希望未来和社区一起沉淀一个介于Web图片编辑器应用与Fabric.js底层库之间的封装层
 
 

 
 

 
 

 
 

 
 

 
 

，面向应用开发者设计











，提供更简单的接口                   ，让开发者可以通过开源SDK 
 
 
 
 
 
 
 
 
 
 
 
，快速构建图片编辑器应用

             。

邀请

开源是很有魅力一件事情


















，我在Github上结识了很多志同道合的贡献者            ，他们是一个个富有热情且有执行力的有趣灵魂  
 
  
 
  
 
  
 
  
 
  
 
 ，是他们在深夜付出自己的时间与热爱为项目贡献代码












，让不相识的后来人受益
  
  
  
  
  
  ，让项目越来越好  
  
  
  
  
  
 ，我也从一个开源门外汉
 


 


 


 


 


 


，和大家一起成为了开源贡献者


 
 

 
 

 
 

 
 

 
 

 
 

。

这是一个很新的项目和社区
 
 
 
 
 
 ，有太多的工作需要做   
   
   
   
   
   
 ，如果你对这件事情感兴趣
 

 

 

 

 

 

，真诚的邀请你加入

 

 

 

 

 

 ，希望我们一起边走边学             ，在未来一起成为开源世界里的一部分
 
 

 
 

 
 

 
 

 
 

 
 

，期待你的加入











。