UIView with Png image - ignore touch in transparent areas

Question

I have a PNG of a circle with a transparent background added as a subview. I'm using this type of method to rotate it:

CGPoint location = [touch locationInView:self.view];

if(CGRectContainsPoint(wheelfrom.frame, location))
{

}

the problem is that the transparent area's of the image are registering as part of the UIView. Is there a way to ignore those area's when touched? Is there a better way for me to set up the UIView to recognize the transparency?

thanks!

I don't know the shape of the mask, but if it is small: know that some users have really fat fingers. :) — , Mar 15 '11 at 18:35
There is no mask yet. It's just a view. - (id)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { UIImage *image1 = [UIImage imageNamed:@"nav@2x.png"]; wheelfrom = [[UIImageView alloc] initWithImage:image1]; wheelfrom.frame =CGRectMake(10, -130, 300, 300); [self addSubview:wheelfrom]; } return self; } is there a way to mask out the circle? — Lord Scruffo, Mar 15 '11 at 18:38

meronix · Accepted Answer · 2011-03-17T14:53:27.633

you can check the rbga pixel colour of the image and see if a (=alpha value) is == 0 (or <= aLowValue)... as suggested by Igor Pchelko...

but in your case it may be easier... you are using a 2D circle, so just check how the finger click is far from the circle center and see if it's out of its radius... just a Pitagora's theorem application...

EDIT:

ok, so, if you create a new class for your button subclassing UIButton:

in YourButton.h:

#import <UIKit/UIKit.h>
#import <Foundation/Foundation.h>

@interface YourButton : UIButton {

}

@end

in YourButton.m just add this code:

    - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
        UITouch *touch = [[event allTouches] anyObject];
        CGPoint touchPoint = [touch locationInView:self];
        NSLog(@"Touch x : %f y : %f", touchPoint.x, touchPoint.y);
        float circleRadius = self.frame.size.height / 2; // considering a circle inscricted in a quadRect (width = height)
        float deltaTouchOnCenterX = touchPoint.x - circleRadius;
        float deltaTouchOnCenterY = touchPoint.y - circleRadius;
        float touchDistanceFromCenter = sqrt((deltaTouchOnCenterX * deltaTouchOnCenterX) + (deltaTouchOnCenterY * deltaTouchOnCenterY) );
// or:  float touchDistanceFromCenter = hypot(deltaTouchOnCenterX,deltaTouchOnCenterY);

        NSLog(@"sqrt_val: %f", touchDistanceFromCenter);
        NSLog(@"Touch on center x : %f y : %f", deltaTouchOnCenterX, deltaTouchOnCenterY);
        if (touchDistanceFromCenter <= circleRadius) {
            // your code here
            NSLog(@"___ OK: You are inside the circle!!");
        }
    }

Thanks for your reply... would that still use the CGRectContainsPoint function? i'll look around for the 2d solution, thanks! — Lord Scruffo, Mar 15 '11 at 21:09
Do you know of any sample code that might clarify the radius checking? — Lord Scruffo, Mar 15 '11 at 22:09
Wow, thanks so much! I'm giving it a shot, but thanks so much for posting this! — Lord Scruffo, Mar 15 '11 at 23:46
Seriously, you've so helped me out, it's working perfectly. I really appreciate it! — Lord Scruffo, Mar 18 '11 at 21:13

score 0 · Answer 2 · answered Nov 18 '19 at 01:48

Swift solution:

class RadiusTouchButton: UIButton {
  override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
    let radius = frame.size * 0.5
    let delta = point - CGPoint(x: radius.height, y: radius.width)
    return hypot(delta.x, delta.y) <= radius.height
  }
}

UIView with Png image - ignore touch in transparent areas

2 Answers2