缩放并计算新的鼠标点

Question

我必须在我的应用程序中创建缩放功能。缩放听起来真的很容易，但我真的很麻烦。

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

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

您可以拖放元素，也可以移动组。现在，我想添加缩放功能。我通过改变矩阵来实现这一点。例如矩阵（2,0,0,2，-188，-101）是规模的两倍。

如果我只缩放组，我当前的元素不在我的观点范围内。我必须改变偏移量才能让它们回到视点。

我的第一个想法是将偏移量乘以2.但这不起作用。所以，我想了一下这个话题。我的下一个想法是获得鼠标点和距离组中间点的距离。然后按我的比例因子缩放此距离。但这也行不通。我不再有任何想法如何解决这个问题。 我也可以获得所有元素的所有高度和宽度。

Answer 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);