Question

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.

Answer 1

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