How to draw a rounded rectangle with a SOFT EDGE on the iPhone?

1

votes

I need to overlay some text on an image. Because the image has a lot of detail, I need to do something to make the text more legible.

What I would like to do is draw a semi-transparent white rounded rectangle with a SOFT EDGE below the text.

I've tried painting a white rounded rectangle with a white shadow, but that doesn't give me quite the effect I want. It results in a hard edge between the rounded rectangle and the shadow. I would like it to be a smooth transition.

Any ideas?

iphoneobjective-ccore-graphics

1

votes

I've done something similar with CGGradient and it was a pain and the final result didn't look that great. A much easier way would be to create the edges with a partially transparent PNG using - (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight

Transparent graphics are expensive, so this may excessively degrade performance if you have a lot of labels, but if you've only got a few (and they don't move or otherwise require lots of redraws) you'll be fine.

-1

votes

You'll need to subclass UIView and modify the drawRect: method to allow for a radius. For a code sample of a drawRect: with a fixed radius of 10.0px, try this:

- (void)drawRect:(CGRect)rect {

    float radius = 10.0f;

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetRGBFillColor(context, 255,255,255,0.25);

    CGContextMoveToPoint(context, rect.origin.x, rect.origin.y + radius);
    CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y + rect.size.height - radius);
    CGContextAddArc(context, rect.origin.x + radius, rect.origin.y + rect.size.height - radius, 
                radius, M_PI / 4, M_PI / 2, 1);
    CGContextAddLineToPoint(context, rect.origin.x + rect.size.width - radius, 
                        rect.origin.y + rect.size.height);
    CGContextAddArc(context, rect.origin.x + rect.size.width - radius, 
                rect.origin.y + rect.size.height - radius, radius, M_PI / 2, 0.0f, 1);
    CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y + radius);
    CGContextAddArc(context, rect.origin.x + rect.size.width - radius, rect.origin.y + radius, 
                radius, 0.0f, -M_PI / 2, 1);
    CGContextAddLineToPoint(context, rect.origin.x + radius, rect.origin.y);
    CGContextAddArc(context, rect.origin.x + radius, rect.origin.y + radius, radius, 
                -M_PI / 2, M_PI, 1);

    CGContextFillPath(context);
}

So the best way to do this would be to add

@property CGFloat radius;

to your header file, and override the default constructor to read:

-(id) initWithFrame:(CGRect)aRect radius:(CGFloat)rad color:(UIColor *)bgColor opacity:(CGFloat)opacity {
    if (self = [super initWithFrame:aRect]) {
        [self setOpacity:opacity];
        [self setBackgroundColor:bgColor];
        [self setRadius:rad];
    }
}

and tweak my above method to include self.radius for all radius calls, removing the float declaration at the top.

How to draw a rounded rectangle with a SOFT EDGE on the iPhone?

2 Answers