【缩放】实现svg以鼠标为焦点缩放

Posted 2023-04-12

参考技术A

以鼠标为焦点缩放 = 以原点为焦点缩放 + 位移。利用svg的属性viewbox：x，y控制位移，width，height控制缩放。

在当前视窗内，改变viewBox的width与height即可实现以左上角为原点的缩放，故只需计算以左上角为焦点缩放后和以鼠标位置为焦点缩放后两个原点的偏移量即可。后文不再赘述scale与viewbox的关系。

以鼠标位置为基准计算新原点位置

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

【中文标题】鼠标缩放实现，以鼠标位置为中心 [算法]

【英文标题】：Mouse scale implementation, centered to mouse position [Algorithmic]

【发布时间】：2022-01-21 06:41:13

【问题描述】：

如何实现鼠标位置的放大/缩小中心？

例如（在一维示例中）

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
   

【问题讨论】：

发布您当前的代码 - 它可以更轻松地解释需要更改的内容。

@500-InternalServerError 完成 :)

【参考方案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)
);