图上添加标记点

少锋 发布于:2025-02-13 03:39:32

一个工具,用于在图上添加标记点,可以获取点位在图上的百分比

经常遇到图片上添加标记点的项目,通过浏览器一点点调整或者通过设计图计算比较慢,所以专门做了一个工具,用于在图上添加标记点。


添加图上标记.png


将需要标记的图片拖动或者点击上传到网页中,点击在图上标记点位,为了避免出现点位密集无法点击,设置了拖动功能,如果点位位置不对,可以拖动点位进行调整

添加点位.png

如果拖动不到对应位置,也可以通过点击图片下方按钮,通过手动修改位置弹窗来手动修改点的位置,以及添加文字和删除点位

360截图20250213114414.png


如果上传图片错误,可以通过重新上传底图按钮,重新上传图片


添加标记点之后,下边导出的有输出的json格式的点位数组,位置转换为图片百分比了,导出的数组,可以通过上传位置按钮,重新上传回去,如果设计图变化,方便重新调整位置


资源网址:http://test1.h5.org.cn/fanqie/tools/index.html#/



觉得有用请点个赞吧!
0 55