iOS绘制填充圆圈答案

【问题标题】：iOS draw filled CirclesiOS绘制填充圆圈
【发布时间】：2013-06-11 06:45:52
【问题描述】：

这里不是图形程序员，所以我试图通过这个偶然发现。我正在尝试绘制 9 个实心圆圈，每个圆圈都有不同的颜色，每个圆圈都有一个白色边框。 UIView 的框架是 CGRectMake (0,0,60,60)。见附图。

问题是我在每一边的边界上都出现了“扁平点”。以下是我的代码（来自 UIView 子类）：

- (void)drawRect:(CGRect)rect
{
    CGRect borderRect = CGRectMake(0.0, 0.0, 60.0, 60.0);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 1.0);
    CGContextSetRGBFillColor(context, colorRed, colorGreen, colorBlue, 1.0);
    CGContextSetLineWidth(context, 2.0);
    CGContextFillEllipseInRect (context, borderRect);
    CGContextStrokeEllipseInRect(context, borderRect);
    CGContextFillPath(context);
}

如果我在 drawRect 中更改为 CGRectMake(0,0,56,56)，我只会在顶部和左侧得到平坦的点，而底部和右侧看起来很好。

谁能建议我如何解决这个问题？在我看来，边框被 UIView 剪裁了，但对此了解不多，我真的不知道如何修复它。

在此先感谢各位图形专家的建议。

【问题讨论】：

感谢分享代码。顺便提一句。我认为不需要CGContextFillPath(context);。

标签： ios drawrect cgcontext

【解决方案1】：

我喜欢@AaronGolden 的回答，只是想补充一下：

CGRect borderRect = CGRectInset(rect, 2, 2);

或者，更好：

CGFloat lineWidth = 2;
CGRect borderRect = CGRectInset(rect, lineWidth * 0.5, lineWidth * 0.5);

【讨论】：

@JohnRiselvato 我不明白为什么这会给我一个黑色背景的视图？

【解决方案2】：

那些圆圈只是被剪裁到绘制它们的视图的边界。视图必须略大于要绘制的圆圈。您可以想象CGContextStrokeEllipseInRect 调用跟踪半径为 30 的圆，然后在跟踪曲线的每一侧绘制一个像素。好吧，在远边缘，您将在视图边界之外拥有其中一个像素。

尝试将您的视图设置为 62x62，或将圆半径稍小一些，以便在 60x60 视图中为粗笔画留出空间。

【讨论】：

感谢您的回复。相同的答案，但由于 Wain 有代码，我只是抓住它并完美地工作。

【解决方案3】：

我写这个是为了方便你画很多圈。

将以下代码添加到您的 .m 文件中：

- (void) circleFilledWithOutline:(UIView*)circleView fillColor:(UIColor*)fillColor outlineColor:(UIColor*)outlinecolor{
CAShapeLayer *circleLayer = [CAShapeLayer layer];
float width = circleView.frame.size.width;
float height = circleView.frame.size.height;
[circleLayer setBounds:CGRectMake(2.0f, 2.0f, width-2.0f, height-2.0f)];
[circleLayer setPosition:CGPointMake(width/2, height/2)];
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(2.0f, 2.0f, width-2.0f, height-2.0f)];
[circleLayer setPath:[path CGPath]];
[circleLayer setFillColor:fillColor.CGColor];
[circleLayer setStrokeColor:outlinecolor.CGColor];
[circleLayer setLineWidth:2.0f];
[[circleView layer] addSublayer:circleLayer];
}

然后将以下代码添加到您的视图并加载并将“yourView”替换为您想要放置圆圈的任何视图。如果您想制作一堆圆圈，只需在页面中添加一些小视图并重复下面的代码。圆圈将成为您创建的视图的大小。

[self circleFilledWithOutline:self.yourView fillColor:[UIColor redColor] outlineColor:[UIColor purpleColor]];

【讨论】：

【解决方案4】：

有一个简单的方法来绘制一个填充圆

CGContextFillEllipseInRect(context, CGRectMake(x,y,width,height))

【讨论】：

【解决方案5】：

Trianna Brannon 关于 Swift 3

的回答

func circleFilledWithOutline(circleView: UIView, fillColor: UIColor, outlineColor:UIColor) {
    let circleLayer = CAShapeLayer()
    let width = Double(circleView.bounds.size.width);
    let height = Double(circleView.bounds.size.height);
    circleLayer.bounds = CGRect(x: 2.0, y: 2.0, width: width-2.0, height: height-2.0)
    circleLayer.position = CGPoint(x: width/2, y: height/2);
    let rect = CGRect(x: 2.0, y: 2.0, width: width-2.0, height: height-2.0)
    let path = UIBezierPath.init(ovalIn: rect)
    circleLayer.path = path.cgPath
    circleLayer.fillColor = fillColor.cgColor
    circleLayer.strokeColor = outlineColor.cgColor
    circleLayer.lineWidth = 2.0
    circleView.layer.addSublayer(circleLayer)
}

并通过以下方式调用 func：

self.circleFilledWithOutline(circleView: myCircleView, fillColor: UIColor.red, outlineColor: UIColor.blue)

【讨论】：