图片标注工具选型

2018-08-10 admin

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

图片描述

核心需求如下:

  • 浏览器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://segmentfault.com/a/1190000015959893

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37692.html

文章标题:图片标注工具选型

相关文章
JavaScript开发工具
常用的有sublime,webstorm,notepad++等 ...
2015-11-12
JS动态修改图片的URL(src)的方法
本文实例讲述了JS动态修改图片的URL(src)的方法。分享给大家供大家参考。具体如下: 下面的JS代码可以动态修改图片地址,以显示一张新的图片,实际上是通过修改图片的src属性来实现的 &lt;!DOCTYPE html&gt; &lt;...
2017-03-22
最简单的JavaScript图片轮播代码(两种方法)
通过改变每个图片的opacity属性: 素材图片: 代码一: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta cha...
2017-03-21
五款超实用的开源SVG工具
本文我们将分享5款超实用的开源的SVG工具:   1. SharpVectorGraphics (SVG)   SVG是基于Microsoft .Net开源项目设计而来,是建立在.Net framework上使用SVG的一款应用,支持生成、...
2016-01-13
15个提高编程技巧的JavaScript工具
JavaScript鑴氭湰搴撴槸涓€涓�棰勫厛鐢↗avaScript璇�瑷€鍐欏ソ鐨勫簱锛屽畠鏂逛究浜嗘垜浠�寮€鍙戝熀浜嶫avaScript鐨勫簲鐢ㄧ▼搴忥紝鐗瑰埆閫傚悎AJAX鍜屽叾浠栦竴浜涗互Web涓轰腑蹇冪殑鎶€鏈�銆侸avaScr...
2015-11-12
五个值得尝试的前端开发工具
在过去的几年时间里,出现了许多全新的网页应用程序,不过,由于应用程序的功能越来越丰富,也导致了前端开发的复杂度大幅增加。 现在也有不少前端开发工具,比如Backbone和EmberJS框架都能提供稳定的App开发解决方案。同时,Javasc...
2015-12-23
12个Web设计师必备的Bootstrap工具
作为一位设计师,会经常追寻新鲜有趣的设计工具,这些工具会提高工作的效率,使得工作更有效, 最重要的是使工作变得更方便。非常肯定的说,随着日益增长的工具和应用的数量,设计和开发变得越来越简单了。其中最普遍使用的最终框架 之一是 Bootstr...
2015-12-24
利用n 升级工具升级Node.js版本及在mac环境下的坑
一、利用n 升级Node.js 最近在用NPM安装一个nodejs工具时发现,我的nodejs的版本有些旧了。这不是大问题,只要升级就可以了,当然,重新从nodejs.org最新版本是一种方法,但我想应该有更简单的方法,那就是使用 n 这个...
2017-03-17
javascript控制图片播放的实现代码
一般实现用鼠标控制图片的滚动效果都比较麻烦,大段大段的代码让新手头疼无从下手,下面我来写个简单的javascript控制图片滚动的效果。代码简洁明了,兼容ie、firefox和google浏览器。 分享代码如下: &lt;!DOCTYPE ...
2017-03-29
纯JS实现本地图片预览的方法
本文实例讲述了纯JS实现本地图片预览的方法。分享给大家供大家参考。具体如下: 刚突然看到,网上已经有很多类似的代码,但没找到一个合适的。就拿自己以前写的写了一个。代码比较简洁,引用了一个我之前写的js.方法可以单独剥离出来使用,未测太多兼容...
2017-03-27
回到顶部