简体   繁体   English

如何在 UIImageView 中实现底部自定义曲线和顶部角半径?

[英]How to Achieve bottom custom Curve and top Corner Radius in UIImageView?

I am working on Profile Design.我正在研究轮廓设计。 I want to achieve custom curve on bottom side of image and apply corner radios to Top side.我想在图像的底部实现自定义曲线并将角无线电应用到顶部。 I have tried it with RoundCorners method of UIBeziarPath.我已经用 UIBeziarPath 的 RoundCorners 方法试过了。 but i didn't got proper result.但我没有得到正确的结果。

Here is my try :-这是我的尝试:-

1) I am using this method to achieve my result. 1)我正在使用这种方法来实现我的结果。

//MARK : - Extension set UIImageView Corner Radius
extension UIImageView {

    func roundCorners(_ corners: UIRectCorner, radius: CGFloat) {

        let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        let mask = CAShapeLayer()
        mask.path = path.cgPath
        self.layer.mask = mask

    }
}

2) In viewDidLoad Method. 2) 在 vi​​ewDidLoad 方法中。

  override func viewDidLoad() {
        super.viewDidLoad()

        self.imgView.roundCorners([.bottomLeft, .bottomRight], radius: 36)
        self.imgView.layer.cornerRadius = 10
}

3) Here is my Result :- 3)这是我的结果:-

在此处输入图片说明

But, I want to achieve this result.但是,我想达到这个结果。 Like, bottom Curve喜欢,底部曲线

在此处输入图片说明

You can add mask with any shape to imageView您可以将任何形状的蒙版添加到 imageView

Example:例子:

-(void) viewDidAppear:(BOOL)animated {
self.view.backgroundColor = [UIColor lightGrayColor];
UIImageView* yourView = [[UIImageView alloc] initWithFrame:CGRectMake(200, 200, 200, 200)];
yourView.center = self.view.center;
yourView.image = [UIImage imageNamed:@"testImg"];

yourView.clipsToBounds = YES;
[self.view addSubview: yourView];

CGFloat roundedHeight = yourView.frame.size.height * 0.2;

CGFloat bottomOvalHeight = roundedHeight * 2;

//First part of mask - oval in the bottom
UIBezierPath *ovalPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,
                                                                           yourView.frame.size.height - bottomOvalHeight, yourView.frame.size.width,
                                                                           bottomOvalHeight)];

//Second part of mask - rectangle from top to the middle of the oval
UIBezierPath *rectPath = [UIBezierPath bezierPathWithRect:CGRectMake(0,
                                                                     0,
                                                                     yourView.frame.size.width,
                                                                     yourView.frame.size.height - roundedHeight)];
//Make one mask from two parts
[rectPath appendPath:ovalPath];

CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.path = rectPath.CGPath;
yourView.layer.mask  = maskLayer;
}

Result:结果:

在此处输入图片说明

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM