使用 iOS 核心图形绘制空心圆答案

【问题标题】：Drawing a Hollow Circle with Core Graphics for iOS使用 iOS 核心图形绘制空心圆
【发布时间】：2016-02-27 09:02:46
【问题描述】：

我正在寻找如何在 iOS 中使用 Core Graphics (CGContext) 绘制空心圆的方法。我尝试使用代码来做到这一点：

- (void)drawRect:(CGRect)rect {
      [super drawRect:rect];
      CGContextRef ctx = UIGraphicsGetCurrentContext();
      CGContextSetLineWidth(ctx, 8.0);
      CGContextSetStrokeColor(ctx, CGColorGetComponents([[UIColor redColor] CGColor]));
      CGContextSetFillColor(ctx, CGColorGetComponents([[UIColor blueColor] CGColor]));
      CGContextFillEllipseInRect(ctx, rect);
      CGContextFillPath(ctx);
}

但它会绘制实心圆圈。由于这个问题已经在这里讨论过了，但是像this 这样的其他例子只给了我实心圆圈。

【问题讨论】：

空圈是什么意思？像一个看不见的圆圈，还是一个在圆圈周围有笔划但空心的圆圈？
"hollow"，谢谢指正，我会编辑标题。

标签： ios objective-c core-graphics cgcontext

【解决方案1】：

如果你想在矩形内画一个圆，使用 Stroke 方法和 rect in 参数你将在矩形外画出一部分圆。

假设您知道要绘制的圆的宽度，那么您有两个选择。

首先，你可以画线，但你必须把它画成一个更小的矩形：

-(void)drawRect:(CGRect)rect {

    CGContextRef ctx = UIGraphicsGetCurrentContext();

    CGFloat innerWidth = 8;
    [[UIColor redColor] setStroke];

    CGContextSetLineWidth(ctx, innerWidth);

    // We add an ellipsis shifted by half the inner Width
    CGContextAddEllipseInRect(ctx, CGRectInset(rect, innerWidth, innerWidth));

    // Stroke the path
    CGContextStrokePath(ctx);
}

您也可以使用奇偶规则填充圆圈 (Apple docs)

-(void)drawRect:(CGRect)rect {

    CGContextRef ctx = UIGraphicsGetCurrentContext();

    CGFloat innerWidth = 8;
    [[UIColor redColor] setStroke];

    // Add the outer circle
    CGContextAddEllipseInRect(ctx, rect);
    // Add the inner circle
    CGContextAddEllipseInRect(ctx, CGRectInset(rect, innerWidth, innerWidth));

    // Fill the path using the EO rule
    CGContextEOFillPath(ctx);
}

【讨论】：

【解决方案2】：

一种方法是画一个实心圆，然后用CGContextSetBlendMode(UIGraphicsGetCurrentContext(),kCGBlendModeClear)画一个稍小的圆

在你的代码之后添加类似的东西

CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(ctx, 5.0);
CGContextSetBlendMode(ctx,kCGBlendModeClear)
CGContextSetFillColor(ctx, CGColorGetComponents([[UIColor blueColor] CGColor]));
CGContextFillEllipseInRect(ctx, rect);
CGContextFillPath(ctx);

UIGraphicsEndImageContext();

我在我的绘图应用程序中使用CGContextSetBlendMode(UIGraphicsGetCurrentContext(),kCGBlendModeClear)，这可能是一个更好的用途。抚摸路径可能对你有用。

【讨论】：

这是一个有价值的替代想法，因为在椭圆上描边实际上会在预期的圆之外画出一半的描边，而填充、插入然后再次填充将保留最终的图形完全包含。但是，您的代码并没有执行您所说的操作。

【解决方案3】：

使用CGContextStrokeEllipseInRect 代替CGContextFillEllipseInRect。并且由于您尚未在当前上下文中构建路径，因此请摆脱CGContextFillPath。

【讨论】：

【解决方案4】：

如果你只想要圆形轮廓，不要填充它。

- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];

    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(ctx, 8.0);
    [[UIColor redColor] set];
    CGContextStrokeEllipseInRect(ctx, rect);
}

【讨论】：