基于canvas绘图 缩放 做标记

技术要点:

  1.img 绘制到canvas

  2.绘制完成以后进行拖拽,缩放

  3.使用canvas画图,在绘制的img上进行标记划线,当然可以实现跟过功能,例如百度地图的功能,做单个标记,区域标记等。

  4.实现坐标等转换,标记区域的所有坐标都是基于相对原始图片的坐标,便于其他操作。

实际项目中的开发实现效果截图如下:

      点击边界标记,就可以开始左键划线功能,会自动形成闭合区域,点击右键结束划线。同时可以删除当前绘制的区域。

  

区域标记完成以后,就可以进行设备的选择,设备从左侧列表点击以后,放到右侧canvas 的区域,放下后还可以继续拖拽改变其位置,而且保持对应关系。

这些标记区域和标记点都可以基于底图的缩放和拖拽进行位置的等比例渲染,但是保存的坐标始终是基于原图的。

猜你喜欢

转载自www.cnblogs.com/-youth/p/9183670.html