The zoom scale
,contentOffset
and frame
of the UIScrollView
will present a sub rectangle of the thumbnail.
Rescale that rectangle proportionally against the higher res version of your image.
e.g
Your scroller has bounds of 100px
x 100px
Your thumbnail is 100px
x 100px
and is zoomed at 4x
with a content offset of (x:100,y:100)
. You will see a sub rectangle of frame (x:25,y:25,w:25,h:25) against the original thumbnail inside the 100x100 window of the scroller i.e blurry. The width and height comes from the scrollers frame.
Once you flip in a high res image of 1000px
x 1000px
you are going to want to present the same chunk of the image except now you present (x:250,y:250,w:250,h:250)
by setting the zoom to 0.4
. contentOffset
remains the same.
Note that the zoom of 1x
and zero offset which would present the whole thumbnail image is a zoom of 0.1x
and zero offset against the higher res.
BUT
You are overthinking the issue. Your container UIImageView
does all the work for you. Once you reach your target zoom point simply load the higher res image into the imageView (myImageView.image = hiresImage
) and it will "just work" assuming your contentMode is set to Scale To Fill
(UIViewContentModeScaleToFill
) or Aspect Fill
. The low res image will be replaced by the high res version in exactly the right position.