1

how to draw the curve with blur background?

enter image description here

here I have attached my code but am not getting the exact output

@IBDesignable class CurvedHeaderView: UIView {
@IBInspectable var curveHeight:CGFloat = 50.0
var curvedLayer = CAShapeLayer()
override func draw(_ rect: CGRect) {
    let path = UIBezierPath()
    path.move(to: CGPoint(x: 0, y: 0))
    path.move(to: CGPoint(x: 0, y: rect.height))
    //        path.addLine(to: CGPoint(x: 0, y: 0))
    path.addLine(to: CGPoint(x: rect.width, y: rect.height))
    path.addArc(withCenter: CGPoint(x: CGFloat(rect.width) - curveHeight, y: 100), radius: curveHeight, startAngle: 0, endAngle: 1.5 * CGFloat.pi, clockwise: false)
    //        path.addArc(withCenter: CGPoint(x: CGFloat(rect.width) - curveHeight, y: rect.height), radius: curveHeight, startAngle: 0, endAngle: 1.5 * CGFloat.pi, clockwise: false)
    //        path.addLine(to: CGPoint(x: curveHeight, y: rect.height - curveHeight))
    
    //        path.addLine(to: CGPoint(x: curveHeight, y: 50))
    path.addLine(to: CGPoint(x: curveHeight, y: curveHeight))
    path.addArc(withCenter: CGPoint(x: curveHeight, y: 0), radius: curveHeight, startAngle: 0, endAngle:  CGFloat.pi, clockwise: true)
    
    path.addLine(to: CGPoint(x: 0, y: 0))
    //        path.addArc(withCenter: CGPoint(x: curveHeight, y: rect.height - (curveHeight * 2.0)), radius: curveHeight, startAngle: 0, endAngle:  CGFloat.pi, clockwise: true)
    path.close()
    curvedLayer.path = path.cgPath
    curvedLayer.fillColor = UIColor.white.cgColor
    curvedLayer.frame = rect
    self.layer.insertSublayer(curvedLayer, at: 0)
    self.layer.shadowColor = UIColor.black.cgColor
    self.layer.shadowRadius = 10.0
    self.layer.shadowOpacity = 0.7
}

}

Please share me reference if anything wrong

Thanks in advance

Manikandan S
  • 115
  • 3
  • 18

1 Answers1

0

I have tried but it showing code working but not exactly been getting

  @IBOutlet weak var blurEffectView: UIVisualEffectView!
        override func viewDidLayoutSubviews() {
           let maskView = CurvedHeaderView(frame: blurEffectView.bounds)
            maskView.clipsToBounds = true;
            maskView.backgroundColor = UIColor.clear
            blurEffectView.mask = maskView
        }
Manikandan S
  • 115
  • 3
  • 18