Làm cách nào để tạo góc nghiêng trên UIView?

Question

Có rất nhiều câu hỏi về việc tạo góc của các góc UIView được làm tròn. Rất tiếc, tôi không thể tìm thấy bất kỳ điều gì về cách tạo các góc góc cạnh. Làm thế nào tôi có thể tạo ra một UIView với các góc được cắt ở góc 45 độ thay thế?

Bạn thậm chí có thể có một ngôi sao vàng tiền thưởng (tượng trưng) nếu bạn có thể chỉ cho tôi cách thực hiện bất kỳ góc riêng lẻ nào được cắt ở một góc.

Chỉnh sửa: Để tham khảo, here's a link cho câu hỏi mà tôi nghi ngờ có triển khai tương tự với giải pháp này. Tôi chỉ không biết những gì tôi phải thay đổi.

Answer 1

Trước tiên, bạn cần một con đường với các góc góc cạnh:

- (CGPathRef) makeAnglePathWithRect: (CGRect)rect withSize:(float) s { 

    CGPoint one = CGPointMake(rect.origin.x +s, rect.origin.y); 
    CGPoint two = CGPointMake(rect.origin.x + rect.size.width - s, rect.origin.y); 

    CGPoint three = CGPointMake(rect.origin.x + rect.size.width, rect.origin.y +s); 
    CGPoint four = CGPointMake(rect.origin.x + rect.size.width, rect.origin.y + rect.size.height -s); 

    CGPoint five = CGPointMake(rect.origin.x + rect.size.width-s, rect.origin.y + rect.size.height); 
    CGPoint six = CGPointMake(rect.origin.x+s, rect.origin.y + rect.size.height); 

    CGPoint seven = CGPointMake(rect.origin.x, rect.origin.y + rect.size.height-s); 
    CGPoint eight = CGPointMake(rect.origin.x, rect.origin.y + s); 

    CGMutablePathRef path = CGPathCreateMutable(); 
    CGPathMoveToPoint(path,NULL,one.x, one.y); 
    CGPathAddLineToPoint(path,NULL,two.x, two.y); 
    CGPathAddLineToPoint(path,NULL,three.x, three.y); 
    CGPathAddLineToPoint(path,NULL,four.x, four.y); 
    CGPathAddLineToPoint(path,NULL,five.x, five.y); 
    CGPathAddLineToPoint(path,NULL,six.x, six.y); 
    CGPathAddLineToPoint(path,NULL,seven.x, seven.y); 
    CGPathAddLineToPoint(path,NULL,eight.x, eight.y); 
    CGPathAddLineToPoint(path,NULL,one.x, one.y); 

    return path; 
} 

Sau đó, bạn cần phải sử dụng đường dẫn để xác định một mặt nạ:

CAShapeLayer *maskLayer = [CAShapeLayer layer]; 
CGRect bounds = CGRectMake(0.0f, 0.0f, 100, 100); //figure out your bounds 

[maskLayer setFrame:bounds]; 
CGPathRef p = [self makeAnglePathWithRect:bounds withSize:20.0]; 
maskLayer.path = p; 
_myview.layer.mask = maskLayer; 

Nếu bạn muốn loại bỏ các góc độ từ bất kỳ góc , fiddle với điểm một tám, loại bỏ giá trị "s". Bạn có thể thay đổi kích thước của tam giác cắt ra khỏi các góc với tham số kích thước.

Answer 2

Đây là một cách để thực hiện. Đưa ra:

const CGFloat kRadius = 20.0; //'radius' of the corner clip

và cho khách sạn này theo quan điểm của bạn:

@property (nonatomic,strong) CAShapeLayer *maskLayer;

bạn có thể thiết lập một lớp mặt nạ đơn giản với một đường vát tham gia (đem lại cho bạn những góc 45 độ bạn muốn rất dễ dàng):

CAShapeLayer *maskLayer = [CAShapeLayer layer]; 

maskLayer.lineWidth = kRadius * 2.0; 
maskLayer.lineJoin = kCALineJoinBevel; 
maskLayer.strokeColor = [[UIColor blackColor] CGColor]; 

