マウス（Googleマップなど）にズーム

Question

私は2D戦略ゲームのために自家製のビューポートクラスを作成しました。 （マウスホイール付き）（矢印キーで）パンとズームは正常に動作しますが、私はあなたに詳細を惜しまます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; 

この絵は、なぜ示しています。マウスの下のオブジェクトをtに置かれたとき、あなたが見ることができるように

彼は画面の中心にマウスの下に停止するので、私たちはそれに向かってズームを停止します！

数学のための頭があるなら（これが必要です）、これについての助けがあれば幸いです！

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

私の考えでは、カメラとスクリーンがあります。 カメラが動く部分です。画面はスケーラブルな部分です。

ライブデモを含むサンプルスクリプトを作成しました。 問題を単純にするため、問題は1つの次元にのみ縮小されます。 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位置に対して同じコードを追加することができます。