CODEWITHSUNDEEP
iosswiftcgpath
Krutika Sonawala
Krutika Sonawala

Reputation: 1155

Add curve on arc swift

I want to generate a curve in the middle of a line programatically, however the edge of the curve is not rounded using my current solution.

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
}

This is the Arc I have created but I want the curves to be rounded: This is the Arc I have created but I want the curves to be rounded

But I want it to be like this: But I want it to be like this

Upvotes: 1

Views: 1916

Answers (2)

Ice
Ice

Reputation: 757

This is the code that you need

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, y: (r/2.0)), 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
}

Result: enter image description here

You can customize the size of the button...

For a great explanation of how it is work, I recommend you to read this explanation, and you can draw any shape which do you want: https://ayusinghi96.medium.com/draw-custom-shapes-and-views-with-uiberzierpath-ios-1737f5cb975

Upvotes: 3

king wang
king wang

Reputation: 568

You can just draw more arc like you already does. Or may be you can use path.addCurve, if you dont want oval

    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), endAngle: 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, y: radius), radius: radius, startAngle: CGFloat(180.0 * Double.pi/180.0), 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
    }

Upvotes: 1

Related Questions