0

For example, I display a smiley face that is scaled for aspect fit on the entire screen. The user touches the left eye of the smiley face. How can I guarantee that the X and Y coordinate I return will be the same, no matter what device the user is on?

I have been trying to figure this out, keeping in mind the aspect ratio of the device, as well as image scaling. It seems like no matter what I do, the result is always at least a little bit different depending on the device.

I am currently trying to figure this out for iOS, but I'll end up doing the same for Android. Any suggestions? Including a pod/library that could help is fine.

nameless
  • 158
  • 7
  • Possible duplicate of [Getting the coordinates from the location I touch the touchscreen](https://stackoverflow.com/questions/26829295/getting-the-coordinates-from-the-location-i-touch-the-touchscreen) – Salman500 Jun 15 '18 at 20:38
  • Nah, although I expect to be getting the coordinates the same way, those values will be different depending on the device used. – nameless Jun 15 '18 at 20:41
  • 2
    If the image is scaled, you cannot get the same X,Y coordinates, because they just won't be the same. If the image on one device is `320x200`, the bottom-right corner is `319,199`. If it's `640x400` on another device, bottom-right will be `639,399`. What you probably want to do is get the position by percent. So a touch at `160,100` on a `320x200` view will be at `50%,50%` and the same touch at `320,100` on the `640x400` view will ***also*** be at `50%,50%`. You *could* then "normalize" the coordinates, but why bother? Just use the percent position. – DonMag Jun 15 '18 at 21:14
  • That's a good suggestion, thank you. I'll try it out! – nameless Jun 16 '18 at 20:09
  • Alright, I've tried your suggestion, and I'm running into the same issue I was running into earlier. If I click the left eye, it will give me a 23% for the X value on an iPhone. But on an iPad, I'm getting a 29%. Either Aspect Fit isn't keeping my aspect value perfectly, or I am not actually getting a correct X/Y touch value. – nameless Jun 18 '18 at 21:42

1 Answers1

1

So, I was having trouble mostly because of my constraints in the storyboard. For the code below, you need to ensure that the height and width match the (scaled) image, NOT the view or the screen size - so just selecting an Aspect Fit content mode and letting the image scale up won't work. I added an aspect ratio constraint, as well as trailing and leading spaces that were a bit flexible (>= 0). Anyway, if you can get the "bounds" of the image to successfully sit around the actual bounds of the image, you should be set to use the code below.

This code takes the coordinates of a touch based on the image, then calculates where the X/Y value should be for that touch, based on the aspect ratio. So, even though you've got a couple thousand pixels on your phone, a touch on the left eye located at 100x150 in a 200x300 smiley face should successfully return "X: 100 Y: 150."

@IBOutlet weak var image: UIImageView!

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    super.touchesBegan(touches, with: event)

    if let touch = touches.first {
        //based on the touch on an image, grab the X/Y value
        let imageViewPoint = touch.location(in: self.image)

        //get the ratio by dividing the scaled bounds of the image by the unscaled size of the image
        let widthRatio = image.bounds.size.width / (image.image?.size.width)!
        let heightRatio = image.bounds.size.height / (image.image?.size.height)!

        //divide the touch coordinates by the ratios to get your result
        let endResultX = imageViewPoint.x / widthRatio
        let endResultY = imageViewPoint.y / heightRatio

        print("X End Result: ", endResultX)
        print("Y End Result: ", endResultY)
    }
}
nameless
  • 158
  • 7