34

这里不是图形程序员，所以我试图通过这个偶然发现。我正在尝试绘制 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 剪裁，但对此知之甚少，我真的不知道如何修复它。

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

在此处输入图像描述

4

5 回答 5

38

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

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

或更好：

CGFloat lineWidth = 2;
CGRect borderRect = CGRectInset(rect, lineWidth * 0.5, lineWidth * 0.5);
于 2013-06-11T07:09:08.503 回答
17

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

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

于 2013-06-11T07:03:18.967 回答
7

我写这个是为了让你可以很容易地画很多圈。

将以下代码添加到您的 .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]];
于 2015-06-27T00:07:17.757 回答
6

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

CGContextFillEllipseInRect(context, CGRectMake(x,y,width,height))
于 2015-11-25T03:35:12.627 回答
4

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)
于 2016-11-24T13:32:21.670 回答