Bezier path duplicate design

Question

I am trying to finalize a bezier path design on my UIView container that I made however I cant seem to get the size of the path correctly to make the figure as big as the sample application attached. This is my bezier path that I have made but the size of it is too small and the fill color(of bezier path ) is not filling to white but rather black.

This is the sample image that I wasnt to replicate to place UIImageView inside as well.

This is my code that I have this far that has done what in my container :

import UIKit

class ProfileViewControllerNew: UIViewController/*, UIScrollViewDelegate, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout*/{

    // Properties
    var topContainer : UIScrollView = UIScrollView()
    var profileImage : UIImageView = UIImageView()
    var settingIcon : UIImageView = UIImageView()
    var shareIcon : UIImageView = UIImageView()
    var sessionScrollView : UIScrollView = UIScrollView()
    var scrollViewContainer : UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        let cV = UICollectionView(frame: .zero, collectionViewLayout: layout)
        return cV
    }()
    var firstname : String!
    var location: UILabel!
    let layer = CAShapeLayer()
//    triangle view 
    var triangleView : UIView = UIView()


    override func viewDidLoad() {
        super.viewDidLoad()
//        setStatusBarBackgroundColor(color : UIColor.init(red: 49/255, green:  207/255, blue: 203/255, alpha: 1))
        self.view.backgroundColor = UIColor.init(red: 49/255, green:  207/255, blue: 203/255, alpha: 1)

        self.navigationController?.navigationBar.isHidden = false
        self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
        self.navigationController?.navigationBar.shadowImage = UIImage()
        self.navigationController?.navigationBar.isTranslucent = true
        self.navigationController?.navigationBar.barStyle = UIBarStyle.default;
        self.view.backgroundColor = UIColor.white

        addContaier()
        trView()
//        scrollViewSetup()
//        titleTextView()
//        imageView()
//        textViews()
//        iconsView()
//        

    }

    func addContaier(){
        // adding container to add image
        self.topContainer.backgroundColor = UIColor(red: 49/255, green:  207/255, blue: 203/255, alpha: 1)
        //        self.topContainer.backgroundColor = UIColor.white
        self.topContainer.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(self.topContainer)

        let myImage : UIImage = UIImage(named : "profile.jpeg")!
        let imageView : UIImageView = UIImageView()
        imageView.image = myImage
        imageView.frame = self.topContainer.bounds
        //imageView.contentMode = UIViewContentMode.scaleAspectFill

        //        self.topContainer.addSubview(imageView)
        self.topContainer.topAnchor.constraint(equalTo: view.topAnchor, constant : 0 ).isActive = true
        self.topContainer.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        //self.topContainer.heightAnchor.constraint(equalTo: view.heightAnchor).isActive = true
        self.topContainer.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.55).isActive = true
        self.topContainer.widthAnchor.constraint(equalTo: view.widthAnchor).isActive =  true



        /*
         layer.path = UIBezierPath(roundedRect: CGRect(x: profileImage.frame.origin.x, y:profileImage.frame.origin.y , width: 30, height: 30), cornerRadius: 30).cgPath
         layer.fillColor = UIColor.red.cgColor

         self.topContainer.layer.addSublayer(layer)
         self.layer.addSublayer(<#T##layer: CALayer##CALayer#>)
         */

    }

    func trView(){


    let bezierPath = UIBezierPath()

        bezierPath.move(to : CGPoint(x:0,y: 462))
        bezierPath.addCurve(to :CGPoint(x:414,y: 226), controlPoint1: CGPoint(x:414.5,y: 230), controlPoint2: CGPoint(x:414.5,y: 226))
        bezierPath.addLine(to: CGPoint(x:414,y: 462))
        bezierPath.addLine(to: CGPoint(x:0,y: 462))
        UIColor.white.setFill()
        bezierPath.fill()
        bezierPath.lineWidth = 1
//        bezierPath.stroke()
//        bezierPath.close()
        //            path.lineCapStyle = kCGLineCapSquare
        let line = CAShapeLayer()
        line.path  = bezierPath.cgPath;

//        line.strokeColor = UIColor.black.cgColor
//        line.fillColor = UIColor.white.cgColor
        self.topContainer.layer.addSublayer(line)

}
}

Is anyone able to help me out replicate the same triangle views to add UIImageViews into them?

Thanks!

Answer 1

Is this what you want? This will draw a line diagonally and connect it to its origin in a way that bottom section is made into a path.

func initialSetup() {
    self.view.backgroundColor = UIColor.cyan
    let path = UIBezierPath()
    path.move(to: CGPoint(x: 0, y: self.view.center.y + 40))
    path.addLine(to: CGPoint(x: self.view.frame.size.width, y: self.view.center.y - 40))
    path.addLine(to: CGPoint(x: self.view.frame.size.width, y: self.view.frame.size.height))
    path.addLine(to: CGPoint(x: 0, y: self.view.frame.size.height))
    path.close()

    self.view.drawPolygon(path: path.cgPath)
}

func drawPolygon(path: CGPath) {
    let shapeLayer = CAShapeLayer()
    shapeLayer.path = path
    shapeLayer.lineWidth = 2.0
    shapeLayer.strokeColor = UIColor.white.cgColor
    shapeLayer.fillColor = UIColor.white.cgColor
    self.layer.addSublayer(shapeLayer)
}