UIBezierPath - Rectangle with rounded corners

Question

I'm using dr-Charts API to draw bar graphs in my application. I'm drawing the bar graph:

BarChart *barChartView = [[BarChart alloc] initWithFrame:CGRectMake(0, 150, WIDTH(self.view), HEIGHT(self.view) - 600)];
[barChartView setDataSource:self];
[barChartView setDelegate:self];
[barChartView setLegendViewType:LegendTypeHorizontal];
[barChartView setShowCustomMarkerView:TRUE];
[barChartView drawBarGraph];

[barChartView setDrawGridY:TRUE];
[barChartView setDrawGridX:FALSE];

[self.view addSubview:barChartView];

Actually, I want my bar chart rectangles to be rounded rect, something similar to this:

So, In BarChart.m, I started playing with API CAShapeLayer & UIBezierPath:

- (UIBezierPath *)drawBarPathWithStartPoint:(CGPoint)startPoint endPoint:(CGPoint)endPoint{
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(startPoint.x, startPoint.y, endPoint.x - startPoint.x, endPoint.y - startPoint.y)];
  //UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(startPoint.x, startPoint.y, endPoint.x - startPoint.x, endPoint.y - startPoint.y) byRoundingCorners:UIRectCornerAllCorners cornerRadii:CGSizeMake(10, 10)];
    [path stroke];

    return path;
}

        CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];
        [shapeLayer setPath:[[self drawBarPathWithStartPoint:endPoint endPoint:startPoint] CGPath]];
        [shapeLayer setStrokeColor:[barData.barColor CGColor]];
        [shapeLayer setFillColor:[barData.barColor CGColor]];
        [shapeLayer setFillRule:kCAFillRuleEvenOdd];
        [shapeLayer setLineWidth:0.5f];
        [shapeLayer setOpacity:0.7f];
        [shapeLayer setShadowRadius:0.0f];
        [shapeLayer setShadowColor:[[UIColor clearColor] CGColor]];
        [shapeLayer setShadowOpacity:0.0f];
        [shapeLayer setValue:[barData.yAxisArray objectAtIndex:i] forKey:@"data"];

After following many answers on StackOverflow, I couldn't succeed. I tried many answers like
shapeLayer.cornerRadius = 10;
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(startPoint.x, startPoint.y, endPoint.x - startPoint.x, endPoint.y - startPoint.y) byRoundingCorners:UIRectCornerAllCorners cornerRadii:CGSizeMake(10, 10)];

Could you please help.

see this for e.g https://stackoverflow.com/questions/36174991/ios-uiimageview-border-white-with-radius-display-a-strange-dark-line-in-4-corne/36176242#36176242 — Anbu.Karthik, Sep 18 '17 at 10:08
@Anbu.Karthik Thanks for your reply. After applying `bezierPathWithRoundedRect `, I'm seeing some weird [output](https://imgur.com/BjvNj7O). — Imad Ali, Sep 18 '17 at 10:11
@Anbu.Karthik Could you please download the GitHub code and suggest an alternative way? — Imad Ali, Sep 18 '17 at 10:14

score 0 · Answer 1 · answered Sep 20 '17 at 15:54

Try to draw wide line with rounded corners, for example

UIBezierPath *linePath = [UIBezierPath bezierPath];
[linePath moveToPoint:CGPointMake(topX, topY)];
[linePath addLineToPoint:CGPointMake(bottomX, bottomY)];

CAShapeLayer *line = [CAShapeLayer layer];
line.frame = some_frame;
line.lineCap = kCALineCapRound;
line.path = linePath.CGPath;
line.fillColor = nil;
line.lineWidth = 6.0;
line.cornerRadius = 3.0;
line.opacity = 1.0;
line.strokeColor = [UIColor greenColor].CGColor;
[line setMasksToBounds:YES];

UIBezierPath - Rectangle with rounded corners

1 Answers1