图片标注工具选型

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

核心需求以下：

• 浏览器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>标签引用，终于成功加载。