如何放大一个点（背后的数学）

Question

我正在研究分形图。我需要能够放大特定点。

这是我到目前为止所得到的。如果将鼠标放在整个缩放的相同位置，它就可以工作。但是如果你缩放部分方向然后将鼠标移动到一个新位置并尝试从那里放大一些，它会开始全部跳跃。

scale_change = zoom * ((button == SCROLL_DOWN) ? ZOOM_INC : -ZOOM_INC);
zoom += scale_change;
center->x -= (mouse->x - (IMG_SIZE / 2)) * scale_change;
center->y -= (mouse->y - (IMG_SIZE / 2)) * scale_change;

我认为它的某些部分过于简单了？有一些我不考虑的变量？但是，如果你不移动鼠标，它确实有效。

Answer 1

最好的方法可能是使用变换矩阵来缩放图像并找出鼠标所在的缩放图像中的哪个点，这样您就可以根据该点进行变换。

我知道你在C中工作，但我在js中创建了一个例子，因为它允许我更容易地演示工作代码。单击图像并使用Z和X进行放大和缩小。 https://jsfiddle.net/7ekqg8cb/

大多数代码都是实现矩阵乘法，矩阵求逆和矩阵点变换。重要的是：

var scaledMouse = transformPoint(mouse);

matrixMultiplication([1, 0, scaledMouse.x,
                      0, 1, scaledMouse.y,
                      0, 0, 1]);
var scale = 1.2;
if (direction) {
    matrixMultiplication([scale, 0, 0,
                          0, scale, 0,
                          0, 0, 1]);
}
else {
    matrixMultiplication([1/scale, 0, 0,
                          0, 1/scale, 0,
                          0, 0, 1]);
}

matrixMultiplication([1, 0, -scaledMouse.x,
                      0, 1, -scaledMouse.y,
                      0, 0, 1]);

transformPoint使用变换矩阵的逆来找出鼠标相对于变换图像的位置。然后，变换矩阵被平移，缩放和平移，以围绕该点缩放变换矩阵。