ImageView changes coordinates when I draw on that swift ios

Question

I am following this tutorial, at the first when app launches everything is alright imagView is set where I set it. But the problem is when I start drawing on imageView the size of imageView resizes to ambiguous coordinates and it enlarges and occupy to much space result in ambiguous view, even I have set the auto layout. May be I am missing something, here is the code :

import UIKit
import CoreImage

class ViewController: UIViewController {

let imageNameIs = "BradPitImage"
var lastPoint = CGPoint.zero
var red: CGFloat = 0.0
var green: CGFloat = 0.0
var blue: CGFloat = 0.0
var brushWidth: CGFloat = 10.0
var opacity: CGFloat = 1.0
var swiped = false

@IBOutlet weak var tempImageView: UIImageView!
var tempImageViewtemp : UIImageView = UIImageView()

@IBOutlet weak var resetButton: UIButton!
@IBOutlet weak var saveButton: UIButton!

@IBAction func resetAct(_ sender: Any) {
    tempImageView.image = nil
    tempImageView.image = UIImage(named: imageNameIs)
}

override func viewDidLoad() {
    super.viewDidLoad()
    self.tempImageView.image = UIImage(named: imageNameIs)
}

override func touchesBegan(_ touches: Set, with event: UIEvent?) {
    swiped = false
    if let touch = touches.first {
        lastPoint = touch.location(in: self.tempImageView)//view)
    }
}

func drawLineFrom(fromPoint: CGPoint, toPoint: CGPoint) {
    // 1
    UIGraphicsBeginImageContext(view.frame.size)//(tempImageView.frame.size) makes lines coluored of image
    let context = UIGraphicsGetCurrentContext()
    tempImageView.image?.draw(in: CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height))

    // 3
    context!.move(to: fromPoint)
    context!.addLine(to: toPoint)
    context!.setLineCap(.round)
    context!.setLineWidth(brushWidth)
    context!.setStrokeColor(red: red, green: green, blue: blue, alpha: 1)
    context!.setBlendMode(.normal)

    // 4
    context!.strokePath()
    //CGContextStrokePath(context!)

    // 5
    tempImageView.image = UIGraphicsGetImageFromCurrentImageContext()
    tempImageView.alpha = opacity
    UIGraphicsEndImageContext()
}

override func touchesMoved(_ touches: Set, with event: UIEvent?) {
    swiped = true
    if let touch = touches.first {
        let currentPoint = touch.location(in: view)
        drawLineFrom(fromPoint: lastPoint, toPoint: currentPoint)
    // 7
    lastPoint = currentPoint
    }
}

 func touchesMoved(touches: Set, withEvent event: UIEvent) {
    // 6
    swiped = true
    if let touch = touches.first as? UITouch {
        let currentPoint = touch.location(in: view)
        drawLineFrom(fromPoint: lastPoint, toPoint: currentPoint)
        // 7
        lastPoint = currentPoint
    }
}

override func touchesEnded(_ touches: Set, with event: UIEvent?) {
    if !swiped {
        //draw a single point
        drawLineFrom(fromPoint: lastPoint, toPoint: lastPoint)
    }
    UIGraphicsBeginImageContext(tempImageViewtemp.frame.size)
    tempImageViewtemp.image?.draw(in: CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height), blendMode: .normal, alpha: 1)
    tempImageView.image?.draw(in: CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height), blendMode: .normal, alpha: opacity)
    tempImageViewtemp.image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
  }
}

Here are images:

1) When Launches

2) When I start drawing

**Update According to DonMag's answer still ambiguous coordinates **

it work only for portrait orientation , the problem is when I do landscape mode and start drawing then image size reduces to top and there is increasing wide are empty at bottom, and then I do portrait then image became at the centre from top to bottom as more narrower I have added the screenshots new according to your code

1) from portrait to landscape at first time :

2) when I start drawing, it reduces the image and drawing becomes blur

Now when launches from landscape looks like this and drawing does does not reduces nor makes any blur:

But when turning to portrait image shrinks like this

user_6257435 · Answer

Couple things...

It looks like you have your image view set to Aspect Fit scale. That means your image is not the same size as the image view itself.
You are mixing frame sizes of your image view and the root view.

Here is your code with a few modifications. Review the comments indicated by // ---. You should be able to replace your current code and run this as-is:

import UIKit
import CoreImage

extension UIView {
    // return content of view as a UIImage
    // can be used to get a copy of the rendered image view
    // e.g. the result of scaling setting

    func asImage() -> UIImage {
        let renderer = UIGraphicsImageRenderer(bounds: bounds)
        return renderer.image { rendererContext in
            layer.render(in: rendererContext.cgContext)
        }
    }

}

class ViewController: UIViewController {

    let imageNameIs = "BradPitImage"
    var lastPoint = CGPoint.zero
    var red: CGFloat = 0.0
    var green: CGFloat = 0.0
    var blue: CGFloat = 0.0
    var brushWidth: CGFloat = 10.0
    var opacity: CGFloat = 1.0
    var swiped = false