self.layer.mask = self.maskLayer = maskLayer; 

Sau đó, vào thời điểm thích hợp (ví dụ: -[ViewClass layoutSublayersOfLayer:]) vừa đặt con đường của lớp mặt nạ của bạn vào một con đường hình chữ nhật inset bởi bán kính:

self.maskLayer.path = CGPathCreateWithRect(CGRectInset(self.bounds,kRadius,kRadius), NULL);

Đó là một cách để làm điều này mà không cần phải nghỉ mát để vẽ từng bộ phận của con đường bằng tay. Về cơ bản, bạn đang sử dụng đường bevel tham gia để làm điều đó một chút công việc cho bạn. Hy vọng rằng sẽ giúp.

Answer 3

Lấy cảm hứng từ @nont và sử dụng phần mở rộng, tôi viết đoạn này:

extension UIView { 

    public enum Corner: Int { 
     case TopRight 
     case TopLeft 
     case BottomRight 
     case BottomLeft 
     case All 
    } 

    public func blendCorner(corner corner: Corner, length: CGFloat = 20.0) { 
     let maskLayer = CAShapeLayer() 
     var path: CGPathRef? 
     switch corner { 
     case .All: 
      path = self.makeAnglePathWithRect(self.bounds, topLeftSize: length, topRightSize: length, bottomLeftSize: length, bottomRightSize: length) 
     case .TopRight: 
      path = self.makeAnglePathWithRect(self.bounds, topLeftSize: 0.0, topRightSize: length, bottomLeftSize: 0.0, bottomRightSize: 0.0) 
     case .TopLeft: 
      path = self.makeAnglePathWithRect(self.bounds, topLeftSize: length, topRightSize: 0.0, bottomLeftSize: 0.0, bottomRightSize: 0.0) 
     case .BottomRight: 
      path = self.makeAnglePathWithRect(self.bounds, topLeftSize: 0.0, topRightSize: 0.0, bottomLeftSize: 0.0, bottomRightSize: length) 
     case .BottomLeft: 
      path = self.makeAnglePathWithRect(self.bounds, topLeftSize: 0.0, topRightSize: 0.0, bottomLeftSize: length, bottomRightSize: 0.0) 
     } 
     maskLayer.path = path 
     self.layer.mask = maskLayer 
    } 

    private func makeAnglePathWithRect(rect: CGRect, topLeftSize tl: CGFloat, topRightSize tr: CGFloat, bottomLeftSize bl: CGFloat, bottomRightSize br: CGFloat) -> CGPathRef { 
     var points = [CGPoint]() 

     points.append(CGPointMake(rect.origin.x + tl, rect.origin.y)) 
     points.append(CGPointMake(rect.origin.x + rect.size.width - tr, rect.origin.y)) 
     points.append(CGPointMake(rect.origin.x + rect.size.width, rect.origin.y + tr)) 
     points.append(CGPointMake(rect.origin.x + rect.size.width, rect.origin.y + rect.size.height - br)) 
     points.append(CGPointMake(rect.origin.x + rect.size.width - br, rect.origin.y + rect.size.height)) 
     points.append(CGPointMake(rect.origin.x + bl, rect.origin.y + rect.size.height)) 
     points.append(CGPointMake(rect.origin.x, rect.origin.y + rect.size.height - bl)) 
     points.append(CGPointMake(rect.origin.x, rect.origin.y + tl)) 

     let path = CGPathCreateMutable() 
     CGPathMoveToPoint(path, nil, points.first!.x, points.first!.y) 
     for point in points { 
      if point != points.first { 
       CGPathAddLineToPoint(path, nil, point.x, point.y) 
      } 
     } 
     CGPathAddLineToPoint(path, nil, points.first!.x, points.first!.y) 
     return path 
    } 

} 

Bằng cách này bạn có thể dễ dàng ghép góc của bạn:

let view = UIView() 
view.blendCorner(corner: .TopRight) 
// or view.blendCorner(corner: .All)