缩放鼠标（例如谷歌地图）

Question

我为2D策略游戏编写了一个home-brew view_port类。平移（使用箭头键）和缩放（使用鼠标滚轮）工作正​​常，但我希望视图也可以 home 放置光标所在的位置，如Google Maps or Supreme Commander

我将为您省去如何实现缩放的细节，甚至是我正在使用的语言：这都是无关紧要的。重要的是缩放功能，它修改代表视图的矩形结构（x，y，w，h）。到目前为止代码看起来像这样：

void zoom(float delta, float mouse_x, float mouse_y)
{
    zoom += delta;
    view.w = window.w/zoom;
    view.h = window.h/zoom;  
    // view.x = ???
    // view.y = ???
}

在有人建议之前，以下将不工作：

view.x = mouse_x - view.w/2;
view.y = mouse_y - view.h/2;

这张照片说明了为什么，当我试图缩小笑脸时：

正如您所看到的那样，当鼠标下方的物体放置在屏幕中央时，它会停在鼠标下方，所以我们停止向它缩放！

如果你有一个数学头（你需要一个），任何帮助都会非常感激！

Answer 1

我设法找到解决方案，多亏了很多小小的图片：我会在这里发布算法以防其他人需要它。

Vect2f mouse_true(mouse_position.x/zoom + view.x, mouse_position.y/zoom + view.y);
Vect2f mouse_relative(window_size.x/mouse_pos.x, window_size.y/mouse_pos.y);   
view.x = mouse_true.x - view.w/mouse_relative.x;
view.y = mouse_true.y - view.h/mouse_relative.y;

这可确保放置在鼠标下方的对象停留在鼠标下方。您可以在github上查看代码，我还为youtube制作了展示演示。

Answer 2

在我的概念中，有一个摄像头和一个屏幕。 相机是移动部件。屏幕是可缩放的部分。

我制作了一个包含现场演示的示例脚本。 问题仅限于一个维度，以保持简单。 https://www.khanacademy.org/cs/cam-positioning/4772921545326592

var a = (mouse.x + camera.x) / zoom;

// now increase the zoom e.g.: like that:
zoom = zoom + 1;

var newPosition = a * zoom - mouse.x;

camera.setX(newPosition);
screen.setWidth(originalWidth * zoom);

对于2D示例，您只需为高度和y位置添加相同的代码。