Curv view at the bottom of the uiimageview - ios

Question

I need to draw a view with UIBezierPath at the bottom of the view just like this image.
I try with this code but oval draw at the half of the image not at bottom of the view like in picture
Here is my output and code
override func draw(_ rect: CGRect) {
super.draw(rect)
let shapeLayer = CAShapeLayer(layer: imgCamera.layer)
shapeLayer.path = self.pathCurvedForView(givenView: imgCamera).cgPath
shapeLayer.frame = imgCamera.bounds
shapeLayer.masksToBounds = true
imgCamera.layer.mask = shapeLayer
}
private func pathCurvedForView(givenView: UIView) ->UIBezierPath
{
let ovalRect = givenView.frame
let ovalPath = UIBezierPath()
ovalPath.addArc(withCenter: CGPoint(x: ovalRect.midX, y: ovalRect.midY), radius: ovalRect.width / 2, startAngle: 0 * CGFloat.pi/180, endAngle: -180 * CGFloat.pi/180, clockwise: true)
ovalPath.addLine(to: CGPoint(x: ovalRect.midX, y: ovalRect.midY))
ovalPath.close()
UIColor.gray.setFill()
ovalPath.fill()
return ovalPath
}

Answer 1

Code Work:
imageView.layer.cornerRadius = imageView.frame.width/2
imageView.layer.borderWidth = 5
imageView.layer.borderColor = UIColor.white.cgColor
let gradientLayer = CAGradientLayer()
gradientLayer.frame = imageView.bounds
gradientLayer.colors = [UIColor.clear.cgColor, UIColor.clear.cgColor, UIColor.clear.cgColor, lightBlack.cgColor , lightBlack.cgColor]
gradientLayer.locations = [NSNumber(value: 0.0), NSNumber(value: 0.5), NSNumber(value: 0.75),NSNumber(value: 0.75), NSNumber(value: 1.0)]
imageView.layer.addSublayer(gradientLayer)
Output :

Answer 2

You can add the cam UIButton directly as subView instead and using the UIImageView maskToBounds to achieve that effect, adding border width and border color to the UIImageView and making the UIImageView touchable is enough
Example Code
import UIKit
class ViewController: UIViewController {
#IBOutlet weak var imageView: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
imageView.isUserInteractionEnabled = true
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
self.imageView.layer.cornerRadius = imageView.frame.size.height/2
self.imageView.layer.borderColor = UIColor.white.cgColor
self.imageView.layer.borderWidth = 2
self.imageView.layer.masksToBounds = true
self.view.backgroundColor = UIColor.gray
let button = UIButton(type: .custom)
button.backgroundColor = UIColor.black.withAlphaComponent(0.3)
button.frame = CGRect(x: 0, y: self.imageView.frame.size.height - self.imageView.frame.size.height * 0.2, width: self.imageView.frame.size.width, height: self.imageView.frame.size.height * 0.2)
button.setImage(UIImage(named: "chatBubbleChat2Filled"), for: .normal)
self.imageView.addSubview(button)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}

Answer 3

startAngle and endAngle are supposed to be values in radians. The angle calculation looks really weird in your case, what were you trying to achieve? To me, the desired output look like it needs an arc from 5/8 PI to 7/8 PI, counter-clockwise. In your case, it goes from 0 to ~-PI, clockwise.
Try
ovalPath.addArc(withCenter: CGPoint(x: ovalRect.midX, y: ovalRect.midY), radius: ovalRect.width / 2, startAngle: CGFloat.pi * 5.0/8.0, endAngle: CGFloat.pi * 7.0/8.0, clockwise: false)
ovalPath.close()
You don't need to add addLine by the way, close() will do that fot you