How to remove corners for round rect bezier path

Question

I am programming first time using Core Graphics, so don't have much idea that how exactly can I solve the problem.

I am drawing rounded rect bezier path along with gradient and stroke as background view for UITableviewCells. Everything has gone fine, except the extra black corners as shown in figure.

I haven't got any idea why they are showing and exactly what they are. Please can anyone help me? Thanks..

Code for creating cell

#import "CustomCellBackground.h"
.
.
.

-(UITableViewCell *) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";

    UITableViewCell *cell = [tableView 
                             dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:CellIdentifier];
        cell.backgroundView = [[CustomCellBackground alloc] init];
        cell.selectedBackgroundView = [[CustomCellBackground alloc]init];
    }

    // Configure the cell.

    cell.selectionStyle = UITableViewCellSelectionStyleNone;

    cell.textLabel.textColor = [UIColor whiteColor];
    cell.textLabel.backgroundColor = [UIColor clearColor];
    return cell;

}

In CustomCellBackground.m

- (void)drawRect:(CGRect)rect
{
    // Drawing code
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGPathRef path = [[UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:10.0] CGPath];
    CGContextAddPath(context, path);
    CGContextClip(context);
    //CGContextSetLineJoin(context, kCGLineJoinRound);

    drawLinearGradientWithFourColors(context, self.bounds);

    CGContextSaveGState(context);

    CGContextSetStrokeColorWithColor(context,[UIColor whiteColor].CGColor);
    CGContextSetLineWidth(context, 1.0);
    CGContextAddPath(context, path);
    CGContextStrokePath(context);
    CGContextRestoreGState(context);

   }

void drawLinearGradientWithFourColors(CGContextRef context, CGRect rect)
{
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

    CGFloat locations[] = {0.0, 0.2, 0.5, 1.0};

    CGFloat colors[16] = {
        85/255.0, 85/255.0, 85/255.0, 1.0,
        45/255.0, 45/255.0, 45/255.0, 1.0,
        22/255.0, 22/255.0, 22/255.0, 1.0,
        0, 0, 0, 1.0
    };

    CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, colors, locations, 4);

    CGPoint startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));
    CGPoint endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));

    CGContextSaveGState(context);
    CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
    CGContextRestoreGState(context);
    CGGradientRelease(gradient);
    CGColorSpaceRelease(colorSpace);
}

Answer 1

When you init your view , setOpaque parameter for layer of the view and view.

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self setOpaque:NO];
        [self.layer setOpaque:NO];
    }
    return self;
}