做圆环图的更好方法。

Question

我正在绘制Donut Chart。我正在使用CGPath绘制并在绘制后将其添加到CAShapeLayer。首先，我绘制一个外弧，然后向中心绘制线，现在我想在当前点添加弧。

这是以下截图。

enter image description here

看小弧应该在行尾。

我的代码，

for (int j = 0; j < numSubject; j++) {
            int valueForSubject = [datasource valueOfSubjectAtIndex:j andLevel:i inDonutChartView:self];
            endAngle =  [self angleInRadianFromSubjectValue:valueForSubject];
            DLog(@"Angle - %f",RADIANS_TO_DEGREES(endAngle))
            //path
            CGMutablePathRef path = CGPathCreateMutable();
            CGPathAddArc(path, NULL, prevPoint.x, prevPoint.y, radius, startAngle, endAngle, NO);
            CGPoint currentPoint = CGPathGetCurrentPoint(path);
            //find angles from start point to center and end point to center
            CGFloat angle1 = [self angleFromFirstPoint:prevPoint secondPoint:centerPoint];
            CGFloat angle2 = [self angleFromFirstPoint:CGPathGetCurrentPoint(path) secondPoint:centerPoint];
            double endX1 = cos(angle1) * LEVEL_WIDTH + prevPoint.x;
            double endY1 = sin(angle1) * LEVEL_WIDTH + prevPoint.y;

            double endX2 = cos(angle2) * LEVEL_WIDTH + CGPathGetCurrentPoint(path).x;
            double endY2 = sin(angle2) * LEVEL_WIDTH + CGPathGetCurrentPoint(path).y;

            //first connect current point to end2 point then draw arc and then connect to end1
            CGPathAddLineToPoint(path, NULL, endX2, endY2);
            //CGPathAddArcToPoint(path, NULL, CGPathGetCurrentPoint(path).x, CGPathGetCurrentPoint(path).y, endX2, endY2, radius - LEVEL_WIDTH);
            CGPathAddArc(path, NULL, CGPathGetCurrentPoint(path).x , CGPathGetCurrentPoint(path).y, radius - LEVEL_WIDTH, endAngle, startAngle, YES);

            //CGPathAddLineToPoint(path, NULL, endX1, endY1);

            //CGPathCloseSubpath(path);
            A3DonutChartShapeLayer* arcLayer = [[A3DonutChartShapeLayer alloc]init];
            arcLayer.path = path;
            //arcLayer.frame = CGPathGetBoundingBox(path);
            arcLayer.lineWidth = BORDER_WIDTH;
            arcLayer.strokeColor = [UIColor blackColor].CGColor;
            arcLayer.fillColor = [UIColor clearColor].CGColor;
            [self.layer addSublayer:arcLayer];

任何指针？

Answer 1

这里是：

CGMutablePathRef path = CGPathCreateMutable();
CGPathAddArc(path, NULL, rect.size.width/2, rect.size.height/2, 100, startAngle, endAngle, NO);
CGPathAddArc(path, NULL, rect.size.width/2, rect.size.height/2, 100-50, endAngle, startAngle, YES);
CGPathCloseSubpath(path);

Answer 2

选项1：CorePlot API 我宁愿使用：CorePlot

，而不是自己绘制，并照顾所有场景

选项2：Google Chart API

NSString* myurl=@"http://chart.apis.google.com/chart?cht=pc&chd=t:120,45%7c120,60,50,70,60&chs=300x200&chl=%7c%7chelo%7cwrd%7cindia%7cpak%7cban&chco=FFFFFF%7cFFFFFF,e72a28%7ca9d331%7cffce08%7c8a2585%7c184a7d";

NSMutableURLRequest *theRequest=[NSMutableURLRequest requestWithURL:[NSURL URLWithString:myurl] cachePolicy:NSURLRequestUseProtocolCachePolicy
                                                    timeoutInterval:60.0];                                              

NSURLResponse* response;
NSError* error;
NSData *imageData=[NSURLConnection sendSynchronousRequest:theRequest returningResponse:&response error:&error];

UIImage *myimage = [[UIImage alloc] initWithData:imageData];

选项3：核心图形和ARC绘图的精彩教程

RayWenderlich Tutorial

选项4：使用HTML + CSS + JavaScript

添加UIWebView并显示一个本地HTML页面，该页面将根据传递给JavaScript的值生成动态图形

Answer 3

关于您实际问题的说明

路径已经这样做了。线，弧，曲线等都是从当前点添加的。看起来你正在传递CGPathAddArc(...)中x和y参数的当前点，但这些参数用于弧的中心，而不是起点。

做圆环图的更好方法。

也就是说，有一种更好的做圆环图的方法。首先，你在甜甜圈的te中心做单个弧，然后你通过抚摸那个弧创建一个新的路径。这使您可以非常轻松地自定义甜甜圈的宽度。我已经在this answer中详细描述了这个并详细分解了代码，但这里是形状本身的一个较短版本。

执行此操作的代码

在甜甜圈的中心创建圆弧（下图中的橙色线）

enter image description here

CGMutablePathRef arc = CGPathCreateMutable();
CGPathMoveToPoint(arc, NULL,
                  startPoint.x, startPoint.y);
CGPathAddArc(arc, NULL,
             centerPoint.x, centerPoint.y,
             radius,
             startAngle,
             endAngle,
             YES);

通过抚摸该路径创建一条新路径（上图中的虚线形状和下图中填充的形状）：

enter image description here

CGFloat lineWidth = 10.0;
CGPathRef strokedArc =
    CGPathCreateCopyByStrokingPath(arc, NULL,
                                   lineWidth,
                                   kCGLineCapButt,
                                   kCGLineJoinMiter, // the default
                                   10); // 10 is default miter limit

如何在CGPathGetCurrentPoint处添加弧？

3 个答案:

关于您实际问题的说明

做圆环图的更好方法。

执行此操作的代码