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

Question

我使用 Swift 在手机 UI 中创建自定义按钮，需要将按钮的底部剪成凸状。

问题是它应该是完美的并且底部曲线应该匹配更大的按钮

我尝试了不同的方法，但没有得到完美的结果。

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