放大JavaScript后计算点的坐标

Question

我需要在图像上做一些注释。此图像是可缩放的（可以放大和缩小）。现在的挑战是注释也应该随着缩放而移动。我怎样才能做到这一点？我知道缩放的“方向”取决于缩放时被视为“中心”的点，因此假设这个“中心”是 iamge 容器的绝对中心（宽度/2，高度/2），我如何获得缩放后图像上同一点的坐标？

例如，考虑以下两张图片：

Image-1（正常比例）：

Image-2（放大）：

如果我知道 Image-1 中红点的坐标（正常比例），如何获得 Image-2 中同一红点的坐标 (x,y)？请注意，图像容器的宽度和高度将在整个缩放过程​​中保持不变。

Answer 1

首先，您需要确定注释相对于图像中心的坐标。

因此，例如在 200 x 100 的图像上，当您将图像的中心作为原点时，原点位于左上角的点 (120,60) 将是 (20,-10)。

如果您将图像缩放 150%，您的新坐标将是这些坐标乘以 1.5 (=150%)。 在我们的示例中，这将是 30，-15。

你可以用原始原点计算回绝对值

Answer 2

此函数应返回从图像左上角测量的新 X 和 Y。 请记住，新坐标可能超出图像的宽度/高度，因为您选择的点可能会“缩小边缘”

/**
 * width: integer, width of image in px
 * height: integer, height of image in px;
 * x: integer, horizontal distance from left
 * y: integer, vertical distance from top
 * scale: float, scale factor (1,5 = 150%)
 */
const scaleCoordinates = (width, height, x, y, scale) =>{
	const centerX = width/2;
  const centerY = height/2;
 	const relX = x - centerX;
  const relY = y - centerY;
  const scaledX = relX * scale;
  const scaledY= relY * scale;
  return {x: scaledX + centerX, y: scaledY + centerY};
  

}

console.log(scaleCoordinates(100,100,25,50, 1.2));