Divide an Image to a clickable parts

Question

I'm trying to divide one image to a more than one clickable part. for example, if the image is a body image, and I tapped the head, it should take me to a different the HeadViewController, but if I tapped on the left hand, it should take me to a different view controller Any idea how to do that?

Place different butttons to each part of image. – user6788419 Jan 25 '17 at 19:33 — user6788419, Jan 25 '17 at 19:33

score 6 · Accepted Answer · 2017-02-15T21:35:59.690

6

Easy method:

Add UIButtons on top of the image with clear background color. You can do this with AutoLayout and always get correct proportions to the areas when scaling up and down.

Hard method:

Add UITapGestureRecognizer to the UIImageView and calculate CGPoint depending on where it the touchPoint is received. This is complicated and must be calculated correctly.

For you, I suggest the first method suggested.

edited Feb 15 '17 at 21:35

answered Jan 25 '17 at 19:36

2

Great minds think alike. You hit send before I did. :) Your "Hard method" doesn't seem very hard. I offered a 3rd option, creating a custom gesture recognizer, which would be a little more complex (but also more reusable.) – Duncan C Jan 25 '17 at 19:41
1

﹢1 for easy method – brandonscript Jan 25 '17 at 20:00
Is there any tutorial how to calculate CGPoint and how to use it? – mahdi Jan 25 '17 at 20:07
@mahdi There are many factors to take into consideration (image scale (as shown), converting the shown "size" to actual pixels, coordinates for the different touch "zones" (CGRect), screenSize, user touchpoint (CGPoint)) However, check this thread out : http://stackoverflow.com/questions/17200191/converting-uiimageview-touch-coordinates-to-uiimage-coordinates and this: http://stackoverflow.com/questions/7216663/convert-points-from-image-to-uiimageview-points-contentmode-aware , you can Google for "Get CGPoint from UIImageView" and you will find many more sources . GL – Jan 25 '17 at 20:22

score 3 · Answer 2 · answered Jan 25 '17 at 19:39

Attach a tap gesture recognizer to your image view. Set user interaction enabled to true.

In the handler for the tap gesture, fetch the coordinates of the user's tap and write custom code that figures out which "hot box" the user tapped in.

Alternately you could create a custom subclass of UIGestureRecognizer that has multiple tap regions.

Divide an Image to a clickable parts

2 Answers2