缩放和计算新鼠标点答案

【问题标题】：Scale and calculate new mouse Point缩放和计算新鼠标点
【发布时间】：2017-03-11 20:53:19
【问题描述】：

我必须在我的应用程序中创建缩放功能。 Zooming 听起来很容易，但我确实遇到了很大的麻烦。

好的，我有我的页面（橙色），这个页面上有一个 div（蓝色）。在这个 div 中是一个带有组（灰色）的 SVG。这个组有一个变换矩阵的偏移量。例如

<g transform="matrix(1,0,0,1,-188,-101)"><!-- [...] --></g>

您可以拖放元素，也可以移动组。现在，我想添加缩放功能。我通过改变矩阵来实现这一点。例如matrix(2,0,0,2,-188,-101) 是将比例加倍。

如果我只缩放组，我当前的元素超出了我的观点。我必须更改偏移量才能让它们回到视点。

我的第一个想法是将偏移量乘以 2。但这行不通。所以，我对这个话题进行了一些思考。我的下一个想法是获取鼠标点和到组中点的距离。然后按我的比例因子缩放这个距离。但这也行不通。我不知道如何解决这个问题。我还可以获得所有元素的所有高度和宽度。

【问题讨论】：

标签： javascript svg

【解决方案1】：

这里是如何获得比例：

var width = shape.width; 
var currentScaledWidth = width * oldScale; 
var scaledWidth = currentScaledWidth + (width * scale); 
var scale = (scaledWidth) / width;

那么你应该可以用它来获得位置

var x = mouseX * scale; 
var y = mouseY * scale;

然后就可以滚动容器了

var halfX = (parentElement.style.width / 2),
    halfY = (parentElement.style.height / 2); 

var centerX = (halfX > x)? 
    (x - (x - halfX)) 
:
    (x + (halfX - x));

var centerY = (halfY > y)? 
    (y - (y - halfY)) 
:
    (y + (halfY - y));

parentElement.scrollTo(centerX, centerY);

【讨论】：