iOS Swift: How to overlay two images that zoom in at same time without loosing coordinates of overlaying image

Question

My problem is pretty simple really...

Imagine a background image that represents the streets and buildings around your house, note that this is a purpose built image. This image (a view) is zoomable and so far so good. Similar to map, but with an image instead.

Now image that on top of the streets drawn on the image there are markers representing cars. These will move over time and therefore will be moving dynamically. I have successfully placed the cars in the right place on the image, but when I zoom in/out the cars move out of place. Note that I don't want the cars to change in size, they will always remain the same.

Essentially, very similar to a map marker on top of google maps, but instead of the map I have a background picture and instead of the markers I have other images (the cars).

Now for the implementation... I have a simple ScrollableView which contains an image view. I am trying to overlay other multiple pictures that I want to keep placement but not zoom in or out (or at least not as much as the main picture). I would say that it is similar to a map which has location pins on it, but it is just using pictures. I am doing this in Swift and the latest iOS version (9x)

import UIKit

class ViewController: UIViewController, UIScrollViewDelegate
{
    @IBOutlet weak var scrollView: UIScrollView!
    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var pin1View: UIImageView!
    @IBOutlet weak var pin2View: UIImageView!

    override func viewDidLoad()
    {
        super.viewDidLoad()
        self.scrollView.minimumZoomScale = 1.0;
        self.scrollView.maximumZoomScale = 10.0;



    }

    override func didReceiveMemoryWarning()
    {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView?
    {
        let pin1_X = self.pin1View.frame.origin.x
        let pin2_Y = self.pin2View.frame.origin.y
        //I guess I need to do something here but not sure
        return self.imageView
    }   
}

Any tips much appreciated. I googled it but couldn't find examples and still learning views and swift as well as general mobile dev. Thanks for your help.

Answer 1

You have the change centre of the pin accordingly. Use this updated code:

class ViewController: UIViewController, UIScrollViewDelegate
{
    @IBOutlet weak var scrollView: UIScrollView!
    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var pin1View: UIImageView!
    @IBOutlet weak var pin2View: UIImageView!
    var pin1ViewCenter : CGPoint = CGPointZero
    var pin2ViewCenter : CGPoint = CGPointZero

    override func viewDidLoad()
    {
        super.viewDidLoad()
        self.scrollView.scrollEnabled = true
        self.scrollView.minimumZoomScale = 1.0
        self.scrollView.maximumZoomScale = 10.0

        pin1ViewCenter = pin1View.center
        pin2ViewCenter = pin2View.center

        self.scrollView.contentSize = self.imageView.frame.size
    }


    override func didReceiveMemoryWarning()
    {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView?
    {
        return self.imageView
    }

    func scrollViewDidZoom(scrollView: UIScrollView) {

        let scaleAffineTransform = CGAffineTransformScale(CGAffineTransformIdentity, scrollView.zoomScale, scrollView.zoomScale)
        var translatedPoint = CGPointApplyAffineTransform(pin1ViewCenter, scaleAffineTransform)
        pin1View.transform = CGAffineTransformTranslate(CGAffineTransformIdentity, translatedPoint.x - pin1ViewCenter.x , translatedPoint.y - pin1ViewCenter.y)
        translatedPoint = CGPointApplyAffineTransform(pin2ViewCenter, scaleAffineTransform)
        pin2View.transform = CGAffineTransformTranslate(CGAffineTransformIdentity, translatedPoint.x - pin2ViewCenter.x, translatedPoint.y - pin2ViewCenter.y)
    }

    func scrollViewDidEndZooming(scrollView: UIScrollView, withView view: UIView?, atScale scale: CGFloat) {
        let scaleAffineTransform = CGAffineTransformScale(CGAffineTransformIdentity, scale, scale)
        scrollView.contentSize = CGSizeApplyAffineTransform(self.imageView.bounds.size, scaleAffineTransform)
    }

}