以曲线形状剪切贝塞尔曲线路径

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创建路径，然后只创建Clip 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()
   } 
   

我尝试了许多其他的东西，但没有得到结果，我想要的只是从第一条路径剪切底部曲线，就像如何从另一条路径切割一条路径（阅读苹果文档后我知道我可以使用路径.reverse（）也）

这里是一张照片中的所有按钮，当你点击按钮时说vol +它会改变颜色



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