2017-09-18 84 views
0

我使用dr-Charts API在我的應用程序中繪製條形圖。我畫了條線圖:UIBezierPath - 帶圓角的矩形

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]; 

其實,我想我的條形圖的矩形是圓角的矩形,類似這樣:

enter image description here

所以,在BarChart.m,我開始與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"]; 

在StackOverflow上遇到很多答案後,我無法成功。 我試過很多答案像
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)];

能否請你幫忙。

+0

看到了如https://stackoverflow.com/questions/36174991/ios-uiimageview-border-white-with-radius-display - 一個奇怪的黑線在4角/ 36176242#36176242 –

+0

@ Anbu.Karthik感謝您的回覆。應用'bezierPathWithRoundedRect'後,我看到一些奇怪的[輸出](https://imgur.com/BjvNj7O)。 –

+0

其多次調用n次 –

回答

0

試着畫出圓角寬線,例如

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];