图形编辑器基于Paper.js教程02：图形图像编辑器概述

背景

由于笔者目前从事开发图形编辑器，在开始的那段时间里，调研和研究了非常多的图形编辑器，图像编辑器之类的软件，开源，闭源的，免费的，商业的都有。今天的这篇文章就来简单概述一下我调研的结果和过程。

图形或图像编辑器

其实图像和图形是有很大区别的， 图形更倾向于矢量图形，如svg的编辑。图像更倾向于位图，png，jpg图片的编辑。 图形编辑器常用于logo设计，矢量图形开发，svg开发 图像编辑器常用于图像处理，如证件照，在线海报制作

两者有联系，也有侧重点。 下面列一下开源的图像编辑器和图形编辑器

开源的图形编辑器

https://github.com/SVG-Edit/svgedit https://github.com/excalidraw/excalidraw https://github.com/jgraph/drawio https://github.com/Snapmaker/Luban https://github.com/LaserWeb/deprecated-LaserWeb3 https://github.com/Yqnn/svg-path-editor https://github.com/flux3dp/beam-studio

个人研究激光切割机上位机软件 比较多，所以，所以。

开源的图像编辑器

https://github.com/nihaojob/vue-fabric-editor https://github.com/ly525/luban-h5 https://github.com/dromara/yft-design 其实还有很多

有些项目不太好定义是否是图像编辑器，主要看他们的最终输出物是什么。 是图片的就是 图像编辑器，是 svg或者gcode就是 图形编辑器（纯个人观点，不同意就举手）。

不开源的有 即时设计，稿定，可画canva，figma，摹客。 在线设计logo的平台 https://typogram.co/ （基于paperjs）。

不开源的 激光切割机 上位机编辑器也有不少如： xtool，wecreate ，laserpecker，circut design 。

根据我的研究 xtool 使用的Vue + PixiJS wecreate，laserpecker 是Vue + Fabric.js circut design 这玩意代码保护的很好，只知道是angular。

然后这里再给大家看一下商业用的设计软件，使用的技术栈

稿定的设计页面

即时设计

可画（虽然能搜到paper，但并不一定是使用paperjs）

上面两个产品 都无法全局搜到到 fabric关键词。

蓝湖

技术选项

通过上面的几个产品对比和技术栈分析，大家在技术选项时也会有个大致的印象。 上面的技术分析我没调研太多官方公布的资料，所以有出处也别找我。我只会F12 全局搜索关键词。

做这种图像，图形编辑器，基本就是这几个库了。

• Fabric.js
• Paper.js
• PixiJS

其实还有一些其他有效的基础canvas库，如 konva ，zrender

我没时间去调研了，有用过的同学可以在文章底部评论，我加到文章中。

Fabric.js 成熟度最高，社区插件，效果，开源项目最多，持续维护，自带支持选择，缩放，框选案例，微操有限，比如实现一个填充线算法。 Paper.js 目前基本不维护啦，但是对于矢量图的微操支持的很全，各种插件都需要自己写，比如缩放，旋转插件，框选。 PixiJS 这个没用过，了解不多，看介绍是主打h5 canvas 游戏方面。那么相对的一些平面选择回相对强一些，目前我就看到xtool Create Space 使用，肯定也有很多优秀的项目在用。但还没被我发现。

网上利用canva做高性能文档，表格，图片编辑的项目非常多，非常多。

https://hufe.club/canvas-editor/ https://excalidraw.com/ https://github.com/tldraw/tldraw https://github.com/dream-num/Luckysheet https://github.com/rough-stuff/rough

总结

总结懒得写了，就写一句话吧

每个项目都很优秀，普通人掌握其中一个就能做出非常好的项目或作品。我们需要沉下心仔细研究。