создание кривой поверх пользовательского интерфейса

#swift #uiview #uibezierpath

#swift #пользовательский интерфейс #uibezierpath

Вопрос:

мне нужно создать кривую сверху и снизу пользовательского интерфейса, я использовал следующее для нижней части :

  func pathCurvedForView(givenView: UIView, curvedPercent:CGFloat) ->UIBezierPath
        {
            let arrowPath = UIBezierPath()
            arrowPath.move(to: CGPoint(x:0, y:0))
            arrowPath.addLine(to: CGPoint(x:givenView.bounds.size.width, y:0))
            arrowPath.addLine(to: CGPoint(x:givenView.bounds.size.width, y:givenView.bounds.size.height))
            arrowPath.addQuadCurve(to: CGPoint(x:0, y:givenView.bounds.size.height), controlPoint: CGPoint(x:givenView.bounds.size.width/2, y:givenView.bounds.size.height-givenView.bounds.size.height*curvedPercent))
            arrowPath.addLine(to: CGPoint(x:0, y:0))
            arrowPath.close()
            
            return arrowPath
        }

    func applyCurvedPath(givenView: UIView,curvedPercent:CGFloat) {
        guard curvedPercent <= 1 amp;amp; curvedPercent >= 0 else{
            return
        }
        
        let shapeLayer = CAShapeLayer(layer: givenView.layer)
        shapeLayer.path = self.pathCurvedForView(givenView: givenView,curvedPercent: curvedPercent).cgPath
        shapeLayer.frame = givenView.bounds
        shapeLayer.masksToBounds = true
        givenView.layer.mask = shapeLayer
    }
  

он работал нормально, но выполнял только работу для нижней части представления, есть идеи, как реализовать его для вида сверху?
Спасибо
введите описание изображения здесь

Комментарии:

1. Заменить arrowPath.addLine(to: CGPoint(x:givenView.bounds.size.width, y:0)) на arrowPath.addQuadCurve(to: CGPoint(x:givenView.bounds.size.width, y:0), controlPoint: CGPoint(x:givenView.bounds.size.width/2, y:givenView.bounds.size.height*curvedPercent))

Ответ №1:

Давайте объясним эффект :

 A             B
   --------  
 |          |
 |          |
   --------  
D            C
  

Мы хотим:

  • Начните с (0,0): move(to:)
  • Кривая до B (ширина, 0): addQuadCurve(to:controlPoint:)
  • Прямо в C (ширина, высота): addLine(to:)
  • Кривая до D (0, высота): addQuadCurve(to:controlPoint:)
  • Прямо в (0,0): addLine(to:)
  • Закрыть.

Поэтому замените

 arrowPath.addLine(to: CGPoint(x:givenView.bounds.size.width, y:0))
  

с помощью

 arrowPath.addQuadCurve(to: CGPoint(x: givenView.bounds.size.width, y: 0), 
                       controlPoint: CGPoint(x: givenView.bounds.size.width/2, 
                                             y: givenView.bounds.size.height*curvedPercent))