0

I am building an app that is basically a shot chart for basketball teams. I have an image of a basketball court and the user taps on the court and a dot shows up. I get the tap coordinates and render a dot. Pretty simple.

Where I am getting hung up is that I need to ultimately render these taps precisely where they are on the court of the phone that recorded them across different devices. So the iPad and iPhone 14 Pro Max will need to show the same exact place at the free throw line as the iPhone SE it was recorded on, for example.

I tried converting the x/y coordinates to fractions based on image dimensions but that didn't work because the aspect ratio of the devices aren't the same.

This is probably a simple problem, but I am stuck!

EDIT:

Here is the simple code from my VC:

override func viewDidLoad() {
        super.viewDidLoad()
        
        // Add gesture recognizer
        let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(imageTapped(tapGestureRecognizer:)))
        imageView.isUserInteractionEnabled = true
        imageView.addGestureRecognizer(tapGestureRecognizer)
        
        // I don't add this in until the second launch, after I tap and get the % below
//        let dotImage = UIImageView(image: UIImage(named: "playDot"))
//        dotImage.frame.origin = CGPoint(x: self.imageView.frame.size.width * 0.5007496251874063, y: self.imageView.frame.size.height * 0.20666666666666667)
//                self.imageView.addSubview(dotImage)
    }
    
    @objc func imageTapped(tapGestureRecognizer: UITapGestureRecognizer) {
        
        let touchPoint = tapGestureRecognizer.location(in: self.imageView)
        
        let dotImage = UIImageView(image: UIImage(named: "playDot"))
        dotImage.center = touchPoint
        self.imageView.addSubview(dotImage)
        
        print("Tap dot x%:\(touchPoint.x / self.imageView.frame.size.width), y%: \(touchPoint.y / self.imageView.frame.size.height)")
    }

After I tap once the dot shows up like this:

enter image description here

And this is the console output:

Tap dot x%:0.5007496251874063, y%: 0.20666666666666667

So then I uncomment out the initial image placement code above and run the app again on the same simulator:

enter image description here

I want it to be exactly in the same position across multiple devices, but I can't even get it right for the same device :/

Westley
  • 1,143
  • 14
  • 27
  • Keep in mind that the dimensions of the image views, the content mode of the image views, and the dimensions of the original image are all crucial. After that, your question becomes a simpler version of the drag to crop problem. – matt Jul 01 '23 at 23:57
  • @matt thanks for the comment. The image I am using for the bg is 1336x662. The content mode of the image view is aspect fit. – Westley Jul 02 '23 at 00:08
  • Never rely on the size of a view in `viewDidLoad`. Try it `viewDidLayoutSubviews`. – HangarRash Jul 02 '23 at 00:34

0 Answers0