iOS绘制填充圆圈

Question

这里不是图形程序员，所以我试图绊倒这个。我正在尝试绘制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正在修剪边界，但对此并不了解，我真的不知道如何修复它。

提前感谢任何图形专家的建议。

Answer 1

我喜欢@AaronGolden的答案，只想添加：

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

或者，更好：

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

Answer 2

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

尝试将您的视图设置为62x62，或使圆半径略小，以便为60x60视图中的粗笔划留出空间。

Answer 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];
}

然后将以下代码添加到您的视图中，加载并替换＆＃34; yourView＆＃34;任何想要放置圆圈的视图。如果你想制作一堆圆圈，只需在页面上添加一些小视图，然后重复下面的代码。圆圈将变为您所观看的视图的大小。

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

Answer 4

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

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

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