图片标注工具选型

项目里需要做一个图片标注工具，就是在一张底图上绘制特定的图形，连线，或者标注长度。如下图所示

核心需求如下：

浏览器PC端使用

绘制的点、线、图形，应该是矢量图，可以移动、缩放和旋转

可以定制需要的标注工具，比如绘制坐标轴，需要跟随鼠标移动

可以加载底图

可以把绘制完成的矢量图+底图一起导出

基础技术没啥可选的，肯定是基于Canvas实现，关键是选一个好用的库，搜索了一下，并没有像三维引擎那样出现“大一统”的局面（Three.js），只有几款不太热门的选项，根据github热度粗选，剩下两个：

Fabric.js  vs  Two.js

一开始因为Two.js和Three.js命名接近，而且界面风格更现代而倾向于它，但调研后发现，Two.js竟然完全不支持加载image，虽说是专注于矢量图，这也有点过分了；而且它明显是为了做动画设计的，所有的example都是动画；它还没有自己的事件体系，借用了Backbone的。

这样看起来，老旧的Fabric.js就显得很可爱了，特别是它还直接支持鼠标拖拽、缩放、旋转矢量图对象。

不过引用Fabric的时候，出现了一点问题——我们的项目是基于iView的，模块化开发，一开始也想用npm安装，然后import的方式引用Fabric.js，谁知道引进来以后总是出错；后来发现只要用npm管理，Fabric就认为自己跑在服务器端的Node.js环境中，所以需要依赖一些后端解析dom的库——崩溃，我明明只是在浏览器中使用啊。Github上有人提过这个issue，建议提供前端版本的npm管理配置，但开源方好像没有精力搞这个事儿。

最后无奈，直接在最外层的html里加<script>标签引用，终于成功加载。标签引用，终于成功加载。标签引用，终于成功加载。

作者：风之思考
链接：https://www.jianshu.com/p/0901f06360f7