Обрезать путь Безье в форме кривой

Question

Я использую Swift для создания пользовательской кнопки в пользовательском интерфейсе телефона, и мне необходимо закрепить нижнюю часть кнопки выпуклой формой.

Проблема заключалась в том, чтобыть идеальным, а нижняя кривая должна соответствовать большей кнопке

Я пробовал разные подходы, но это не дает идеального результата.

1. Использование закругленных углов

   if buttonDirection == 0 {
       path = UIBezierPath(roundedRect: rect, byRoundingCorners:[UIRectCorner.topLeft, .topRight], cornerRadii: CGSize(width: self.bounds.width/2, height: 0))
       path.close()  
   }
   

2. Создание всей траектории без закругленной кривой с использованием QuardCurve // ​​неподвижная нижняя часть не обратная кривая, а угол также не является гладким, как 1

    if buttonDirection == 0 {
          //path = UIBezierPath(roundedRect: rect, byRoundingCorners:[UIRectCorner.topLeft, .topRight], cornerRadii: CGSize(width: self.bounds.width/2, height: 0))
         //path.close()
           let curve = UIBezierPath()
           curve.move(to: CGPoint(x: 0, y: self.bounds.height))
           curve.addLine(to:CGPoint(x: 0, y: self.bounds.width/3))
           curve.addQuadCurve(to: CGPoint(x: self.bounds.width, y: self.bounds.width/3), controlPoint: CGPoint(x: self.bounds.width/2, y: -5))
           curve.addLine(to: CGPoint(x: self.bounds.width, y: self.bounds.height))
           curve.addQuadCurve(to: CGPoint(x: 0, y: self.bounds.height), controlPoint: CGPoint(x: self.bounds.width/2, y: self.bounds.width - 10))
           UIColor.black.setFill()
           curve.fill()
       }
   

3. Создайте путь из 1, а затем просто обрезайте QuardCurve

   if buttonDirection == 0 {
       path = UIBezierPath(roundedRect: rect, byRoundingCorners:[UIRectCorner.topLeft, .topRight], cornerRadii: CGSize(width: self.bounds.width/2, height: 0))
       path.close()
       path.move(to: CGPoint(x: 0, y: self.bounds.height))
       path.addQuadCurve(to: CGPoint(x: self.bounds.width, y: self.bounds.height), controlPoint: CGPoint(x: self.bounds.width/2, y: self.bounds.height/2))
       path.addClip()
       UIColor.black.setFill()
       path.fill()
   } 
   

Я пробовал и много других вещей, но не получил результата. То, что я хотел, это просто клипнижняя кривая от 1-го пути, например, как отрезать один путь от другого (после прочтения документа apple я узнаю, что я также могу использовать path.reverse ())

здесь все кнопки на одном рисунке и когдаВы нажимаете на кнопку сказать Vol + Its меняет цвет

PS Отредактировал исходный вопрос, так как изображения сбивали с толку, и я нашел одно решение, но все еще хочу знать, есть лилучшее решение с одним путем и гладкими краями.

Answer 1

Метод работает ниже, но если у кого-то есть лучшее решение, пишите.В основном, что я делаю здесь, это сначала обрезаю всю кнопку с выпуклой нижней частью, используя addLines и Quardcurve внизу, а затем создаю новый путь, используя инициализацию bezier roundedRect с верхним правым и верхним левым углом.

if buttonDirection == 0 {
     let curve = UIBezierPath()
     curve.move(to: CGPoint(x: 0, y: self.bounds.height))
     curve.addLine(to: CGPoint(x: 0, y: 0))
     curve.addLine(to: CGPoint(x: self.bounds.width, y: 0))
     curve.addLine(to: CGPoint(x: self.bounds.width, y: self.bounds.height))
     curve.addQuadCurve(to: CGPoint(x: 0, y: self.bounds.height), controlPoint: CGPoint(x: self.bounds.width/2, y: self.bounds.height - self.bounds.height/4))
     curve.close()
     curve.addClip()
     path = UIBezierPath(roundedRect: rect, byRoundingCorners:[UIRectCorner.topLeft, .topRight], cornerRadii: CGSize(width: self.bounds.width/2, height: 0))
     path.close()
}