帶邊框的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) 
    } 

}