I can't believe something this easy when I did not use auto-layout is this hard with auto-layout. I put everything in a contentView so that it's a simultaneous zoom for both views (ImageView and UIView). The UIView for drawing should be the same size as the UIImageView and not bigger. I have this hierarchy at the moment.

    UIScrollView
    - ContentView
    -- UIView (For drawing eg, drawView)
    -- UIImage (For showing a background image to draw on)

The drawView is a view on top of the imageView, the problem now is as following:

1. Users can draw out of bounds of the UIImageView. This should only be possible drawing on the imageView.
2. Drawings are under the UIImageView, while the drawView is on top.

Code:

var afbeelding: UIImage?

@IBOutlet var imageView: UIImageView!
@IBOutlet var drawView: DrawingCanvas!
@IBOutlet var contentView: UIView!

var dag: Dag?

@IBOutlet var scrollView: UIScrollView!

override func viewDidLoad() {
    super.viewDidLoad()
    
    drawView.dag = dag
    
    if let afbeelding = afbeelding {
        imageView.image = afbeelding
    }
    
    scrollView.panGestureRecognizer.minimumNumberOfTouches = 2
    scrollView.panGestureRecognizer.maximumNumberOfTouches = 2
    
    scrollView.minimumZoomScale = 0.2;
    scrollView.zoomScale = 1.0;
    scrollView.maximumZoomScale = 5.0
}

func viewForZooming(in scrollView: UIScrollView) -> UIView? {
    return contentView
}

Images:

Could anyone steer me in the right direction?

CodePudding user response：

I'm not very familiar with Interface Builder but for your layer order problem I'd try swapping them; perhaps the order in which they're shown is the order in which they're added.

As for drawing outside the bounds, you'd need to look at the documentation for DrawingCanvas but perhaps its clipsToBounds property will work?

CodePudding user response：

1. Users can draw out of bounds of the UIImageView. This should only be possible drawing on the imageView.

It seems like your image view has its