UIView ปัดเศษโดยใช้ CALayers - เฉพาะบางมุม - อย่างไร?

ในแอปพลิเคชันของฉัน - มีสี่ปุ่มชื่อดังนี้:

• บนซ้าย
• ล่างซ้าย
• บน - ขวา
• ล่าง - ขวา

เหนือปุ่มมีมุมมองภาพ (หรือ UIView)

ตอนนี้สมมติว่าผู้ใช้แตะที่ปุ่มบน - ซ้าย รูปภาพ / มุมมองด้านบนควรปัดที่มุมนั้น

ฉันมีปัญหาในการใช้มุมโค้งมนกับ UIView

ตอนนี้ฉันใช้รหัสต่อไปนี้เพื่อใช้มุมโค้งมนกับแต่ละมุมมอง:

    // imgVUserImg is a image view on IB.
    imgVUserImg.image=[UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:@"any Url Here"];
    CALayer *l = [imgVUserImg layer];
    [l setMasksToBounds:YES];
    [l setCornerRadius:5.0];  
    [l setBorderWidth:2.0];
    [l setBorderColor:[[UIColor darkGrayColor] CGColor]];

โค้ดด้านบนใช้ความกลมกับแต่ละมุมของมุมมองที่ให้มา แต่ฉันแค่ต้องการใช้ความกลมกับมุมที่เลือกเช่น - บน / บน + ซ้าย / ล่าง + ขวาเป็นต้น

เป็นไปได้ไหม? อย่างไร?

ฉันใช้คำตอบที่ได้ที่ฉันจะสร้าง UILabel มุมกลมบน iPhone ได้อย่างไร และรหัสจากมุมมองสี่เหลี่ยมผืนผ้าโค้งมนพร้อมความโปร่งใสทำบน iPhone ได้อย่างไร เพื่อสร้างรหัสนี้

จากนั้นฉันก็รู้ว่าฉันตอบคำถามผิด (ให้ UILabel กลมแทน UIImage) ดังนั้นฉันจึงใช้รหัสนี้เพื่อเปลี่ยน:

http://discussions.apple.com/thread.jspa?threadID=1683876

สร้างโปรเจ็กต์ iPhone ด้วยเทมเพลต View ในตัวควบคุมมุมมองให้เพิ่มสิ่งนี้:

- (void)viewDidLoad
{
    CGRect rect = CGRectMake(10, 10, 200, 100);
    MyView *myView = [[MyView alloc] initWithFrame:rect];
    [self.view addSubview:myView];
    [super viewDidLoad];
}

MyViewเป็นเพียงUIImageViewคลาสย่อย:

@interface MyView : UIImageView
{
}

