JS圖形編輯器場景坐標視口坐標的相互轉換

更新時間：2023年01月16日 10:09:51 作者：西瓜

這篇文章主要為大家介紹了JS圖形編輯器之場景坐標視口坐標的相互轉換示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

圖形編輯器坐標系

圖形編輯器的坐標系有兩種。

一個是場景（scene）坐標系，一個是 視口（viewport）坐標系。視口就是場景的一個子區(qū)域。

假設我們的視口的原點，離場景原點的坐標水平和垂直距離分別為 scrollX 和 scrollY。

先 不考慮縮放，假設我們在視口坐標上的某個地方點擊了一下，這個坐標是 (x, y)。這個坐標在場景坐標系中，就是：

const?sceneX?=?scrollX?+?x;
const?sceneY?=?scrollY?+?y;

挺簡單。

視口坐標轉換為場景坐標

下面我們引入畫布縮放，即畫布可以縮小和放大，對應的一個比例值 zoom。

視口中的某個坐標 (x, y) 在場景坐標系，則是：

function?viewportCoordsToSceneCoords(x,?y,?scrollX,?scrollY,?zoom)?{
??return?{
??x:?scrollX?+?x?/?zoom,
??y:?scrollY?+?y?/?zoom
??}
}

之所以要用 x 除以 zoom，是因為此時視口中展示的是縮放后的圖形，里面的坐標都是縮放后的值。所以需要先轉換為 zoom 值為 1 對應的真實值。

場景坐標轉換為視口坐標

然后我們反過來，如何從場景坐標 (x, y) 轉換為視口坐標？將前面的公式做等式變換即可：

function?sceneCoordsToViewportCoords(x,?y,?scrollX,?scrollY,?zoom)?{
??return?{
??x:?(x?-?scrollX)?*?zoom,
??y:?(y?-?scrollY)?*?zoom
??};
}

我們通常是使用按鍵加滾輪的方式讓畫布以光標為中心進行縮放，或按按鈕進行縮放，

為了讓縮放后的場景還能對上縮放前光標的位置，我們需要計算縮放后的 scrollX 和 scrollY，進行校準。

核心思路是 保持縮放前點到視口左上角距離（視口坐標系）相同。

function?calScrollVal(cx,?cy,?prevZoom,?zoom,?scrollX,?scrollY)?{
??//?先計算目標點的場景坐標（這里?cx?和?cy?是基于視口坐標系的）
??const?{?x:?sceneX,?y:?sceneY?}?=?viewportCoordsToSceneCoords(cx,?cy,?prevZoom,?scrollX,?scrollY);
??//?縮放后畫布縮放比變成了?zoom，距離視口左上角的距離變成了?cx?/?zoom
??//?減去這個距離，就是新的 scrollX 了。
??const?newScrollX?=?sceneX?-?cx?/?zoom;
??const?newScrollY?=?sceneY?-?cy?/?zoom;
??return?{
????x:?newScrollX,
????y:?newScrollY
??};
}

再說點別的。

可能會有這么一種情況，就是實際的視口區(qū)域的原點坐標有一些偏移，偏移了 offsetX 和 offsetY，見下圖。