    @IBOutlet weak var tempImageView: UIImageView!
    var tempImageViewtemp : UIImageView = UIImageView()

    // ---
    // --- this will hold a copy of the resized image (for reset)
    var resizedImage: UIImage!

    @IBOutlet weak var resetButton: UIButton!
    @IBOutlet weak var saveButton: UIButton!

    @IBAction func resetAct(_ sender: Any) {
        // ---
        // --- reset using the resized image from viewDidAppear
        tempImageView.image = resizedImage
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        self.tempImageView.image = UIImage(named: imageNameIs)
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        // ---
        // --- create a resized copy of the original image
        // --- (handles aspect fit scale)
        resizedImage = tempImageView.asImage()
        tempImageView.image = resizedImage

    }

    override func touchesBegan(_ touches: Set, with event: UIEvent?) {
        swiped = false
        if let touch = touches.first {
            // ---
            // --- get point ** in tempImageView **
            lastPoint = touch.location(in: self.tempImageView)  //view)
        }
    }

    func drawLineFrom(fromPoint: CGPoint, toPoint: CGPoint) {
        // 1

        // ---
        // --- get the bounds of tempImageView
        let rect = tempImageView.bounds

        // ---
        // --- use the bounds for the image context size
        UIGraphicsBeginImageContext(rect.size)

        let context = UIGraphicsGetCurrentContext()

        // ---
        // --- draw the image into the bounds rect
        tempImageView.image?.draw(in: rect)

        // 3
        context!.move(to: fromPoint)
        context!.addLine(to: toPoint)
        context!.setLineCap(.round)
        context!.setLineWidth(brushWidth)
        context!.setStrokeColor(red: red, green: green, blue: blue, alpha: 1)
        context!.setBlendMode(.normal)

        // 4
        context!.strokePath()
        //CGContextStrokePath(context!)

        // 5
        tempImageView.image = UIGraphicsGetImageFromCurrentImageContext()
        tempImageView.alpha = opacity
        UIGraphicsEndImageContext()
    }

    override func touchesMoved(_ touches: Set, with event: UIEvent?) {
        swiped = true
        if let touch = touches.first {

            // ---
            // --- get point ** in tempImageView **
            let currentPoint = touch.location(in: self.tempImageView)

            drawLineFrom(fromPoint: lastPoint, toPoint: currentPoint)

            // 7
            lastPoint = currentPoint
        }
    }

    override func touchesEnded(_ touches: Set, with event: UIEvent?) {
        if !swiped {
            //draw a single point
            drawLineFrom(fromPoint: lastPoint, toPoint: lastPoint)
        }

        // ---
        // don't know what you're doing with tempImageViewtemp,
        // but you probably want to change the sizing here to match elsewhere
        UIGraphicsBeginImageContext(tempImageViewtemp.frame.size)
        tempImageViewtemp.image?.draw(in: CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height), blendMode: .normal, alpha: 1)
        tempImageView.image?.draw(in: CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height), blendMode: .normal, alpha: opacity)
        tempImageViewtemp.image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
    }
}

Edit:

Here is a slightly different approach that may get you further on your way.

Instead of changing your image, change the size of the imageView to match the ratio of the image.

Storyboard layout:

The image view has constraints to remain centered in the white superview, and will be restricted to its width and height, maintaining proportion (aspect ratio).

The white view has constraints keeping it sized / positioned above the buttons.

Result - portrait orientation, with a circle drawn on left eye:

Result - device rotated to landscape orientation, with another circle drawn around the right eye:

You will also note in the code / comments that the "brushWidth" has to be adjusted based on the image height... using only 10-pts as the width will result in "thicker" lines when the image is shorter (landscape).

Here is the code:

//
//  DrawOnViewController.swift
//
//  Created by Don Mag on 11/7/18.
//

import UIKit

extension NSLayoutConstraint {
    /**
    Change multiplier constraint

    - parameter multiplier: CGFloat
    - returns: NSLayoutConstraint
    */
    func setMultiplier(multiplier:CGFloat) -> NSLayoutConstraint {

        NSLayoutConstraint.deactivate([self])

        let newConstraint = NSLayoutConstraint(
            item: firstItem as Any,
            attribute: firstAttribute,
            relatedBy: relation,
            toItem: secondItem,
            attribute: secondAttribute,
            multiplier: multiplier,
            constant: constant)

        newConstraint.priority = priority
        newConstraint.shouldBeArchived = self.shouldBeArchived
        newConstraint.identifier = self.identifier

        NSLayoutConstraint.activate([newConstraint])
        return newConstraint
    }
}

class DrawOnViewController: UIViewController {

    let imageNameIs = "BradPitImage"
    var lastPoint = CGPoint.zero
    var red: CGFloat = 0.0
    var green: CGFloat = 0.0
    var blue: CGFloat = 0.0
    var brushWidth: CGFloat = 10.0
    var opacity: CGFloat = 1.0
    var swiped = false

