图像缩放几何 [英] Image scaling geometry

问题描述

这是非常编程有关，但有点非编程问题。我在一个基于Web的应用程序进行图像缩放，我需要相对于即使秤的顶部，左上角锚定一个固定的位置，我的形象维护。希望的图形使这成为可能。

这个想法是，C是我要保持我的缩放来源，而不是B上这是当前的CSS行为一个固定的位置。 C可以或可以不是实际的图像内。所以作为图像规模，B需要相对移动℃。实施例：如果图像被缩放50％，则B将移动1/2至C的距离如果图像增长到其尺寸的200％，则B将从C移动距离的两倍了。

最终为寻找X'放一个公式; y代表乙定的C的用于图像的位置和比例因子。不能确定图像的大小需要是这部分，但是我有，如果需要它。

感谢您的帮助！

事情我知道了：

1. 我知道的宽度和高度
   图像的矩形。


2. 我知道，从A
偏移的B

3. 我知道，从A偏移的C


4. 我知道在图像的百分比比例因子。

解决方案

实际上，要通过缩放量对待C为原点，只是动B。通过将其视为从C向量B，并通过有关金额比例，你可以做到这一点很容易。

  newBx = CX  - （CX  -  Bx的）*规模;
纽比= CY  - （CY  - 通过）*规模;
 

例如，为0.5（50％）的比例，这变为：

  newBx = 100  - （100  -  50）* 0.5
      = 100  -  25
      = 75 // 1/2到C的距离
纽比= 100  - （100  -  25）* 0.5
      = 100  -  37.5
      = 62.5 // 1/2到C的距离
 

随着2（200％）的比例：

  newBx = 100  - （100  -  50）* 2
      = 100  -  100
      = 0 // 2倍到C的距离
纽比= 100  - （100  -  25）* 2
      = 100  -  150
      = -50 // 2倍到C的距离
 

This is very programming related but a somewhat non-programming question. I am performing image scaling in a web based application and I need to maintain my image relative to a fixed location even though it scales anchored by its top, left corner. Hope the graphic make this possible.

The idea is that C is a fixed location that I want to maintain as my scaling origin rather than B which which is the current css behavior. C may or may not be within the actual image. So as the image scale, B needs to move relative to C. Example: if the image was scaled 50%, then B would move 1/2 the distance to C. If the image grew to 200% of its size, then B would move twice the distance away from C.

Ultimately looking for a formula for x & y for B given the location of C and a scaling factor for the image. Not sure the size of the image needs to be part of this but I have it if needed.

Thanks for any help!

Things I know:

1. I know the width and height of the image rectangle.
2. I know the offset of B from A.
3. I know the offset of C from A.
4. I know the scale factor in percent of the image.

解决方案

Effectively, you want to treat C as the origin, and just "move" B by the scaling amount. By treating it as a vector from C to B, and scaling it by the amount in question, you can do this fairly easily.

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

For example, with a scale of 0.5 (50%), this becomes:

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

With a scale of 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

这篇关于图像缩放几何的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！