XY Coordinates of image

Hi Guys

Im new to XCODE and was wonderering if anyone can help. I have a large bitmap inside an imageview which in turn is inside a scrollview

Is it possible to get the XY souce cords of the image. I can get the coords of the imageview but the image itself is many times larger and I need to be able to detect if an area of the bitmap is tapped

Any help or guidence appreciated

Mark

Not really a Swift question, but …


What does "the image itself is many times larger" mean?


If you mean that the image is larger than the image view, then it must be scaled or cropped. You'd use your image view settings to figure out how image coordinates derive from image view coordinates.


If you mean that the image view is the same size as the image, but it's larger than the visible portion of the scroll view, then image view coordinates are image coordinates, too.


However, a more precise answer depends on whether you're on iOS or OS X, and on how/where you're getting your image view coordinates from. You'll also likely get a more targeted audience for you question on one of the Cocoa forums,

Hi Quincey thanks for the reply This is my code



class ThirdViewController: UIViewController, UIScrollViewDelegate {

@IBOutlet var scrollView: UIScrollView!

@IBOutlet weak var imageView: UIImageView!

var firstPass:String!

var secondPass:String!


override func viewDidLoad() { super.viewDidLoad()

self.scrollView.minimumZoomScale=1.0

self.scrollView.maximumZoomScale=20.0

let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: Selector("tapAction:")) tapGestureRecognizer.numberOfTapsRequired=2

self.imageView.userInteractionEnabled = true

self.imageView.addGestureRecognizer(tapGestureRecognizer) }


override func didReceiveMemoryWarning() {

super.didReceiveMemoryWarning() / }


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


func tapAction(sender: UITapGestureRecognizer) {

let touchPoint = sender.locationInView(self.imageView)

let Z1:String = String(touchPoint.x)

let Z2:String = String(touchPoint.y)

print( "YES It Works X= " + Z1 + " Y= " + Z2) }

print( "It Works X= " + Z1 + " Y= " + Z2) } }



The image is 6400px X 4100px and I am designing on XCODE 7 on a Mac using El Capitan for an Iphone and Ipad the Imageview is only 320 x 400 and thats the coordinates I am getting with the above code


I am trying to get the coordinates in relation to the image. It is a building plan and I want to double tap on a room and it will know where I have tapped no matter how much I zoom in


I can do this in Android just hoping there is an IOS equivelent


Thanks for the help


Mark

Your 'touchPoint' variable has the tap location in the coordinate system of the image view, and the bounds of the view (in the same coordinate system) are given by imageView.bounds.


So, the position of the tap relative to the bottom left of the image view is:


     x = touchPoint.x - imageView.bounds.minX
     y = touchPoint.y - imageView.bounds.minY

But you have to rescale this to the size of the image itself:


     x = (touchPoint.x - imageView.bounds.minX) * imageView.image.size.width / imageView.bounds.width
     y = (touchPoint.y - imageView.bounds.minY) * imageViewimage.size.height / imageView.bounds.height


and that should be the position in the image you're looking for.

Hi Quincey


Major Thanks after many hours mucking about with your code I have the following routine that is run after a double tap


func tapAction(sender: UITapGestureRecognizer) {

let touchPoint: CGPoint = sender.locationInView(self.imageView)

let Z1 = imageView.image!.size.height

let Z2 = imageView.image!.size.width

let Z3 = imageView.bounds.minY

let Z4 = imageView.bounds.minX

let Z5 = imageView.bounds.height

let Z6 = imageView.bounds.width

let pos1 = (touchPoint.x - Z4) * Z2 / Z6

let pos2 = (touchPoint.y - Z3) * Z1 / Z5

let ZZ1 = "\(pos1)"

let ZZ2 = "\(pos2)"

XX.text = "X= " + ZZ1 + " Y= " + ZZ2

}


The results of all the variables are as follows


  1. touchPoint.x = 125.825
  2. touchPoint.x = 232.1
  3. imageView.image!.size.height = 4100
  4. imageView.image!.size.width = 6400
  5. imageView.bounds.minY = 0.0
  6. imageView.bounds.minX = 0.0
  7. imageView.bounds.height = 529.0
  8. imageView.bounds.width = 320.0



Calculated Coordinates

Pos1 (X) = 2516.5

Pos2 (Y) = 1833.55


These are not correct as if I use Photoshop to get the coordinates of the same point touched on the image it reports it as


X = 2516

Y = 1501


So X is correct but Y by over 300 pixels and I cannot work out why


Any Ideas


Mark

Accepted Answer

Well, I used the wrong assumption. The calculation I gave you is correct if you told the image view to scale the image independently in both directions.


But, more likely, the image view is set to "aspect fill" or "aspect fit". (You can look at the view properties in Interface Builder to see what it's set to, or query the properties in code.) In that case, either the X scale or the Y scale applies in both directions.


However, there's still a complication. You said your image view was 320 x 400, but it's actually 320 x 529. Either you've changed the size, or it's been changed by autolayout. Either way, the aspect ratio of the view is different from the aspect ratio of the image. That means the image doesn't fit the view in the vertical direction — it's either clipped or letterboxed or stretched. That means you'd have to account for that in the Y calculation.


So, you either have to ensure that you have the correct aspect ratio for the image view, or offset the computed Y coordinate. If you need to do the latter, then easiest way would probably be to adjust the calculation to work from the center of the view/image, rather than the bottom as I originally did.

Quincey Your a star I had it set to aspect Fit however setting to scaled to fit gives the correct result


Problem is it stretches the image (image is in landscape displaying in a portrait view pinching zooms in)


If I set it to anything else it doesnt display correct except aspect fit that shows correctly but gives the wrong cord on the Y


Are you saying there is a way to offset by the amount its off Or is there a setting somewhere where I scale to fit but shrink the image so it look correct on screen


I need to be able to display correctly in both portrait and landscape mode


Your help is greatly appreciated


Mark

Because the image view is embedded in a scroll view, you have some decisions to make. You need to decide how big you want the image to be, relative to the scroll view's visible content area. In particular, what does 100% scale mean?


You could decide that at 100% the whole image should be visible with no scrolling, or that it should fit in one direction and scroll in the other, or that particular features of the image (e.g. the room you mentioned) should have a standard size on the screen regardless of which device it is.


Then you need to come up with autolayout constraints that ensure the image view is the correct size and (if necessary) aspect ratio.


Then you need to fit the image into the image view. If you can give the image view the same aspect ratio as the image, then the coordinate transformation is easier. (Otherwise, as I suggested before, it would probably be easier to compute the coordinates relative to midX and midY instead of minX and minY, producing a result that's relative to the center of the image.)

Quincey


Thank you So much for your help I have managed to do it thanks to your guidence


Many Thanks


Mark

XY Coordinates of image
 
 
Q