CustomView with squiggle（wavy）top。（Swift）

Posted 2023-01-21

我正在尝试创建自定义视图（顶部是波浪形，并在中间添加图像视图）。这样的事情。

但是我不太习惯bezierPath，所以我很困惑。

这是我到目前为止所做的。

    class DemoView: UIView 

  var path: UIBezierPath!

  override init(frame: CGRect) 
      super.init(frame: frame)

      self.backgroundColor = UIColor.darkGray
    complexShape()
  

  required init?(coder aDecoder: NSCoder) 
      super.init(coder: aDecoder)
    complexShape()
  

    func complexShape() 
        path = UIBezierPath()
        path.move(to: CGPoint(x: 0.0, y: 0.0))
        path.addLine(to: CGPoint(x: self.frame.size.width/2 - 50.0, y: 0.0))
        path.addLine(to: CGPoint(x: self.frame.size.width/2, y: 0.0))
        path.addCurve(to: CGPoint(x: self.frame.size.width, y: 50.0),
                      controlPoint1: CGPoint(x: self.frame.size.width + 50.0, y: 25.0),
                      controlPoint2: CGPoint(x: self.frame.size.width - 150.0, y: 50.0))
        path.addLine(to: CGPoint(x: self.frame.size.width, y: self.frame.size.height))
        path.addLine(to: CGPoint(x: 0.0, y: self.frame.size.height))
        path.close()

        let shapeLayer = CAShapeLayer()
        shapeLayer.path = path.cgPath


        self.layer.mask = shapeLayer
    



extension CGFloat 
    func toRadians() -> CGFloat 
        return self * .pi / 180.0
    

答案

以下方法可让您将背景波效果添加到view。然后，您需要为前景广场做的就是添加另一个视图。播放常量以更改波形形状/高度。

func addWaveBackground()
      let leftDrop:CGFloat = 0.4
      let rightDrop: CGFloat = 0.3
      let leftInflexionX: CGFloat = 0.4
      let leftInflexionY: CGFloat = 0.47
      let rightInflexionX: CGFloat = 0.6
      let rightInflexionY: CGFloat = 0.22

      let backView = UIView(frame: view.frame)
      backView.backgroundColor = .gray
      view.addSubview(backView)
      let backLayer = CAShapeLayer()
      let path = UIBezierPath()
      path.move(to: CGPoint(x: 0, y: 0))
      path.addLine(to: CGPoint(x:0, y: view.frame.height * leftDrop))
      path.addCurve(to: CGPoint(x:view.frame.width, y: view.frame.height * rightDrop),
                    controlPoint1: CGPoint(x: view.frame.width * leftInflexionX, y: view.frame.height * leftInflexionY),
                    controlPoint2: CGPoint(x: view.frame.width * rightInflexionX, y: view.frame.height * rightInflexionY))
      path.addLine(to: CGPoint(x:view.frame.width, y: 0))
      path.close()
      backLayer.fillColor = UIColor.blue.cgColor
      backLayer.path = path.cgPath
      backView.layer.addSublayer(backLayer)