颜色问题外的惊人圆角半径

Question

这是我添加到新视图控制器的代码：

- (void)viewDidLoad
{
    [super viewDidLoad];

    UIView *contentView = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 200, 100)];
    [contentView setClipsToBounds:YES];
    [contentView setBackgroundColor:[UIColor blueColor]];
    [self.view addSubview:contentView];

    [[contentView layer] setBorderColor:[[UIColor lightGrayColor] CGColor]];
    [[contentView layer] setBorderWidth:1.0f];
    [[contentView layer] setCornerRadius:5.0f];
    [[contentView layer] setMasksToBounds:YES];
} 

结果：

如果看角落，我们可以看到外面的蓝色像素：

Answer 1

您可以使用 CAShapeLayer ：

- (void)viewDidLoad
{
    [super viewDidLoad];

    UIView *contentView = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 200, 100)];
    [self.view addSubview:contentView];

    CAShapeLayer *subLayer = [[CAShapeLayer alloc] init];
    [subLayer setFillColor:[UIColor blueColor].CGColor];
    [subLayer setStrokeColor:[UIColor grayColor].CGColor];
    [subLayer setLineWidth:6.0];
    [subLayer setPath:[UIBezierPath bezierPathWithRoundedRect:contentView.bounds cornerRadius:5.0].CGPath];

    [contentView.layer addSublayer:subLayer];
}

Answer 2

可悲的是，苹果似乎分别绘制了背景和边框，并且彼此之间已经圆角。当使用不同的背景颜色相互绘制两条相同的圆角矩形贝塞尔路径时，您可以获得相同的结果。 这是由两个绘制元素的抗锯齿引起的。

到目前为止对我有用的解决方案： 在 containerView 中使用 2 个不同的视图。一个带有边框和清晰的背景，另一个带有背景颜色。 在两个子视图上使用cornerRadius，但背景视图应插入半像素：

CGRectMake(borderView.frame.origin.x + 0.5,
           borderView.frame.origin.y + 0.5,
           borderView.frame.size.width - 1.0,
           borderView.frame.size.height - 1.0);

这样您就不会在边框边缘看到抗锯齿像素。

Answer 3

我怀疑正在发生的事情是剪贴蒙版被应用于将其限制为角半径的图层，然后在背景图像的（顶部）内绘制边框，并且由于常见的称为抗锯齿的技术你可以看到下面的一些像素。抗锯齿是一种用于防止圆形和角线看起来锯齿状的技术。

编辑：

根据我的最后一条评论，如果您想将所有内容保留在一个视图中，请将底部图层（蓝色）的边框设置为透明或宽度为 0 以获得圆角，然后将其创建为稍大的第二层绘制边框，确保视图框架足够大以容纳绘制的 边框。