How do I translate a point from one rect to a point in a scaled rect?

Question

I have an image (i) that's been scaled from its original size (rectLarge) to fit a smaller rectangle (rectSmall). Given a point p in rectSmall, how can I translate this to a point in rectLarge.

To make this concrete, suppose I have a 20x20 image that's been scaled to a 10x10 rect. The point (1, 1) in the smaller rect should be scaled up to a point in the larger rect (i.e. (2,2)).

I'm trying to achieve this with:

result.x = point.x * (destRect.size.width / srcRect.size.width );
result.y = point.y * (destRect.size.height / srcRect.size.height);

However, the points generated by this code are not correct - they do not map to the appropriate point in the original image. What am I doing wrong?

Answer 1

What is the "appropriate point"? If the size of srcRect is larger than destRect then your code is correct. Also, don't forget that result.x and result.y will be a floating point number and to use them in the image you need to round it or do bilinear interpolation, etc. Before, I can give a more detailed answer, what are you going to do with result?

Answer 2

I guess the problem is that your rectangle is positioned not at (0, 0) and, therefore, you can't scale every point inside it the same way as you scale it's dimensions.

You will have to determine the offset from some anchor point in your rectangle (for example, top left point), then your resulting point would be anchor_point.x + offset.x * (horizontal_scale_ratio) and the same for y (with vertical_scale_ratio).

Ratios there are new_width / old_width and new_height / old_height.

Answer 3

What language are you using?

If this is C, and rect.size.height and the like are ints, then you have a major rounding problem. Say you're scaling point 10, 10 from a size 20x20 back up to a size 30x30. Your calculations will look like:

result.x = 10 * (30 / 20);

This simplifies to:

result.x = 10 * (1);

The simplest way to fix this is to get rid of the parentheses:

result.x = point.x * destRect.size.width / srcRect.size.width;
result.y = point.y * destRect.size.height / srcRect.size.height;

Now your calculation, 10 * 30 / 20, simplifies to 300 / 20 and then to 15, which is what you want.

Note, you still have a slight rounding problem, but unless you can get subpixel locations, this is about as close as you're gonna get.