坐标系映射之(点击图片哪里去哪里)

  • 坐标系映射之(点击图片哪里去哪里)已关闭评论
  • 245 次浏览
  • A+
所属分类:Web前端
摘要

提供一张2d编辑完成的户型图片,图片中有多个房间、尺寸比例不固定、还有2d户型图数据(墙体顶点坐标、漫游点坐标等),需要做到将2d编辑时提供的漫游点坐标映射到图片上,以做到用户点击图片某个位置时跳转至最近的漫游点VR视图中。


需求

提供一张2d编辑完成的户型图片,图片中有多个房间、尺寸比例不固定、还有2d户型图数据(墙体顶点坐标、漫游点坐标等),需要做到将2d编辑时提供的漫游点坐标映射到图片上,以做到用户点击图片某个位置时跳转至最近的漫游点VR视图中。

解决思路

  • 首先提供的2d坐标数据中的中心点(0,0)并不是户型的正中间,所以我们拿到数据后需要根据墙体顶点坐标分析出MaxXY与MinXY两个点的坐标也就是坐标系中实际户型图AABB包围盒的左下角坐标与右上角左边从而得到中心坐标系与将整体坐标系居中所需要的偏移量,然后偏移至正中心来方便后续计算

  • 接下来根据获取到的图片拿到它的长宽像素值,来同比例设置容器的大小,再拿到容器对角线长度与MaxXY与MinXY的距离值的比例,然后将漫游点的坐标数据去乘上这个比例值就得到了漫游点在以图片为背景的容器上正确的位置

  • 最后我们在每次用户点击时将获取到的坐标在漫游点集合中遍历一边得到两点间距离最小的漫游点便是我们想要点击的漫游点(可以设置阀值以保证精准性)

实现过程与代码

待更。。。