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

Question

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

问题是它应该是完美的，底部曲线应该与较大的按钮匹配

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

使用圆角

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

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

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

我也尝试了很多其他的东西但没有得到结果，我想要的只是从第一条路径剪下底部曲线，比如如何从一条路径上剪下另一条路径（阅读苹果文档后我开始知道我可以也使用 path.reverse() )

这是一张照片中的所有按钮，当您单击按钮时说音量 + 它会改变颜色

PS 编辑了原始问题，因为图像令人困惑，我找到了一个解决方案，但仍然想知道是否有更好的解决方案光滑的边缘。

Answer 1

以下方法有效，但如果有人有更好的解决方案，请执行 post。基本上我在这里做的是首先将整个按钮的底部剪裁成凸面，在底部使用 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()
}

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

Clipping the bezier path in curve shape

curve

uikit

ios

uibezierpath

swift