    @IBOutlet weak var tempImageView: UIImageView!
    var tempImageViewtemp : UIImageView = UIImageView()

    // ---
    // --- this will hold a reference to the image view's aspect ratio constraint
    @IBOutlet var imageViewAspectRatioConstraint: NSLayoutConstraint!

    // ---
    // --- this will be used to allow "brushWidth" to remain
    // --- constant when device is rotated
    var loadedImageHeight: CGFloat = 0.0

    // ---
    // --- this will be the "brushWidth" relative to
    // --- to the image's originial height
    var adjustedBrushWidth: CGFloat = 0.0

    @IBOutlet weak var resetButton: UIButton!
    @IBOutlet weak var saveButton: UIButton!

    @IBAction func resetAct(_ sender: Any) {
        if let img = UIImage(named: imageNameIs) {
            // ---
            // --- reset the imageView's image
            tempImageView.image = img
        }
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        if let img = UIImage(named: imageNameIs) {

            let imgSize = img.size

            // ---
            // --- calculate the aspect ratio of the image
            let ratio = imgSize.width / imgSize.height

            // ---
            // --- change the image view's aspect ratio to match the image
            imageViewAspectRatioConstraint = imageViewAspectRatioConstraint.setMultiplier(multiplier: ratio)

            // ---
            // --- save original image height for brushWidth adjustment
            loadedImageHeight = imgSize.height

            // ---
            // --- set the imageView's image
            self.tempImageView.image = img

        }

    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        // ---
        // --- calculate brushWidth relative to image height scaled to image view height
        adjustedBrushWidth = brushWidth * loadedImageHeight / tempImageView.frame.height
    }

    override func touchesBegan(_ touches: Set, with event: UIEvent?) {
        swiped = false
        if let touch = touches.first {
            // ---
            // --- get point ** in tempImageView **
            lastPoint = touch.location(in: self.tempImageView)
        }
    }

    func drawLineFrom(fromPoint: CGPoint, toPoint: CGPoint) {
        // 1

        // ---
        // --- get the bounds of tempImageView
        let rect = tempImageView.bounds

        // ---
        // --- use the bounds for the image context size
        UIGraphicsBeginImageContext(rect.size)

        let context = UIGraphicsGetCurrentContext()

        // ---
        // --- draw the image into the bounds rect
        tempImageView.image?.draw(in: rect)

        // 3
        context!.move(to: fromPoint)
        context!.addLine(to: toPoint)
        context!.setLineCap(.round)

        // ---
        // --- set line width proportional to current imageView height
        // --- use adjustedBrushWidth set in viewDidAppear
//      context!.setLineWidth(brushWidth * rect.height / loadedImageHeight)
        context!.setLineWidth(adjustedBrushWidth * rect.height / loadedImageHeight)

        context!.setStrokeColor(red: red, green: green, blue: blue, alpha: 1)
        context!.setBlendMode(.normal)

        // 4
        context!.strokePath()
        //CGContextStrokePath(context!)

        // 5
        tempImageView.image = UIGraphicsGetImageFromCurrentImageContext()
        tempImageView.alpha = opacity
        UIGraphicsEndImageContext()
    }

    override func touchesMoved(_ touches: Set, with event: UIEvent?) {
        swiped = true
        if let touch = touches.first {

            // ---
            // --- get point ** in tempImageView **
            let currentPoint = touch.location(in: self.tempImageView)

            drawLineFrom(fromPoint: lastPoint, toPoint: currentPoint)

            // 7
            lastPoint = currentPoint
        }
    }

    override func touchesEnded(_ touches: Set, with event: UIEvent?) {
        if !swiped {
            //draw a single point
            drawLineFrom(fromPoint: lastPoint, toPoint: lastPoint)
        }

        // ---
        // don't know what you're doing with tempImageViewtemp,
        // but you probably want to change the sizing here to match elsewhere
        //      UIGraphicsBeginImageContext(tempImageViewtemp.frame.size)
        //      tempImageViewtemp.image?.draw(in: CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height), blendMode: .normal, alpha: 1)
        //      tempImageView.image?.draw(in: CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height), blendMode: .normal, alpha: opacity)
        //      tempImageViewtemp.image = UIGraphicsGetImageFromCurrentImageContext()
        //      UIGraphicsEndImageContext()
    }
}

And here is the storyboard with the required constraints:

user_3117930 · Answer

tempImageView.image?.draw(in: CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height))

This line of code specifies to do the drawing with self.view's size. This will cause the image to get distorted as the aspect ratio of image will not be the same as that of self.view.

Replacing these above line with below line should fix the problem

 tempImageView.image?.draw(in: tempImageView.bounds)

Make similar change in where-ever you are using 'draw' method

ImageView changes coordinates when I draw on that swift ios

2 Answers