需求
提供一張2d編輯完成的戶型圖片,圖片中有多個房間、尺寸比例不固定、還有2d戶型圖資料(墻體頂點坐標、漫游點坐標等),需要做到將2d編輯時提供的漫游點坐標映射到圖片上,以做到用戶點擊圖片某個位置時跳轉至最近的漫游點VR視圖中,
解決思路
-
首先提供的2d坐標資料中的中心點(0,0)并不是戶型的正中間,所以我們拿到資料后需要根據墻體頂點坐標分析出MaxXY與MinXY兩個點的坐標也就是坐標系中實際戶型圖AABB包圍盒的左下角坐標與右上角左邊從而得到中心坐標系與將整體坐標系居中所需要的偏移量,然后偏移至正中心來方便后續計算
-
接下來根據獲取到的圖片拿到它的長寬像素值,來同比例設定容器的大小,再拿到容器對角線長度與MaxXY與MinXY的距離值的比例,然后將漫游點的坐標資料去乘上這個比例值就得到了漫游點在以圖片為背景的容器上正確的位置
-
最后我們在每次用戶點擊時將獲取到的坐標在漫游點集合中遍歷一邊得到兩點間距離最小的漫游點便是我們想要點擊的漫游點(可以設定閥值以保證精準性)
實作程序與代碼
待更,,,
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/544781.html
標籤:其他
上一篇:Typescript 回呼函式、事件偵聽的型別定義與注釋--拾人牙慧
下一篇:Vue相關筆記
