Drawn Image Does Not Appear on Camera Overlay Swift - ios

Question

I'm trying to create a drawing app that sits on top of a UIImagePickerController after the picture is taken. The touch delegate functions are called correctly but do not leave any traces on the view as they are supposed to. What I have so far:
func createImageOptionsView() { //creates the view above the picker controller overlay view
let imgOptsView = UIView()
let scale = CGAffineTransform(scaleX: 4.0 / 3.0, y: 4.0 / 3.0)
imgOptsView.tag = 1
imgOptsView.frame = view.frame
let imageView = UIImageView()
imageView.frame = imgOptsView.frame
imageView.translatesAutoresizingMaskIntoConstraints = true
imageView.transform = scale //to account for the removal of the black bar in the camera
let useButton = UIButton()
imageView.tag = 2
imageView.contentMode = .scaleAspectFit
imageView.image = currentImage
useButton.setImage(#imageLiteral(resourceName: "check circle"), for: .normal)
useButton.translatesAutoresizingMaskIntoConstraints = true
useButton.frame = CGRect(x: view.frame.width / 2, y: view.frame.height / 2, width: 100, height: 100)
let cancelButton = UIButton()
colorSlider.previewEnabled = true
colorSlider.translatesAutoresizingMaskIntoConstraints = true
imgOptsView.addSubview(imageView)
imgOptsView.addSubview(useButton)
imgOptsView.addSubview(colorSlider)
imgOptsView.isUserInteractionEnabled = true
useButton.addTarget(self, action: #selector(ViewController.usePicture(sender:)), for: .touchUpInside)
picker.cameraOverlayView!.addSubview(imgOptsView)
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
mouseSwiped = false //to check if the touch moved or was simply dotted
let touch: UITouch? = touches.first
lastPoint = touch?.location(in: view) //where to start image context from
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
mouseSwiped = true
let touch: UITouch? = touches.first
let currentPoint: CGPoint? = touch?.location(in: view)
UIGraphicsBeginImageContext(view.frame.size) //begin drawing
tempDrawImage.image?.draw(in: CGRect(x: CGFloat(0), y: CGFloat(0), width: CGFloat(view.frame.size.width), height: CGFloat(view.frame.size.height)))
UIGraphicsGetCurrentContext()?.move(to: CGPoint(x: CGFloat(lastPoint.x), y: CGFloat(lastPoint.y)))
UIGraphicsGetCurrentContext()?.addLine(to: CGPoint(x: CGFloat((currentPoint?.x)!), y: CGFloat((currentPoint?.y)!)))
UIGraphicsGetCurrentContext()!.setLineCap(.round)
UIGraphicsGetCurrentContext()?.setLineWidth(1.0)
UIGraphicsGetCurrentContext()?.setStrokeColor(c)
UIGraphicsGetCurrentContext()!.setBlendMode(.normal)
UIGraphicsGetCurrentContext()?.strokePath() //move from lastPoint to currentPoint with these options
tempDrawImage.image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
lastPoint = currentPoint
}
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
if !mouseSwiped {
UIGraphicsBeginImageContext(view.frame.size)
tempDrawImage.image?.draw(in: CGRect(x: CGFloat(0), y: CGFloat(0), width: CGFloat(view.frame.size.width), height: CGFloat(view.frame.size.height)))
UIGraphicsGetCurrentContext()!.setLineCap(.round)
UIGraphicsGetCurrentContext()?.setLineWidth(1.0)
UIGraphicsGetCurrentContext()?.setStrokeColor(c)
UIGraphicsGetCurrentContext()?.move(to: CGPoint(x: CGFloat(lastPoint.x), y: CGFloat(lastPoint.y)))
UIGraphicsGetCurrentContext()?.addLine(to: CGPoint(x: CGFloat(lastPoint.x), y: CGFloat(lastPoint.y)))
UIGraphicsGetCurrentContext()?.strokePath()
UIGraphicsGetCurrentContext()!.flush()
tempDrawImage.image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
}
UIGraphicsBeginImageContext(mainImage.frame.size)
mainImage.image?.draw(in: CGRect(x: CGFloat(0), y: CGFloat(0), width: CGFloat(view.frame.size.width), height: CGFloat(view.frame.size.height)), blendMode: .normal, alpha: 1.0)
tempDrawImage.setNeedsDisplay()
mainImage.image = UIGraphicsGetImageFromCurrentImageContext() //paste tempImage onto the main image and then start over
tempDrawImage.image = nil
UIGraphicsEndImageContext()
}
func changedColor(_ slider: ColorSlider) {
c = slider.color.cgColor
}

Answer 1

This is just a guess, but worth a shot. I had a similar problem but in a different context... I was working with AVPlayer when it happened.
In my case, it's because the zPosition wasn't set correctly, so the overlays I was trying to draw appeared behind the video. Assuming that's the case, the fix would be to set the zPosition = -1 which moves it further back like so:
AVPlayerView.layer?.zPosition = -1
This moved the base layer behind the overlay layer (negative numbers move further away from the user in 3D space.)
I would see if the view controlled by your UIImagePickerController allows you to set it's zPosition similar to what AVPlayer allows. If I recall correctly, any view should be able to set it's zPosition. Alternatively, you could try moving your overlay layer to a positive value like zPosition = 1. (I'm not certain, but I would imagine that the default is position is 0.)