我如何使用核心图形绘制这条弧线（包括图像）？答案

【问题标题】：How do i draw this arc (image included) using core graphics?我如何使用核心图形绘制这条弧线（包括图像）？
【发布时间】：2012-02-26 21:35:58
【问题描述】：

到目前为止我有这个代码：

CGPoint midLeft = CGPointMake(0, additionalHeight);
    CGPoint bottomCenter = CGPointMake(self.bounds.size.width / 2, self.bounds.size.height);
    CGPoint midRight = CGPointMake(self.bounds.size.width, additionalHeight);
    CGPoint topRight = CGPointMake(self.bounds.size.width, 0);
    CGPoint topLeft = CGPointMake(0, 0);
    
    CGContextRef context = UIGraphicsGetCurrentContext();
    

    CGContextMoveToPoint(context, midLeft.x, midLeft.y);
    CGContextAddLineToPoint(context, midRight.x, midRight.y);
    CGContextAddLineToPoint(context, topRight.x, topRight.y);
    CGContextAddLineToPoint(context, topLeft.x, topLeft.y);

    CGContextClosePath(context);

现在，它只是给我画了一个矩形，但我希望它给我画一个弧线，向下延伸到底部中心，就像这张图片顶部的形状：

我尝试过 CGContextAddArc 和 AddArcToPoint，并按照教程进行操作，但我不知道如何绘制这种弧。任何帮助表示赞赏。

【问题讨论】：

标签： iphone objective-c core-graphics

【解决方案1】：

看看这个blog post，它涵盖了弧线和路径。结果几乎与您的目标相同。

我的建议是做他的整个 Core Graphics 101 系列，真的很好。

您也可以改用UIBezierPath。使用addQuadCurveToPoint:controlPoint:，您可以轻松创建弧形。

我还没有测试过下面的代码，但它应该会创建如下内容：

UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, 10)];
[path addQuadCurveToPoint:CGPointMake(200, 10) controlPoint:CGPointMake(100, 5)];
[path addLineToPoint:CGPointMake(200, 0)];
[path addLineToPoint:CGPointMake(0, 0)];
[path closePath];

CGContextAddPath(context, path.CGPath);
[[UIColor redColor] set];
CGContextFillPath(context);

希望对您有所帮助。

【讨论】：

这是我尝试遵循的教程之一，但仍然无法达到我的结果。他也在使用 CGPath 而不是 CGContext。
他正在使用 CGPath 和他的 CGContext。

【解决方案2】：

您可以通过巧妙地在矩形顶部剪出一个圆圈来做到这一点。下面是一些未经测试的代码，应该是您需要的。在这种情况下， myRect 将是您不想在其上绘制的大矩形。您可能需要调整乘数以使“闪耀”看起来正确。

    //clip the rectangle so we don't draw anything above it
    CGContextAddPath(ctx, myBezierPath.CGPath);
    CGContextClip(ctx);

    //create a multiplier so the curve looks wide
    CGFloat circleMultiplier = 2.0;
    CGRect largeCircleRect = CGRectMake(0, 0, CGRectGetWidth(myRect) * circleMultiplier,  CGRectGetHeight(myRect) * circleMultiplier);

    CGFloat upSpace = (CGRectGetHeight(largeCircleRect) - CGRectGetHeight(myRect)) + 40.0; //40 pts showing at the top
    CGFloat sideSpace = (CGRectGetWidth(largeCircleRect) - CGRectGetWidth(myRect)) / 2.0; //center it horizontally
    largeCircleRect.origin.y -= upSpace;
    largeCircleRect.origin.x -= sideSpace;

    CGContextAddEllipseInRect(ctx, largeCircleRect);
    CGContextFillPath(ctx);

【讨论】：