V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
nihaojob
V2EX  ›  程序员

我的开源项目与开源经历分享

  nihaojob · 362 天前 · 6811 次点击
这是一个创建于 362 天前的主题,其中的信息可能已经有所发展或是发生改变。

大家好,我是一位 93 年的前端开发者,最近开源了一款基于 Fabric.js + Vue3 开发的 Web 图形编辑器,它是一个可以自定义设计模板、设计素材,让开发者快捷的开发出一个图片编辑应用,类似稿定设计、创客贴设计这样的工具。

这篇笔记的两个目的:

  1. 介绍开源项目,如果有类似场景大家可直接使用,不再重复开发。
  2. 分享开源经历,鼓励和邀请对开源感兴趣的伙伴一起参与进来。

项目介绍

screenshot-20230415-142257.png

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 设计等场景,还有更复杂的工业软件场景,如机房拓扑拓展、设备巡检图等。 image.png image.png

产品特点

开源前做了一些调研,已经有一些比较专业的开源编辑器项目,比如知名的 SVGEdit 项目,它们很强大,类似在线版本的 PS ,提供给更专业的设计师使用;vue-fabric-editor 的产品定位是给非专业设计人员使用,例如让没有设计技能的运营同学在模板上简单修改,生成一张在公众号中使用的头图。 image.png

支持功能

  1. 支持导入导出 JSON 源文件,导出常见的图片 PNG 、SVG 格式。
  2. 可自定义设计模板、字体样式模板、自定义分类素材。
  3. 元素支持拖拽、组合、层级管理、多种对齐操作。
  4. 图片素材支持插入、替换、滤镜、裁剪。
  5. 支持形状素材、线条绘制,渐变、边框、透明度、阴影设置。
  6. 画布可自定义尺寸、放大缩小、辅助线、标尺功能。
  7. 快捷键、右键菜单快捷操作设置。

20230422131548_rec_.gif

以上就是项目的介绍了,总结一下,它是一个基于 Fabric + Vue3 开发的一款开源 Web 图片编辑器,二次开发简单、扩展便捷、可帮助开发者快速构建一个面向非专业设计人员的图形编辑器

开源经历

关于我

我曾就职于优信二手车,参与过低代码平台的开发,现在一家互联网保险公司工作,参与音视频营销工具、外呼系统的开发,都属于复杂度比较高的前端项目,一直对架构和开源比较感兴趣,也在学习和积累设计模式、架构设计、开源相关的经验。 image.png 作为一位已经 30 岁的开发者,一直对开源有着强烈的兴趣,但是从未参与过,于是在好奇心的驱动下发起了这个开源项目。

项目经历

最初,我帮朋友实现了一个基于 Fabric.js 开发的图片生成工具,后面将核心功能抽离并开源到了 Github 上,投稿到了阮一峰老师的博客,获得了一些关注。

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

很多开发者反馈 Fabric.js 的文档不太友好,太过强大和灵活也有一个弊端,那就是细节太多,要实现一个基础功能完整、功能丰富的图编辑器应用并不轻松,要掌握很多的细节,做很多基础的封装工作

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

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

短短几个月的时间,项目在 Github 上已经从 0 涨到 1K+ Star ,开源给我带来了新奇的体验。 image.png

沉淀

在和众多的开发者交流后,发现大家都在做同一件事情,重复的开发;大家更期望在不做太多基础工作的情况下,快速构建一个功能完整、易于扩展的图片编辑应用

目前的项目还只是一个前端应用项目,希望未来和社区一起沉淀一个介于 Web 图片编辑器应用与 Fabric.js 底层库之间的封装层,面向应用开发者设计,提供更简单的接口,让开发者可以通过开源 SDK ,快速构建图片编辑器应用image.png

邀请

开源是很有魅力一件事情,我在 Github 上结识了很多志同道合的贡献者,他们是一个个富有热情且有执行力的有趣灵魂,是他们在深夜付出自己的时间与热爱为项目贡献代码,让不相识的后来人受益,让项目越来越好,我也从一个开源门外汉,和大家一起成为了开源贡献者image.png image.png

这是一个很新的项目和社区,有太多的工作需要做,如果你对这件事情感兴趣,真诚的邀请你加入,希望我们一起边走边学,在未来一起成为开源世界里的一部分,期待你的加入。

28 条回复    2023-05-11 21:19:26 +08:00
aulayli
    1
aulayli  
   362 天前
很棒的项目,已 Star
veike
    2
