Position an UIImageView over another with scaling

Question

Is there a method on UIImageView that tells me the position of its image within its bounds? Say I have an image of a car, like this:

This image is 600x243, and, where the rear wheel should be, there's a hole which is 118,144,74,74 (x,y,w,h).

I want to let the user see different rear wheel options, and I have a few wheel images to choose from (all square, so they are easily scaled to match the hole in the car).

I wanted to place the car image in a UIImageView whose size is arbitrary based on layout, and I wanted to see the whole car at the natural aspect ratio. So I set the image view's content mode to UIViewContentModeScaleAspectFit, and that worked great.

For example, here's the car in an imageView that is 267x200:

I think doing this scaled the image from w=600 to w=267, or, by a factor of 267/600=0.445, and (I think) that means that the height changed from 200 to 200*0.445=89. And I think it's true that the hole was scaled by that factor, too

But I want to add a UIImageView subview to show the wheel, this is where I get confused. I know the image size, I know the imageView size, and I know the hole frame in terms of the original image size. How do I get the hole frame after the image is scaled?

I've tried something like this:

1. determine the position of the car image in its UIImageView. That's something like:

   float ratio=carImage.width/carImageView.frame.size.width;  // 0.445
   CGFloat yPos=(carImageView.frame.size.height-carImage.height)/2;  // there should be a method for this?
   

2. determine the scaled frame of the hole:

   CGFloat holeX = ratio*118;
   CGFloat holeY = yPos + ratio*144;
   CGFloat holeEdge = ratio*74;
   CGRect holeRect = CGRectMake(holeX,holeY,holeEdge,holeEdge);
   

But there must be a better way. These calculations (if they are right) are only right for a car image view that is taller than the car. The code needs to be different if the image view is wider.

I think I can work out the logic for a wider view, but it still might be wrong. For example, that yPos calculation. Do the docs say that, for content mode = AspectFit, the image is centered inside the larger dimension? I don't see that any place.

Please tell me there's a better way, or, if not, is it proven that my idea here will work for arbitrary size images, image views, holes?

Thanks.

Answer 1

The easiest solution (by far) is to simply use the same sizes for both the car image and the wheel option images.

Just give the wheel options a transparent padding (easy to do in nearly every graphics editing program), and overlay them over the car with the same frame.

You may increase your asset sizes by a minuscule amount.. but it'll save you one hell of a headache trying to work out positions and sizings, especially as you're scaling the car image.