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

【问题标题】：How do I correctly translate my map after scaling?缩放后如何正确翻译我的地图？
【发布时间】：2013-05-09 00:37:55
【问题描述】：

我正在画布中创建一个相机，就像 Super Smash Bros 中的相机一样，相机的中心跟随所有玩家的中心点并缩放以包含所有玩家。

我设置它来查找两个玩家之间的距离，如果它大于画布大小，则相机比例会降低以减小块、玩家精灵等的大小。

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（根本没有缩放）时，红点完全居中。当缩放开始减小时，红点开始以奇怪的方向偏离中心。

为了使代码正常工作，点应始终居中，即使在缩放过程中也是如此！

【问题讨论】：

【解决方案1】：

转换以相反的顺序应用；所以你首先翻译然后缩放。这意味着对于一个点(x, y)，在当前的转换之后，你得到

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

这里实际需要的是通过缩放的(cameraX, cameraY) 平移画布，然后被实际的(CANVAS_WIDTH/2, CANVAS_HEIGHT/2) 偏移，这样(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));

或者，如果您选择应用先缩放

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

【讨论】：