图像缩放几何

Question

这是一个与编程有关的问题，但有点非编程问题。我在一个基于web的应用程序中执行图像缩放，我需要维护我的图像相对于一个固定的位置，即使它是由其左上角锚定的。希望这张图片能让这一切成为可能。

​

其思想是，C是一个固定的位置，我想保持作为我的扩展起源，而不是B，这是当前的css行为。C可能在实际图像中，也可能不在实际图像中。因此，作为图像尺度，B需要相对于C移动:如果图像缩放为50%，则B将移动到C的1/2的距离，如果图像增长到其大小的200%，则B将移动两倍于C的距离。

最后，在给定C的位置和图像的缩放因子的情况下，为B寻找x&y的公式。不确定图像的大小需要成为其中的一部分，但我有，如果需要的话。

谢谢你的帮助！

我知道的事情：

1. I知道图像矩形的宽度和高度，
2. 我知道A.
3. 的B的偏移量，A.
4. 的偏移量，知道图像的比例因子，

<代码>G 210

Answer 1

实际上，你想把C当作原点，然后用标度量来“移动”B。通过将它作为从C到B的向量，并将其按所讨论的数量进行缩放，您可以相当容易地做到这一点。

newBx = Cx - (Cx - Bx) * scale;
newBy = Cy - (Cy - By) * scale;

例如，等级为0.5 (50%)，这成为：

newBx = 100 - (100 - 50) * 0.5 
      = 100 - 25
      = 75                 // 1/2 the distance to C
newBy = 100 - (100 - 25) * 0.5
      = 100 - 37.5
      = 62.5               // 1/2 the distance to C

比额表为2 (200%)：

newBx = 100 - (100 - 50) * 2 
      = 100 - 100
      = 0                  // 2x the distance to C
newBy = 100 - (100 - 25) * 2
      = 100 - 150
      = -50                // 2x the distance to C

Answer 2

首先，您需要计算从B到C的距离，然后将其更改为刻度，这就是新B相对于C的位置：

newB = C - (C - B) * scale

因为您需要坐标，所以x和y的函数是相同的：

newBx = Cx - (Cx - Bx) * scale
newBy = Cy - (Cy - By) * scale

(所使用的比例值不是百分比，而是大小乘数。1.5的规模增加了50%。)

Answer 3

因此，您希望图像中的点C (目前位于(C_x, C_y) )在缩放图像的倍数为s后保持在同一位置。

C的新位置，比如说，C_new = (s*C_x,s*C_y)。

你想要移动图像以便C_new = C。

这意味着您必须通过B = (B_x,B_y)移动(s*C_x-C_x,s*C_y-C_y)，或者图像的新来源，比如B_new是：

B_new = (B_x + s*C_x-C_x,  B_y + s*C_y-C_y)

所以现在您可以在B_new上显示缩放的图像--而C应该保持不变。