1

I have this image:

enter image description here

What I want to do is to add a UITapGestureRecognizer to this image (or I can split the image in the different parts it consists of and add for each part a UITapGestureRecognizer) in order to have different actions according to the leaf tapped. If I split the image in different images each for each leaf the UIImageViews will probably overlap and tapping on one will be recognized as a tap on another one. Having just one image implies knowing the points of the screen that belongs to a leaf rather than to another one.

Any clues on how to do it would be really appreciated. Thanks

ubiAle
  • 445
  • 9
  • 19

3 Answers3

2

Change your behavior by examining the gesture recognizer's locationInView:.

If you handle the image as one unit, implement this in your gesture recognizer call back to decide which "leaf" (if any) was tapped.

If you handle the image as multiple images, you could also implement it in your callback, or you could also implement in, e.g., your delegate's gestureRecognizerShouldBegin: to suppress events for touches outside the leaf as drawn.

EDIT: I didn't realize that you might also be looking for assistance on figuring out whether a point lies within a leaf. @PhillipMills is correct on this point: we need to know how you are drawing the image.

FOLLOW-UP: This is somewhat outside my area of expertise.

The easiest approach (from a hit-testing standpoint) is to do what @PhillipMills suggested, using Quartz drawing and CGPathContainsPoint(). If you have detailed graphics that you need rendered as a PNG, you could certainly construct a simple path that would be (virtually) overlayed to allow hit testing.

Your other options, AFAIK, are to do hit testing mathematically, but you would basically be reimplementing CGPathContainsPoint() but without a path, or to employ various tricks that look at the color of the pixels at your touch point to do hit testing. Googling will turn up some useful results if you go this route, but honestly for a shape as simple as what you've drawn, just use some UIBezierPath code to recreate in code.

Conrad Shultz
  • 8,748
  • 2
  • 31
  • 33
  • The image is a .png file. If I have the image as one unit how can I figure out where a tapped point lies in a certain leaf of my picture?! – ubiAle Apr 04 '12 at 16:57
  • Thanks for the clues, I have never used UIBezierPath but I will take a look. Cheers! – ubiAle Apr 04 '12 at 17:57
1

Not sure if this will be helpful but if you get stuck on figuring out which leaf was clicked, you could use an old image map trick we used to use in CD-ROM projects for pixel accurate click tracking on images.

You have your full size image. Make a 25% (or less) scaled version of it. Fill each of the leaf regions you want to track clicks on with a different color; anything you want to ignore make black. When the full size image is clicked, get the x/y coordinates and scale them by the percentage of your scaled image. Then get the pixel color of the scaled image at the scaled x/y coordinate. By determining the pixel color you will know which leaf was clicked.

Sounds clunky but it works really well and is fast.

(all that said, I don't think alpha areas of images trigger the gesture recognizer - so breaking the image up would be less complicated/code intensive.)

spring
  • 18,009
  • 15
  • 80
  • 160
  • the image is supposed to be colored with different colours so in case it will be hard for me drawing using Quartz (since I have never done it before) I will use the pixel color technique. Cheers! – ubiAle Apr 04 '12 at 18:27
0

If you can break the shape apart into the constituent elements, then you can put each into it's own layer and use the method discussed in this stackoverflow discussion to determine which was touched: Hit Testing with CALayer using the alpha properties of the CALayer contents

Community
  • 1
  • 1
tobinjim
  • 1,862
  • 2
  • 19
  • 31