任意の点を中心に、拡大・縮小を以前やったんだけれど
どうもうまくいかないので、ちょっとアルゴリズムを修正。
今回はGoogleマップを参考にしてみました。
拡大すると、マウスカーソルを中心に画面が広がり
マウスカーソルが指している絶対的な位置は変わらない。
一方で、点や直線などのベクトル情報を実数倍して
そのまま表示すると、原点位置を中心に拡大する。
原点位置を中心に拡大させた後、
表示の際の原点位置をズラしてみる。
マウスカーソルが原点にあるとき、ズラす必要は無く
マウスカーソルが原点と対角上にあるとき、
拡大率×描画領域一辺の長さだけズラす必要がある。
次にこれを数値で書いてみる。
マウスホイール操作により、1.5倍に拡大することとする。
描画領域(正方形)の一辺の長さを100とすると、
マウスカーソルが(0, 0)にあるとき、そのまま拡大。
マウスカーソルが(100, 100)にあるとき、
正方形は原点を中心に(150, 150)に拡大されるが、
マウスカーソルを中心に拡大したいので
(150-100, 150-100) = (50, 50)だけ原点をズラす必要がある。
マウスカーソルが(50, 50)の位置にあったときは、
(25, 25)だけズラす必要がある。
ズラす量は、全体の長さに対する比で表現することができる。
一般化してみると、
マウスカーソルが(x, y)のときにズラす量は、
(0.5x, 0.5y)であるということがわかる。
意外と単純だった。
これをプログラミングしたら、かなりそれっぽくなった。
まだほんのちょっとだけおかしな挙動を示すけど、
任意位置の拡大縮小における位置修正については問題無さそう。
どうもうまくいかないので、ちょっとアルゴリズムを修正。
今回はGoogleマップを参考にしてみました。
拡大すると、マウスカーソルを中心に画面が広がり
マウスカーソルが指している絶対的な位置は変わらない。
一方で、点や直線などのベクトル情報を実数倍して
そのまま表示すると、原点位置を中心に拡大する。
原点位置を中心に拡大させた後、
表示の際の原点位置をズラしてみる。
マウスカーソルが原点にあるとき、ズラす必要は無く
マウスカーソルが原点と対角上にあるとき、
拡大率×描画領域一辺の長さだけズラす必要がある。
次にこれを数値で書いてみる。
マウスホイール操作により、1.5倍に拡大することとする。
描画領域(正方形)の一辺の長さを100とすると、
マウスカーソルが(0, 0)にあるとき、そのまま拡大。
マウスカーソルが(100, 100)にあるとき、
正方形は原点を中心に(150, 150)に拡大されるが、
マウスカーソルを中心に拡大したいので
(150-100, 150-100) = (50, 50)だけ原点をズラす必要がある。
マウスカーソルが(50, 50)の位置にあったときは、
(25, 25)だけズラす必要がある。
ズラす量は、全体の長さに対する比で表現することができる。
一般化してみると、
マウスカーソルが(x, y)のときにズラす量は、
(0.5x, 0.5y)であるということがわかる。
意外と単純だった。
これをプログラミングしたら、かなりそれっぽくなった。
まだほんのちょっとだけおかしな挙動を示すけど、
任意位置の拡大縮小における位置修正については問題無さそう。