Drawn Image Does Not Appear on Camera Overlay Swift

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.)