鼠标缩放实现，以鼠标位置为中心 [Algorithmic]

Question

如何实现缩放 in/out 以鼠标位置为中心？

例如（在一维示例中）

C the position of the center (C = 3)
M the point where the zoom is applied (M = 5)
[___] represent the screen

[__C_M___]
after a zoom in, I increment the zoomFactor and it render like that :
[__C__M__]
but I'll like to render like that (The point M dont move): 
[_C__M___]

我需要向中心应用哪个偏移量才能获得此显示？

在这个简单的例子中，它是 -1

提前致谢

[编辑：添加我的代码]

public void zoomCallback(boolean zoomUp, Point origine) {
      // origine is the mouse position relatively to the screen
      if ((zoomLevel == 0.75 && !zoomUp) || (zoomLevel == 3 && zoomUp))
         return;
      zoomLevel *= zoomUp ? 1.25 : 0.75;
      zoomLevel = Math.max(0.75, zoomLevel);
      zoomLevel = Math.min(3, zoomLevel);
      // zoomLevel is used the scale the map when displaying it
      Point mapCenter = this.getMapCenter();
      // the map center is juste the position of map center relatively to the screen
      this.mapOffset.translate(/* ??? , ??? */);
      // the mapOffset is used to print the map on the screen
   }

Answer 1

这里是偏移量的计算：

oldDistance = M - C
oldZoomLevel = zoomLevel
"Apply the zoomLevel modification"
newDistance = oldDistance * zoomLevel / oldZoomLevel
offset = oldDistance - newDistance

代码：

double old_xDistanceToCenter = (origine.getX() - getMapCenter().getX());
double old_yDistanceToCenter = (origine.getY() - getMapCenter().getY());
double oldZoomLevel = zoomLevel;

zoomLevel += zoomUp ? 0.25 : -0.25;
zoomLevel = Math.max(0.75, zoomLevel);
zoomLevel = Math.min(3, zoomLevel);

double xDistanceToCenter = old_xDistanceToCenter * zoomLevel / oldZoomLevel;
double yDistanceToCenter = old_yDistanceToCenter * zoomLevel / oldZoomLevel;

this.mapOffset.translate(
     (int) Math.round(old_xDistanceToCenter - xDistanceToCenter),
     (int) Math.round(old_yDistanceToCenter - yDistanceToCenter)
);

鼠标缩放实现，以鼠标位置为中心 [Algorithmic]

Mouse scale implementation, centered to mouse position [Algorithmic]

algorithm

geometry