Corner radius image Swift

问题:

I'm trying to make this corner radius image...it's not exactly the same shape of the image..any easy answer instead of trying random numbers of width and height ? thanks alot

 let rectShape = CAShapeLayer()
 rectShape.bounds = self.mainImg.frame
 rectShape.position = self.mainImg.center
 rectShape.path = UIBezierPath(roundedRect: self.mainImg.bounds, byRoundingCorners: [.bottomLeft , .bottomRight ], cornerRadii: CGSize(width: 50, height: 4)).cgPath

回答1:

You can use QuadCurve to get the design you want.

Here is a Swift @IBDesignable class that lets you specify the image and the "height" of the rounding in Storyboard / Interface Builder:

@IBDesignable

class RoundedBottomImageView: UIView {

    var imageView: UIImageView!

    @IBInspectable var image: UIImage? {
        didSet { self.imageView.image = image }
    }

    @IBInspectable var roundingValue: CGFloat = 0.0 {
        didSet {
            self.setNeedsLayout()
        }
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        doMyInit()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        doMyInit()
    }

    func doMyInit() {

        imageView = UIImageView()
        imageView.backgroundColor = UIColor.red
        imageView.contentMode = UIViewContentMode.scaleAspectFill
        addSubview(imageView)

    }

    override func layoutSubviews() {
        super.layoutSubviews()
        imageView.frame = self.bounds

        let rect = self.bounds
        let y:CGFloat = rect.size.height - roundingValue
        let curveTo:CGFloat = rect.size.height

        let myBezier = UIBezierPath()
        myBezier.move(to: CGPoint(x: 0, y: y))
        myBezier.addQuadCurve(to: CGPoint(x: rect.width, y: y), controlPoint: CGPoint(x: rect.width / 2, y: curveTo))
        myBezier.addLine(to: CGPoint(x: rect.width, y: 0))
        myBezier.addLine(to: CGPoint(x: 0, y: 0))
        myBezier.close()

        let maskForPath = CAShapeLayer()
        maskForPath.path = myBezier.cgPath
        layer.mask = maskForPath

    }

}

Result with 300 x 200 image view, rounding set to 40:

回答2:

You can try with UIView extension. as

extension UIView {
    func setBottomCurve(){
        let offset = CGFloat(self.frame.size.height + self.frame.size.height/1.8)
        let bounds = self.bounds
        let rectBounds = CGRect(x: bounds.origin.x,
                                y: bounds.origin.y ,
                                width:  bounds.size.width,
                                height: bounds.size.height / 2)
        let rectPath = UIBezierPath(rect: rectBounds)


        let ovalBounds = CGRect(x: bounds.origin.x - offset / 2,
                                y: bounds.origin.y ,
                                width: bounds.size.width + offset,
                                height: bounds.size.height)

        let ovalPath = UIBezierPath(ovalIn: ovalBounds)
        rectPath.append(ovalPath)

        let maskLayer = CAShapeLayer()
        maskLayer.frame = bounds
        maskLayer.path = rectPath.cgPath
        self.layer.mask = maskLayer
    }
}

& use it in viewWillAppear like methods where you can get actual frame of UIImageView.

Usage:

 override func viewWillAppear(_ animated: Bool) {
    //use it in viewWillAppear like methods where you can get actual frame of UIImageView
      myImageView.setBottomCurve()
 }