ฉันไม่เคยใช้บริบทกราฟิกมาก่อน แต่ฉันสามารถรวบรวมโค้ดนี้ได้ ไม่มีรหัสสำหรับสองมุม หากคุณอ่านโค้ดคุณจะเห็นว่าฉันใช้งานสิ่งนี้อย่างไร (โดยการลบการCGContextAddArcโทรบางส่วนและลบค่ารัศมีบางส่วนในโค้ดโค้ดสำหรับทุกมุมอยู่ที่นั่นดังนั้นใช้เป็นจุดเริ่มต้นและลบ ส่วนที่สร้างมุมที่คุณไม่ต้องการโปรดทราบว่าคุณสามารถสร้างรูปสี่เหลี่ยมผืนผ้าที่มีมุมมน 2 หรือ 3 มุมได้เช่นกันหากคุณต้องการ

รหัสไม่สมบูรณ์ แต่ฉันแน่ใจว่าคุณสามารถจัดระเบียบได้เล็กน้อย

static void addRoundedRectToPath(CGContextRef context, CGRect rect, float radius, int roundedCornerPosition)
{

    // all corners rounded
    //  CGContextMoveToPoint(context, rect.origin.x, rect.origin.y + radius);
    //  CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y + rect.size.height - radius);
    //  CGContextAddArc(context, rect.origin.x + radius, rect.origin.y + rect.size.height - radius, 
    //                  radius, M_PI / 4, M_PI / 2, 1);
    //  CGContextAddLineToPoint(context, rect.origin.x + rect.size.width - radius, 
    //                          rect.origin.y + rect.size.height);
    //  CGContextAddArc(context, rect.origin.x + rect.size.width - radius, 
    //                  rect.origin.y + rect.size.height - radius, radius, M_PI / 2, 0.0f, 1);
    //  CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y + radius);
    //  CGContextAddArc(context, rect.origin.x + rect.size.width - radius, rect.origin.y + radius, 
    //                  radius, 0.0f, -M_PI / 2, 1);
    //  CGContextAddLineToPoint(context, rect.origin.x + radius, rect.origin.y);
    //  CGContextAddArc(context, rect.origin.x + radius, rect.origin.y + radius, radius, 
    //                  -M_PI / 2, M_PI, 1);

    // top left
    if (roundedCornerPosition == 1) {
        CGContextMoveToPoint(context, rect.origin.x, rect.origin.y + radius);
        CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y + rect.size.height - radius);
        CGContextAddArc(context, rect.origin.x + radius, rect.origin.y + rect.size.height - radius, 
                        radius, M_PI / 4, M_PI / 2, 1);
        CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, 
                                rect.origin.y + rect.size.height);
        CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y);
        CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y);
    }   

    // bottom left
    if (roundedCornerPosition == 2) {
        CGContextMoveToPoint(context, rect.origin.x, rect.origin.y);
        CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y + rect.size.height);
        CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, 
                                rect.origin.y + rect.size.height);
        CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y);
        CGContextAddLineToPoint(context, rect.origin.x + radius, rect.origin.y);
        CGContextAddArc(context, rect.origin.x + radius, rect.origin.y + radius, radius, 
                        -M_PI / 2, M_PI, 1);
    }

    // add the other corners here


    CGContextClosePath(context);
    CGContextRestoreGState(context);
}


-(UIImage *)setImage
{
    UIImage *img = [UIImage imageNamed:@"my_image.png"];
    int w = img.size.width;
    int h = img.size.height;

    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef context = CGBitmapContextCreate(NULL, w, h, 8, 4 * w, colorSpace, kCGImageAlphaPremultipliedFirst);

    CGContextBeginPath(context);
    CGRect rect = CGRectMake(0, 0, w, h);


    addRoundedRectToPath(context, rect, 50, 1);
    CGContextClosePath(context);
    CGContextClip(context);

    CGContextDrawImage(context, rect, img.CGImage);

    CGImageRef imageMasked = CGBitmapContextCreateImage(context);
    CGContextRelease(context);
    CGColorSpaceRelease(colorSpace);
    [img release];

    return [UIImage imageWithCGImage:imageMasked];
}

ข้อความแสดงแทน http://nevan.net/skitch/skitched-20100224-092237.png

อย่าลืมว่าคุณจะต้องได้รับเฟรมเวิร์ก QuartzCore เพื่อให้ใช้งานได้

เริ่มต้นใน iOS 3.2 คุณสามารถใช้ฟังก์ชันของUIBezierPaths เพื่อสร้างสี่เหลี่ยมผืนผ้าโค้งมนนอกกรอบ (โดยเฉพาะมุมที่คุณระบุเท่านั้นที่จะถูกปัดเศษ) จากนั้นคุณสามารถใช้สิ่งนี้เป็นเส้นทางของ a CAShapeLayerและใช้สิ่งนี้เป็นหน้ากากสำหรับเลเยอร์มุมมองของคุณ:

// Create the path (with only the top-left corner rounded)
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:imageView.bounds 
                                               byRoundingCorners:UIRectCornerTopLeft
                                                     cornerRadii:CGSizeMake(10.0, 10.0)];

// Create the shape layer and set its path
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = imageView.bounds;
maskLayer.path = maskPath.CGPath;

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

และนั่นแหล่ะ - ไม่ต้องวุ่นวายกับการกำหนดรูปร่างใน Core Graphics ด้วยตนเองไม่ต้องสร้างภาพมาสก์ใน Photoshop เลเยอร์ไม่จำเป็นต้องยกเลิกการใช้งาน การใช้มุมโค้งมนหรือเปลี่ยนเป็นมุมใหม่ทำได้ง่ายๆเพียงแค่กำหนดมุมใหม่UIBezierPathและใช้CGPathเป็นเส้นทางของเลเยอร์มาสก์ cornersพารามิเตอร์ของbezierPathWithRoundedRect:byRoundingCorners:cornerRadii:วิธีการเป็น bitmask และมุมหลายเพื่อให้สามารถโค้งมนโดย ORing พวกเขาร่วมกัน

แก้ไข: การเพิ่มเงา

หากคุณต้องการเพิ่มเงาให้กับสิ่งนี้จำเป็นต้องมีงานเพิ่มอีกเล็กน้อย

เนื่องจาก " imageView.layer.mask = maskLayer" ใช้หน้ากากจึงมักจะไม่ปรากฏเงาภายนอก เคล็ดลับคือการใช้มุมมองที่โปร่งใสและจากนั้นเพิ่มสอง sublayers ( CALayers) ที่ชั้นมุมมองของ: และshadowLayer roundedLayerทั้งสองต้องใช้ประโยชน์จากไฟล์UIBezierPath. roundedLayerภาพจะถูกเพิ่มเป็นเนื้อหาของ

// Create a transparent view
UIView *theView = [[UIView alloc] initWithFrame:theFrame];
[theView setBackgroundColor:[UIColor clearColor]];

// Create the path (with only the top-left corner rounded)
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:theView.bounds 
                                               byRoundingCorners:UIRectCornerTopLeft
                                                     cornerRadii:CGSizeMake(10.0f, 10.0f)];

// Create the shadow layer
CAShapeLayer *shadowLayer = [CAShapeLayer layer];
[shadowLayer setFrame:theView.bounds];
[shadowLayer setMasksToBounds:NO];
[shadowLayer setShadowPath:maskPath.CGPath];
// ...
// Set the shadowColor, shadowOffset, shadowOpacity & shadowRadius as required
// ...

// Create the rounded layer, and mask it using the rounded mask layer
CALayer *roundedLayer = [CALayer layer];
[roundedLayer setFrame:theView.bounds];
[roundedLayer setContents:(id)theImage.CGImage];

CAShapeLayer *maskLayer = [CAShapeLayer layer];
[maskLayer setFrame:theView.bounds];
[maskLayer setPath:maskPath.CGPath];

roundedLayer.mask = maskLayer;

// Add these two layers as sublayers to the view
[theView.layer addSublayer:shadowLayer];
[theView.layer addSublayer:roundedLayer];

ฉันใช้รหัสนี้ในหลาย ๆ ที่ในรหัสของฉันและทำงานได้อย่างถูกต้อง 100% คุณสามารถเปลี่ยน corder ใดก็ได้โดยเปลี่ยนคุณสมบัติ "byRoundingCorners: UIRectCornerBottomLeft"

UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:view.bounds byRoundingCorners:UIRectCornerBottomLeft cornerRadii:CGSizeMake(10.0, 10.0)];

                CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
                maskLayer.frame = view.bounds;
                maskLayer.path = maskPath.CGPath;
                view.layer.mask = maskLayer;
                [maskLayer release];

ใน iOS 11 ตอนนี้เราสามารถปัดเศษบางมุมเท่านั้น

let view = UIView()

view.clipsToBounds = true
view.layer.cornerRadius = 8
view.layer.maskedCorners = [.layerMaxXMaxYCorner, .layerMinXMaxYCorner]

ส่วนขยาย CALayer พร้อมไวยากรณ์Swift 3+

extension CALayer {

    func round(roundedRect rect: CGRect, byRoundingCorners corners: UIRectCorner, cornerRadii: CGSize) -> Void {
        let bp = UIBezierPath(roundedRect: rect, byRoundingCorners: corners, cornerRadii: cornerRadii)
        let sl = CAShapeLayer()
        sl.frame = self.bounds
        sl.path = bp.cgPath
        self.mask = sl
    }
}

สามารถใช้งานได้เช่น:

let layer: CALayer = yourView.layer
layer.round(roundedRect: yourView.bounds, byRoundingCorners: [.bottomLeft, .topLeft], cornerRadii: CGSize(width: 5, height: 5))

ตัวอย่าง Stuarts สำหรับการปัดเศษของมุมเฉพาะใช้งานได้ดี หากคุณต้องการปัดเศษหลาย ๆ มุมเช่นซ้ายบนและขวานี่คือวิธีการทำ

// Create the path (with only the top-left corner rounded)
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:imageview
                                               byRoundingCorners:UIRectCornerTopLeft|UIRectCornerTopRight
                                                     cornerRadii:CGSizeMake(10.0, 10.0)];

// Create the shape layer and set its path
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = imageview.bounds;
maskLayer.path = maskPath.CGPath;

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

ขอบคุณสำหรับการแบ่งปัน. ที่นี่ฉันต้องการแบ่งปันวิธีแก้ปัญหาบน swift 2.0 สำหรับการอ้างอิงเพิ่มเติมเกี่ยวกับปัญหานี้ (เพื่อให้สอดคล้องกับโปรโตคอลของ UIRectCorner)

let mp = UIBezierPath(roundedRect: cell.bounds, byRoundingCorners: [.bottomLeft, .TopLeft], cornerRadii: CGSize(width: 10, height: 10))
let ml = CAShapeLayer()
ml.frame = self.bounds
ml.path = mp.CGPath
self.layer.mask = ml

มีคำตอบที่ง่ายและเร็วกว่าซึ่งอาจได้ผลขึ้นอยู่กับความต้องการของคุณและยังใช้ได้กับเงา คุณสามารถตั้งค่า maskToBounds บน superlayer ให้เป็นจริงและหักล้างเลเยอร์ย่อยเพื่อให้มุมทั้ง 2 อยู่นอกขอบเขตของ superlayer ได้อย่างมีประสิทธิภาพตัดมุมโค้งมนทั้ง 2 ด้านออกไป

แน่นอนว่าจะใช้งานได้ก็ต่อเมื่อคุณต้องการให้มีมุมโค้งมนเพียง 2 มุมในด้านเดียวกันและเนื้อหาของเลเยอร์จะเหมือนกันเมื่อคุณตัดพิกเซลไม่กี่พิกเซลออกจากด้านหนึ่ง ใช้งานได้ดีเมื่อมีแผนภูมิแท่งปัดเฉพาะด้านบน

ดูคำถามที่เกี่ยวข้องนี้ คุณจะต้องวาดรูปสี่เหลี่ยมของคุณเองไปCGPathกับบางมุมโค้งมนเพิ่มCGPathที่คุณCGContextแล้วคลิปไปใช้CGContextClipแล้วคลิปไปใช้

คุณยังสามารถวาดสี่เหลี่ยมโค้งมนที่มีค่าอัลฟาให้กับรูปภาพจากนั้นใช้รูปภาพนั้นเพื่อสร้างเลเยอร์ใหม่ที่คุณตั้งเป็นmaskคุณสมบัติของเลเยอร์ของคุณ( ดูเอกสารของ Apple )

ช้าไปครึ่งทศวรรษ แต่ฉันคิดว่าวิธีการปัจจุบันของผู้คนไม่ถูกต้อง 100% หลายคนเคยมีปัญหาว่าการใช้เมธอด UIBezierPath + CAShapeLayer ขัดขวางการจัดวางอัตโนมัติโดยเฉพาะอย่างยิ่งเมื่อตั้งค่าบนกระดานเรื่องราว ไม่มีคำตอบมากกว่านี้ดังนั้นฉันจึงตัดสินใจเพิ่มคำตอบของตัวเอง

มีวิธีที่ง่ายมากในการหลีกเลี่ยงสิ่งนั้น: วาดมุมมนในไฟล์ drawRect(rect: CGRect)ฟังก์ชัน

ตัวอย่างเช่นถ้าฉันต้องการมุมโค้งมนด้านบนสำหรับ UIView ฉันจะใช้คลาส UIView ย่อยแล้วใช้คลาสย่อยนั้นตามความเหมาะสม

import UIKit

class TopRoundedView: UIView {

    override func drawRect(rect: CGRect) {
        super.drawRect(rect)

        var maskPath = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: UIRectCorner.TopLeft | UIRectCorner.TopRight, cornerRadii: CGSizeMake(5.0, 5.0))

        var maskLayer = CAShapeLayer()
        maskLayer.frame = self.bounds
        maskLayer.path = maskPath.CGPath

