Question 69086 in IOS Swift Question posted in
The official documentation can be found here.

UIScrollView with multiple UIView/UIImageView stacked on each other for drawing – Ios swift

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:
ImageFault
ImageStoryboard

Could anyone steer me in the right direction?

Tags:

2

Answers


  1. 0

    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?

    Login or Signup to reply.
  2. 0
    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 contentMode set to .scaleAspectFit, but has all 4 sides pinned to the superview. This means that the image view spans the entire contentView, but the image itself is smaller.

    I think the easiest way around this is to get the frame of the actual image using AVMakeRect(aspectRatio:insideRect:), then adjusting drawView‘s frame.

    let rect = AVMakeRect(aspectRatio: image.size, insideRect: imageView.frame)

/**
 Instead of constraining `drawView`'s edges, use x, y, width, and height.
 This makes setting them easier.
 You'll need to connect your constraints via an @IBOutlet (see https://stackoverflow.com/a/40584432/14351818)
 */
drawViewLeftConstraint.constant = rect.origin.x
drawViewTopConstraint.constant = rect.origin.y
drawViewWidthConstraint.constant = rect.width
drawViewHeightConstraint.constant = rect.height
    1. Drawings are under the UIImageView, while the drawView is on top.

    Actually, the image view is on top. The order is lowest -> highest, so just switch them.

    The order is reversed

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search