如何使用核心图形绘制此弧（包含图像）？

Question

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

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

现在，它只是画了一个矩形，但我希望它能画出一条弧线，它向下延伸到bottomCenter，就像这张图片顶部的形状一样：

我尝试了CGContextAddArc和AddArcToPoint，并按照教程，但我无法弄清楚如何绘制这种弧。任何帮助表示赞赏。

Answer 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);

希望这对任何帮助。

Answer 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);