Keep UIView in same location on image with AspectFit after rotation - ios

Question

I have an app where users can place shapes onto an image. The image is in a UIImageView set to AspectFit. The UIImageView is in a UIScrollView to allow for zooming and panning. The shapes are UIViews added to the UIImageView. Everything is working fine except when the Device Orientation changes. Since the image is set to AspectFit and the orientation changes so does the aspect ratio. Therefore, my shapes don't maintain the same position on the image.
Before rotation:
After rotation:
ViewController Code:
override func viewDidLoad() {
super.viewDidLoad()
imageView.image = markupUIImage;
scrollView.maximumZoomScale=5;
scrollView.minimumZoomScale=0.5;
scrollView.bounces=true;
scrollView.bouncesZoom=true;
scrollView.contentSize=CGSize(width: imageView.frame.size.width, height: imageView.frame.size.height);
scrollView.showsHorizontalScrollIndicator=true;
scrollView.showsVerticalScrollIndicator=true;
scrollView.delegate=self;
}
func viewForZooming(in scrollView: UIScrollView) -> UIView?
{
return self.imageView
}
Class for Shapes:
class ShapeUIView: UIView {
override public class var layerClass: Swift.AnyClass {
get {
return CAShapeLayer.self;
}
}
override init(frame: CGRect) {
super.init(frame: frame)
initializeView()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
initializeView()
}
private func initializeView(){
let shapeLayer = (layer as! CAShapeLayer);
shapeLayer.opacity = 1.0
shapeLayer.lineJoin = kCALineJoinRound
shapeLayer.lineWidth = 2.0
shapeLayer.strokeColor = UIColor(red: 0, green: 0, blue: 0, alpha: 1.0).cgColor
shapeLayer.fillColor = UIColor(red: 0, green: 128, blue: 0, alpha: 0.3).cgColor
self.isUserInteractionEnabled = true;
self.alpha = 1.0;
self.isHidden = false;
}
public func setPath(_ path: UIBezierPath) {
(layer as! CAShapeLayer).path = path.cgPath;
}
}
How do I get the shape to stay in the same location on the image after rotation?

Answer 1

I was able to figure out my own question. Posting here in case someone else comes across this.
What I did was set the UIImageView.contentMode = .center and set the UIImageView size to the same height and width of the image. Then I let the UIScrollView do its thing and scale the image. Therefore, I didn't have both the UIImageView scaling the image because of the AspectFit and the UIScrollView scaling the image.
I put the following in my UIViewController:
override func viewDidAppear(_ animated: Bool) {
//Initial Scale
imageView.bounds.size.width = (imageView.image?.size.width)!;
imageView.bounds.size.height = (imageView.image?.size.height)!;
imageView.frame = CGRect(x: 0, y: 0, width: imageView.bounds.size.width, height: imageView.bounds.size.height)
let widthScale: CGFloat = scrollView.width / imageView.image!.size.width;
let heightScale: CGFloat = scrollView.height / imageView.image!.size.height;
let initialZoom = min(widthScale, heightScale);
scrollView.setZoomScale(initialZoom, animated: false)
}
Now when my shapes are draw on the image and the device is rotated they stay in the correct place.