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裁剪了，但不知道怎么修复它。

感谢所有图形专家提供的建议。

- RegularExpression

---

感谢分享代码。顺便说一下，我认为CGContextFillPath(context);是不必要的。 - Daniel

Answer 1

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

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

或者，更好的方式：

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

- Wain

---

@JohnRiselvato 我想不出为什么这会给我一个黑色背景的视图？ - Shumais Ul Haq

Answer 2

这些圆仅仅被裁剪到绘制它们的视图范围内。视图必须稍微大于待绘制的圆。你可以想象CGContextStrokeEllipseInRect调用以半径为30的圆为轮廓，然后在轮廓的每一侧绘制一个像素。在远端的边缘，你将会有一个像素刚好位于视图的边界之外。

尝试将你的视图大小设置为62x62，或者将圆的半径稍微缩小以留出60x60视图中粗画笔的空间。

- Aaron Golden

---

谢谢您的回复。答案一样，但因为 Wain 已经有了代码，所以我只是拿了它并且完美运行。 - RegularExpression

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

接下来在view did load中添加以下代码，并将"yourView"替换为您想要放置圆形的任何视图。如果您想创建一堆圆，请将一些小视图添加到页面上并重复下面的代码。圆的大小将成为您所创建的视图的大小。

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

- Trianna Brannon

Answer 4

有一种简单的方法可以绘制填充圆形。

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

- David Wang

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)

- user7205499