问题描述
我想以编程方式在一条线的中间生成一条曲线,但是使用我当前的解决方案不会使曲线的边缘变圆。
func createPath() -> CGPath {
let height: CGFloat = 86.0
let path = UIBezierPath()
let centerWidth = self.frame.width / 2
path.move(to: CGPoint(x: 0,y: 0))
path.addLine(to: CGPoint(x: (centerWidth - (height/2)),y: 0))
path.addArc(withCenter: CGPoint(x: centerWidth,y: 0),radius: 80 / 2,startAngle: 180 * CGFloat(PI)/180,endAngle: 0 * CGFloat(PI)/180,clockwise: false)
path.addLine(to: CGPoint(x: self.frame.width,y: 0))
path.addLine(to: CGPoint(x: self.frame.width,y: self.frame.height))
path.addLine(to: CGPoint(x: 0,y: self.frame.height))
path.lineCapStyle = .round
path.stroke()
path.close()
self.path = path
return path.cgPath
}
这是我创建的弧,但我希望曲线是圆角的:
但我希望它是这样的:
解决方法
这是您需要的代码
func createPath() -> CGPath {
let padding: CGFloat = 5.0
let centerButtonHeight: CGFloat = 53.0
let f = CGFloat(centerButtonHeight / 2.0) + padding
let h = frame.height
let w = frame.width
let halfW = frame.width/2.0
let r = CGFloat(18)
let path = UIBezierPath()
path.move(to: .zero)
path.addLine(to: CGPoint(x: halfW-f-(r/2.0),y: 0))
path.addQuadCurve(to: CGPoint(x: halfW-f,y: (r/2.0)),controlPoint: CGPoint(x: halfW-f,y: 0))
path.addArc(withCenter: CGPoint(x: halfW,radius: f,startAngle: .pi,endAngle: 0,clockwise: false)
path.addQuadCurve(to: CGPoint(x: halfW+f+(r/2.0),y: 0),controlPoint: CGPoint(x: halfW+f,y: 0))
path.addLine(to: CGPoint(x: w,y: 0))
path.addLine(to: CGPoint(x: w,y: h))
path.addLine(to: CGPoint(x: 0.0,y: h))
path.close()
return path.cgPath
}
您可以自定义按钮的大小...
关于它是如何工作的一个很好的解释,我建议你阅读这个解释,你可以画出你想要的任何形状:https://ayusinghi96.medium.com/draw-custom-shapes-and-views-with-uiberzierpath-ios-1737f5cb975
,您可以像以前一样绘制更多弧线。或者你可以使用path.addCurve,如果你不想要椭圆形
func createPath() -> CGPath {
let bigRadius: CGFloat = 40.0
let path = UIBezierPath()
let centerWidth = self.frame.width / 2
path.move(to: CGPoint(x: 0,y: 0))
let radius: CGFloat = 4 //change it if you want
let leftArcOriginX = centerWidth - bigRadius - radius
let leftArcOriginY: CGFloat = 0
path.addLine(to: CGPoint(x: leftArcOriginX,y: leftArcOriginY))
// add left little arc,change angle if you want,if you dont want oval,may be you can use path.addCurve(to:,controlPoint1:,controlPoint2: )
path.addArc(withCenter: CGPoint(x: leftArcOriginX,y: leftArcOriginY + radius),radius: radius,startAngle: CGFloat(270.0 * Double.pi/180.0),clockwise: true)
// add big arc
path.addArc(withCenter: CGPoint(x: centerWidth,y: radius),radius: bigRadius,startAngle: CGFloat(180.0 * Double.pi/180.0),endAngle: CGFloat(0 * Double.pi/180.0),clockwise: false)
// add right litte arc
path.addArc(withCenter: CGPoint(x: centerWidth + bigRadius + radius,endAngle: CGFloat(270.0 * Double.pi/180.0),clockwise: true)
path.addLine(to: CGPoint(x: self.frame.width,y: 0))
path.addLine(to: CGPoint(x: self.frame.width,y: self.frame.height))
path.addLine(to: CGPoint(x: 0,y: self.frame.height))
path.lineCapStyle = .round
path.stroke()
path.close()
return path.cgPath
}