如何在縮放後正確翻譯我的地圖？

Question

我在畫布上創建了一個像Super Smash Bros中的相機，其中相機的中心跟隨所有玩家的中心點和比例以包含所有玩家。

我有它設置，找到2個玩家之間的距離，如果它比畫布大小，相機規模降低以減少塊，玩家精靈的大小等

ctx.scale(cameraS,cameraS); 
ctx.translate(-(cameraX*cameraS)+(CANVAS_WIDTH/2),-(cameraY*cameraS)+(CANVAS_HEIGHT/2)); 

這些是縮放並將繪製的圖像移動到相對於屏幕的位置。

這是使用代碼的實際遊戲，正如您所看到的，圖像的縮放和移動稍微不正確，但我不確定爲什麼！ https://dl.dropboxusercontent.com/u/51784213/Conjugate/index.html

作爲參考，紅點是兩個玩家之間的中心位置。線條顯示實際畫布的死點。當縮放比例爲1（完全不縮放）時，紅點完全居中，因爲它應該是。當縮放開始減小時，紅點開始在奇怪的方向偏離中心。

要使代碼正常工作，即使在縮放過程中，點也應始終居中！

Answer 1

轉換以相反的順序應用;所以你先翻譯後再縮放。這意味着，對於一個點(x, y)，目前改造後，你會得到

( 
    (x + CANVAS_WIDTH/2 - cameraX*cameraS) * cameraS, 
    (y + CANVAS_HEIGHT/2 - cameraY*cameraS) * cameraS 
) 

什麼實際這裏需要的是帆布縮放(cameraX, cameraY)然後翻譯由實際所抵消，從而使(cameraX, cameraY)是在中心可見畫布。

或者更確切地說，這裏需要一個點(x, y)轉型是

( 
    (x - cameraX) * cameraS + CANVAS_WIDTH/2, 
    (y - cameraY) * cameraS + CANVAS_HEIGHT/2 
) 

因此，代碼變得，如果您選擇申請第一翻譯，

ctx.scale(cameraS,cameraS); 
ctx.translate(-cameraX+CANVAS_WIDTH/(2*cameraS),-cameraY+CANVAS_HEIGHT/(2*cameraS)); 

或者，如果您選擇apply縮放優先

ctx.translate(-cameraX*cameraS + CANVAS_WIDTH/2, -cameraY*cameraS + CANVAS_HEIGHT/2); 
ctx.scale(cameraS, cameraS); 

Working JSFiddle。