带边框的cornerRadius：边界周围有毛刺 [英] cornerRadius with border: Glitch around border

问题描述

我的申请主要是以圆形和边界为基础的。

My application is mostly round- and borderbased.

我使用 UIView 的图层属性来给出角半径和边框。

I use the layer property of UIView to give a corner radius and a border.

但我面临的问题是角落不清楚。

But I am facing a problem that the corners are not clear.

我得到以下结果：

UIButton

UIImageView

你可以观察到白色或灰色边框周围的细边框线。

You can observe a thin border line around the white or grey border.

这是我的代码：

button.layer.borderWidth = 2.0;
button.layer.borderColor = [[UIColor whiteColor] CGColor];
button.layer.cornerRadius = 4;

button.clipsToBounds = YES;

我已经寻求解决这个问题，但我没有成功。

I have searched to solve this but I'm not getting success.

我试过 button.layer.masksToBounds = YES ，但没有效果。

I have tried button.layer.masksToBounds = YES, but with no effect.

我错过了什么吗？或者有没有其他方法可以给我更好的结果相比 CALayer ？

Am I missing anything? Or are there any other methods which can give me better results compared to CALayer?

推荐答案

我尝试了很多解决方案并使用 UIBezierPath 结束。

I tried many solution and end by using UIBezierPath.

我创建了<$ c $的类别c> UIView 并添加方法以制作圆形矩形和边框。

I create category of UIView and add method to make round rect and border.

这是该类别的方法：

- (void)giveBorderWithCornerRadious:(CGFloat)radius borderColor:(UIColor *)borderColor andBorderWidth:(CGFloat)borderWidth
{
    CGRect rect = self.bounds;

    //Make round
        // Create the path for to make circle
        UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:rect
                                                       byRoundingCorners:UIRectCornerAllCorners
                                                             cornerRadii:CGSizeMake(radius, radius)];

        // Create the shape layer and set its path
        CAShapeLayer *maskLayer = [CAShapeLayer layer];

        maskLayer.frame = rect;
        maskLayer.path  = maskPath.CGPath;

        // Set the newly created shape layer as the mask for the view's layer
        self.layer.mask = maskLayer;

    //Give Border
        //Create path for border
        UIBezierPath *borderPath = [UIBezierPath bezierPathWithRoundedRect:rect
                                                         byRoundingCorners:UIRectCornerAllCorners
                                                               cornerRadii:CGSizeMake(radius, radius)];

        // Create the shape layer and set its path
        CAShapeLayer *borderLayer = [CAShapeLayer layer];

        borderLayer.frame       = rect;
        borderLayer.path        = borderPath.CGPath;
        borderLayer.strokeColor = [UIColor whiteColor].CGColor;
        borderLayer.fillColor   = [UIColor clearColor].CGColor;
        borderLayer.lineWidth   = borderWidth;

        //Add this layer to give border.
        [[self layer] addSublayer:borderLayer];
}

我知道使用 UIBezierPath 来自这篇惊人的文章：像Bézier路径一样思考

I get idea of using UIBezierPath from this amazing article: Thinking like a Bézier path

我从这两个链接获得大部分代码：

I get most of code from this two link:

• UIView类别用于舍入您想要的角落，而不是像CALayer cornerRadius。


• 如何在UIBezierPath上获取边框

• UIView category for rounding just the corners which you want, not all like CALayer cornerRadius.
• How to get a border on UIBezierPath

注意：这是类别方法，因此自我表示调用此方法的视图。像UIButton，UIImageView等。

Note: This is category method so self represent view on which this method is called. Like UIButton, UIImageView etc.

这篇关于带边框的cornerRadius：边界周围有毛刺的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！