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

Posted 2023-02-24

【中文标题】颜色问题外的惊人圆角半径

【英文标题】：Amazing corner radius outside color issue

【发布时间】：2015-03-23 14:46:01

【问题描述】：

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

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

结果：

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

【参考方案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];

【参考方案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);

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

【讨论】：

是的，让它更小一点也解决了你发现的问题this

【参考方案3】：

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

编辑：

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

【讨论】：

alos 抗锯齿没关系，但我认为适用于内部弧线。所以对于锯齿状和外部抗锯齿它应该使用白色或透明我不知道

当您将边框宽度调整很小的量时会发生什么？它有什么影响吗？如果你以非常小的分数改变色调呢？如果您的特定应用程序对少量像素出血非常敏感，也许您可​​以简单地为具有蓝色背景的 CA 图层创建剪贴蒙版，以便圆角，绘制没有不透明边框，然后叠加另一个图层稍大一点，除了绘制的边框外是透明的。