Bézier path duplicate design

Question

Ich versuche ein Bézier-Pfaddesign auf meinem UIView-Container zu finalisieren, den ich gemacht habe, aber ich kann die Größe des Pfades nicht richtig berechnen, um die Figur so groß wie die angefügte Beispielanwendung zu machen. Dies ist mein Bezier-Pfad, den ich gemacht habe, aber die Größe ist zu klein und die Füllfarbe (des Bezier-Pfades) füllt sich nicht zu Weiß, sondern eher zu Schwarz.

Dies ist das Musterbild, das ich war nicht UIImageView zu platzieren sowohl innerhalb als auch zu replizieren.

Dies ist mein Code, dass ich so weit haben, dass, was in meinem Behälter getan hat:

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) 

} 
} 

mich in der Lage zu helfen, replizieren die gleichen Dreieck Ansichten Ist jemand in sie fügen UIImageViews ?

Danke!

Answer 1

Wollen Sie das? Dadurch wird eine Linie diagonal gezeichnet und mit ihrem Ursprung so verbunden, dass der untere Abschnitt zu einem Pfad wird.

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) 
}