veike  
   362 天前
已 star ,上次有个说自己是前端菜鸟的写的一个 html 编辑器开源项目,忘了地址了,有老哥记得告诉我一下。
star7th
    3
star7th  
   362 天前   ❤️ 1
这篇文章写得好,把产品的来龙去脉都介绍得很清晰。虽然我目前用不上这类工具,但点个赞。

你考虑下要不要参考我的开源项目的模式,https://github.com/star7th/showdoc 开源跟 sass 服务 https://www.showdoc.com.cn 并行,这样可以一边做开源项目一边商业化,不然一直为爱发电,可能不好持续下去。相当多的开源项目都是死于付出和回报不成正比。假如走通商业化,反而走得更远。

比如说,你提供的 saas 服务可以多点模板,甚至可以引入 AI 来布局,等等。目前我觉得模板偏少,而需要这类工具的目标用户,往往比较需要现成的模板。
EyreFree
    4
EyreFree  
   362 天前
👍
Dlin
    5
Dlin  
   362 天前
好东西加个 star
nihaojob
    6
nihaojob  
OP
   362 天前
@aulayli 感谢,感兴趣可以一起维护哈
nihaojob
    7
nihaojob  
OP
   362 天前
@veike 这个不太清楚了
nihaojob
    8
nihaojob  
OP
   362 天前
@EyreFree 感谢
nihaojob
    9
nihaojob  
OP
   362 天前
@star7th 感谢认可,看到你的开源项目很厉害,是有探索商业化的想法,应用型的开项目会有一些机会,想加老哥咨询请教,不知道方便吗?
star7th
    10
star7th  
   362 天前
@nihaojob 咱就萍水相逢好了。主要是我也不想手把手教人啊。如果你找得到一些对双方都有利的共赢方式,而不是单方面让我付出时间精力,就联系我邮箱吧。在 github 主页能找到我邮箱。
ShareManT
    11
ShareManT  
   362 天前
很棒
nihaojob
    12
nihaojob  
OP
   362 天前
@ShareManT 谢谢认可
nihaojob
    13
nihaojob  
OP
   362 天前
@star7th 感谢,努力向大佬看齐
bojue
    14
bojue  
   362 天前
@nihaojob 其实开源+商业化可以参考 dooring 这款挺成功的产品,完全商业话可以参考:创客贴,canva ,稿定设计,客户确实比较看中模板库
nihaojob
    15
nihaojob  
OP
   361 天前 via Android
@bojue 我之前也关注到了徐小夕大佬的 dooring ,目前项目还比较初期,在考虑这个事情了,感谢提醒
opentrade
    16
opentrade  
   361 天前 via Android
@star7th 开源做久了,都这种态度
coldmonkeybit
    17
coldmonkeybit  
   361 天前
支持支持已 star ,上个月用 fabric 做需求,还参考过 OP 的项目,太巧啦
sunny7
    18
sunny7  
   361 天前
已 star,大佬,我是一名有两年正式开发经验的前端开发,对这个项目很感兴趣,请问可以怎么加入这个开源项目
onetown
    19
onetown  
   361 天前   ❤️ 1
已 star
seanlin5
    20
seanlin5  
   361 天前
已 star
nihaojob
    21
nihaojob  
OP
   361 天前 via Android
@sunny7 太好了 欢迎你加入,可以看下 github 上 reademe 的贡献指南,有我的微信
nihaojob
    22
nihaojob  
OP
   361 天前 via Android
@coldmonkeybit 缘分 哈哈
aegon466
    23
aegon466  
   361 天前
可以支持 3d 吗
nihaojob
    24
nihaojob  
OP
   361 天前 via Android
@aegon466 不支持 3D
encro
    25
encro  
   360 天前
@star7th

@nihaojob

一看也立马想到了引入服务器端模板和创作会怎么样。创客贴这类用户还挺多的,也很有用。
nihaojob
    26
nihaojob  
OP
   360 天前
@encro 是的哈 素材 保存 等 其实开发一个编辑器需要做的功能还蛮多的
VikiQAQ
    27
VikiQAQ  
   349 天前
感谢每一位开源贡献者。
qalong
    28
qalong  
   343 天前
用过,很不错!特意表示感谢!
关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1380 人在线   最高记录 6543   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 27ms · UTC 23:47 · PVG 07:47 · LAX 16:47 · JFK 19:47
Developed with CodeLauncher
♥ Do have faith in what you're doing.