7

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

图片描述

核心需求如下:

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


songofhawk
303 声望24 粉丝