带边框的cornerRadius：边框的一些小故障

Question

我的应用大多是圆形和边框的基础。

我使用UIButton，UIImageView和UIView的图层属性给出圆角半径和边框。

但我面临着不干净的角落问题。

我得到如下结果。

的UIButton

的UIImageView：

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

这是我的代码：

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

button.clipsToBounds = YES; 

我必须寻找解决这个，但没有得到成功。我试过button.layer.masksToBounds = YES但没有效果。

我是否缺少任何东西？还是有其他方法可以给我更好的结果比较CALayer？

如果您需要更多信息，请点评。谢谢你给你时间。

Answer 1

我试了很多的解决方案，并最终通过UIBezierPath。

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

这是该类别的方法：

- (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从这个惊人的文章的想法：Thinking like a Bézier path

我得到这两个连接的大部分代码：

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

备注：这是类别方法，所以self代表调用此方法的视图。像的UIButton，UIImageView的等

Answer 2

删除

button.layer.borderWidth = 0.3; 
button.layer.borderColor = [[UIColor blueMain] CGColor]; 

Answer 3

这里作为UIView的的扩展，我@ CRDave的answer的斯威夫特版本：

protocol CornerRadius { 
    func makeBorderWithCornerRadius(radius: CGFloat, borderColor: UIColor, borderWidth: CGFloat) 
} 

extension UIView: CornerRadius { 

    func makeBorderWithCornerRadius(radius: CGFloat, borderColor: UIColor, borderWidth: CGFloat) { 
     let rect = self.bounds; 

     let maskPath = UIBezierPath(roundedRect: rect, byRoundingCorners: .AllCorners, cornerRadii: CGSize(width: radius, height: radius)) 

     // Create the shape layer and set its path 
     let maskLayer = CAShapeLayer() 
     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 

     //Create path for border 
     let borderPath = UIBezierPath(roundedRect: rect, byRoundingCorners: .AllCorners, cornerRadii: CGSize(width: radius, height: radius)) 

     // Create the shape layer and set its path 
     let borderLayer = CAShapeLayer() 

     borderLayer.frame  = rect 
     borderLayer.path  = borderPath.CGPath 
     borderLayer.strokeColor = borderColor.CGColor 
     borderLayer.fillColor = UIColor.clearColor().CGColor 
     borderLayer.lineWidth = borderWidth * UIScreen.mainScreen().scale 

     //Add this layer to give border. 
     self.layer.addSublayer(borderLayer) 
    } 

}