        self.layer.mask = maskLayer
    }
}

นี่เป็นวิธีที่ดีที่สุดในการพิชิตปัญหาและไม่ต้องใช้เวลาเลยในการปรับตัว

การปัดเศษเฉพาะบางมุมจะไม่ดีกับการปรับขนาดอัตโนมัติหรือรูปแบบอัตโนมัติ

ดังนั้นอีกทางเลือกหนึ่งคือใช้ปกติcornerRadiusและซ่อนมุมที่คุณไม่ต้องการภายใต้มุมมองอื่นหรือนอกขอบเขต superview เพื่อให้แน่ใจว่าได้ตั้งค่าเป็นคลิปเนื้อหาแล้ว

เพื่อเพิ่มคำตอบและการเพิ่มเติมฉันได้สร้างคำตอบง่ายๆที่ใช้ซ้ำได้UIViewใน Swift ขึ้นอยู่กับกรณีการใช้งานของคุณคุณอาจต้องการทำการปรับเปลี่ยน (หลีกเลี่ยงการสร้างวัตถุในทุกเลย์เอาต์ ฯลฯ ) แต่ฉันต้องการให้มันง่ายที่สุด ส่วนขยายช่วยให้คุณใช้สิ่งนี้กับมุมมองอื่น ๆ (เช่นUIImageView) ได้ง่ายขึ้นหากคุณไม่ชอบคลาสย่อย

extension UIView {

    func roundCorners(_ roundedCorners: UIRectCorner, toRadius radius: CGFloat) {
        roundCorners(roundedCorners, toRadii: CGSize(width: radius, height: radius))
    }

    func roundCorners(_ roundedCorners: UIRectCorner, toRadii cornerRadii: CGSize) {
        let maskBezierPath = UIBezierPath(
            roundedRect: bounds,
            byRoundingCorners: roundedCorners,
            cornerRadii: cornerRadii)
        let maskShapeLayer = CAShapeLayer()
        maskShapeLayer.frame = bounds
        maskShapeLayer.path = maskBezierPath.cgPath
        layer.mask = maskShapeLayer
    }
}

class RoundedCornerView: UIView {

    var roundedCorners: UIRectCorner = UIRectCorner.allCorners
    var roundedCornerRadii: CGSize = CGSize(width: 10.0, height: 10.0)

    override func layoutSubviews() {
        super.layoutSubviews()
        roundCorners(roundedCorners, toRadii: roundedCornerRadii)
    }
}

นี่คือวิธีที่คุณจะนำไปใช้กับUIViewController:

class MyViewController: UIViewController {

    private var _view: RoundedCornerView {
        return view as! RoundedCornerView
    }

    override func loadView() {
        view = RoundedCornerView()
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        _view.roundedCorners = [.topLeft, .topRight]
        _view.roundedCornerRadii = CGSize(width: 10.0, height: 10.0)
    }
}

เมื่อสรุปคำตอบของ Stuart คุณสามารถมีวิธีการปัดเศษของมุมดังต่อไปนี้:

@implementation UIView (RoundCorners)

- (void)applyRoundCorners:(UIRectCorner)corners radius:(CGFloat)radius {
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:corners cornerRadii:CGSizeMake(radius, radius)];

    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.frame = self.bounds;
    maskLayer.path = maskPath.CGPath;

    self.layer.mask = maskLayer;
}

@end

ดังนั้นในการใช้มุมปัดคุณเพียงแค่ทำ:

[self.imageView applyRoundCorners:UIRectCornerTopRight|UIRectCornerTopLeft radius:10];

ฉันขอแนะนำให้กำหนดมาสก์ของเลเยอร์ หน้ากากควรเป็นCAShapeLayerวัตถุที่มีเส้นทางเฉพาะ คุณสามารถใช้ส่วนขยาย UIView ถัดไป (Swift 4.2):

extension UIView {
    func round(corners: UIRectCorner, with radius: CGFloat) {
        let maskLayer = CAShapeLayer()
        maskLayer.frame = bounds
        maskLayer.path = UIBezierPath(
            roundedRect: bounds,
            byRoundingCorners: corners,
            cornerRadii: CGSize(width: radius, height: radius)
        ).cgPath
        layer.mask = maskLayer
   }
}