swift - draw with finger over UIImageView - ios

Question

In my app user needs to take a picture with the camera and then mark some areas in the image using a finger.
So I created UIImageView which holds the image from the camera, then added UIPanGestureRecognizer which listens for "drawing" gestures:
panGesture = UIPanGestureRecognizer(target: self, action: #selector(AttachmentInputViewController.handlePanGesture(_:)))
imageView.addGestureRecognizer(panGesture!)
handlePanGesture:
func handlePanGesture(_ sender: UIPanGestureRecognizer) {
let point = sender.location(in: sender.view)
switch sender.state {
case .began:
self.startAtPoint(point: point)
case .changed:
self.continueAtPoint(point: point)
case .ended:
self.endAtPoint(point: point)
case .failed:
self.endAtPoint(point: point)
default:
assert(false, "State not handled")
}
}
Then I create UIBezierPath which holds the "drawing" and create a separate image with those markings:
private func startAtPoint(point: CGPoint) {
path = UIBezierPath()
path.lineWidth = 5
path.move(to: point)
}
private func continueAtPoint(point: CGPoint) {
path.addLine(to: point)
}
private func endAtPoint(point: CGPoint) {
path.addLine(to: point)
path.addLine(to: point)
//path.close()
let imageWidth: CGFloat = imageView.image!.size.width
let imageHeight: CGFloat = imageView.image!.size.height
let strokeColor:UIColor = UIColor.red
// Make a graphics context
UIGraphicsBeginImageContextWithOptions(CGSize(width: imageWidth, height: imageHeight), false, 0.0)
let context = UIGraphicsGetCurrentContext()
context!.setStrokeColor(strokeColor.cgColor)
//for path in paths {
path.stroke()
//}
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
In the end I need to save the image with user's markings.
The problem is that image in UIImageView is set to scaleToFit and when I try to combine both camera image and markings image they don't match due to different resolutions and ratios.
I have a feeling there is a better way achieving this and would appreciate if anyone can recommend a best way.

Answer 1

You were very close! The bug was simply in your handlePanGesture() where you computed the point. You obtained the point of the gesture, which is a point in the coordinate space of the view of the gesture, which is your imageView.
You instead want the point in the coordinate space of the UIImage within your imageView. So you just need to convert.
#objc func handlePanGesture(_ sender: UIPanGestureRecognizer) {
guard let image = self.imageView.image else {return}
let point = sender.location(in: sender.view)
let rx = image.size.width / self.imageView.frame.size.width
let ry = image.size.height / self.imageView.frame.size.height
let pointInImage = CGPoint(x: point.x * rx, y: point.y * ry)
switch sender.state {
case .began:
self.startAtPoint(pointInImage)
case .changed:
self.continueAtPoint(pointInImage)
case .ended:
self.endAtPoint(pointInImage)
case .failed:
self.endAtPoint(pointInImage)
default:
assert(false, "State not handled")
}
}
Thanks for posting your question! Your overall solution worked great for allowing user draw a path with their finger atop an image. With the above tweak, and with my choice to close the path during endAtPoint(), I have exactly what I need to let user choose desired area of an image.
Also, one other thing to fix: In your endAtPoint() you called
path.addLine(to: point) twice rather than once.