如何在缩放后正确翻译我的地图？

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。