建站
咨詢
售后
建站咨詢
新聞中心
大家好，我是前端西瓜哥。
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比越城網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式越城網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋越城地區(qū)。費(fèi)用合理售后完善，十多年實(shí)體公司更值得信賴。
圖形編輯器的坐標(biāo)系有兩種。
一個(gè)是場景（scene）坐標(biāo)系，一個(gè)是 視口（viewport）坐標(biāo)系。視口就是場景的一個(gè)子區(qū)域。
假設(shè)我們的視口的原點(diǎn)，離場景原點(diǎn)的坐標(biāo)水平和垂直距離分別為 scrollX 和 scrollY。
先 不考慮縮放，假設(shè)我們在視口坐標(biāo)上的某個(gè)地方點(diǎn)擊了一下，這個(gè)坐標(biāo)是 ??(x, y)??。這個(gè)坐標(biāo)在場景坐標(biāo)系中，就是：
const sceneX = scrollX + x;
const sceneY = scrollY + y;
挺簡單。
視口坐標(biāo)轉(zhuǎn)換為場景坐標(biāo)
下面我們引入畫布縮放，即畫布可以縮小和放大，對(duì)應(yīng)的一個(gè)比例值 zoom。
視口中的某個(gè)坐標(biāo) (x, y) 在場景坐標(biāo)系，則是 ：
function viewportCoordsToSceneCoords(x, y, scrollX, scrollY, zoom) {
return {
x: scrollX + x / zoom,
y: scrollY + y / zoom
}
}之所以要用 x 除以 zoom，是因?yàn)榇藭r(shí)視口中展示的是縮放后的圖形，里面的坐標(biāo)都是縮放后的值。所以需要先轉(zhuǎn)換為 zoom 值為 1 對(duì)應(yīng)的真實(shí)值。
場景坐標(biāo)轉(zhuǎn)換為視口坐標(biāo)
然后我們反過來，如何從場景坐標(biāo) (x, y) 轉(zhuǎn)換為視口坐標(biāo)？將前面的公式做等式變換即可：
function sceneCoordsToViewportCoords(x, y, scrollX, scrollY, zoom) {
return {
x: (x - scrollX) * zoom,
y: (y - scrollY) * zoom
};
}我們通常是使用按鍵加滾輪的方式讓畫布以光標(biāo)為中心進(jìn)行縮放，或按按鈕進(jìn)行縮放，
為了讓縮放后的場景還能對(duì)上縮放前光標(biāo)的位置，我們需要計(jì)算縮放后的 scrollX 和 scrollY，進(jìn)行校準(zhǔn)。
核心思路是 保持縮放前點(diǎn)到視口左上角距離（視口坐標(biāo)系）相同。
function calScrollVal(cx, cy, prevZoom, zoom, scrollX, scrollY) {
// 先計(jì)算目標(biāo)點(diǎn)的場景坐標(biāo)（這里 cx 和 cy 是基于視口坐標(biāo)系的）
const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords(cx, cy, prevZoom, scrollX, scrollY);
// 縮放后畫布縮放比變成了 zoom，距離視口左上角的距離變成了 cx / zoom
// 減去這個(gè)距離，就是新的 scrollX 了。
const newScrollX = sceneX - cx / zoom;
const newScrollY = sceneY - cy / zoom;
return {
x: newScrollX,
y: newScrollY
};
}再說點(diǎn)別的。
可能會(huì)有這么一種情況，就是實(shí)際的視口區(qū)域的原點(diǎn)坐標(biāo)有一些偏移，偏移了 offsetX 和 offsetY，見下圖。
我們只需要將前面代碼中的 scrollX 變成 (scrollX + offsetX)，scrollY 變成 (scrollY + offsetY)，其他不變。
就這些了。
總結(jié)一下，視口坐標(biāo)是場景坐標(biāo)平移并縮放后的結(jié)果，所以視口轉(zhuǎn)場景，需要除以 zoom 再加上偏移值。在圖形編輯器中，會(huì)有相當(dāng)多的坐標(biāo)系轉(zhuǎn)換邏輯，這兩個(gè)坐標(biāo)系的關(guān)系需要好好消化理解。
新聞名稱：圖形編輯器：場景坐標(biāo)、視口坐標(biāo)以及它們之間的轉(zhuǎn)換
當(dāng)前網(wǎng)址：http://m.5511xx.com/article/cdisjjs.html
