Как нарисовать эту дугу (изображение включено), используя основную графику?

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

Прямо сейчас, он просто рисует меня прямоугольник, но я хочу, чтобы он рисовал мне дугу, которая опускается вниз до центра, как форма вверху этого изображения:

Я пробовал CGContextAddArc и AddArcToPoint и следовал инструкциям, но не могу понять, как нарисовать этот тип дуги. Любая помощь приветствуется.

Answer 1

Проверьте это сообщение в блоге , оно охватывает дуги и пути.Результат почти совпадает с тем, к чему вы стремитесь.

Я рекомендую сделать всю серию 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);