Search code examples
iosswiftuiscrollviewuiimageviewzooming

Scroll and zoom to specific CGRect of UIImageView


I have a UIScrollView and a UIImageView inside. The UIScrollView size is 350x350 and the image inside the UIImageView is 350x350.

The UIScrollView has a zoomScale of 4.

I want to show only the specific point of the image rect:

CGRect(x: 100, y: 100, width: 100, height: 100)

For better understanding, only the white rect inside the images:

x:100, y:100, width:100, height:100

enter image description here

x:150, y:150, width:100, height:100

enter image description here

What i've done so far could not do the trick:

    self.image.image = UIImage(named: "horse_marked_100x100")
    self.imageScroller.maximumZoomScale = 10
    self.imageScroller.minimumZoomScale = 1
    self.imageScroller.clipsToBounds = true
    self.imageScroller.delegate = self
    self.imageScroller.isScrollEnabled = false
    self.imageScroller.scrollRectToVisible(CGRect(x: 100, y: 100, width: 100, height: 100), animated: false)
    self.imageScroller.zoomScale = 4

Solution

  • You can use:

        scrollView.zoom(to: CGRect(x: 100, y: 100, width: 100, height: 100), animated: true)
    

    You should only take care to have the desired size covered by the maximumZoomScale of the scroll view. For instance, in this example, you won't be able to zoom in a rect smaller than 35 x 35, because you have a maximumZoomScale of 10. In your example you don't have any problems with this.

    Note: the CGRect should be in the coordinate space of the view returned by viewForZooming(in:). This is a UIScrollViewDelegate method which must be implemented in order to enable zooming. Here, you have to simply return the UIImageView inside the scroll view.

    UPDATE:

    Just to clarify what you tried out so far and why it does not work: scrollView.scrollRectToVisible(_:, animated:) will scroll in a position where the passed CGRect is visible, but without zooming the scroll view. In this example, that CGRect is already completely visible in the scroll view, thus it doesn't have to scroll anywhere else, so you don't see any visible effect.