如何在 CGPathGetCurrentPoint 添加弧？

Question

我正在绘制甜甜圈图。我正在使用CGPath 进行绘制，并在绘制后将其添加到CAShapeLayer。首先我画一个外圆弧，然后向中心画线，现在我想将圆弧添加到我的当前点。

截图如下。

看到较小的弧线应该在行尾。

我的代码，

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 图表 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：Core Graphics 和 ARC 绘图的好教程

RayWenderlich Tutorial

选项 4：使用 HTML + CSS + JavaScript

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

• http://nvd3.org/ghpages/pie.html
• http://jsfiddle.net/RNuee/2/
• http://bl.ocks.org/Guerino1/2295263

Answer 3

关于您的实际问题的注释

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

---

制作圆环图的更好方法。

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

执行此操作的代码

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

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

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

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