UIBezierPath, how to draw "QuadCurve"

Question

I am try draw shape using UIBezierPath, but I am not completely understand how need to use "addQuadCurve", I am draw first Curve left from the center cirle hole but can't understand how to draw right edge.

What I am doing wrong?

Result What need: My result:

Code of shape:

class CustomShapeOfBottomOne: UIView {

    // init the view with a rectangular frame
    override init(frame: CGRect)
    {
      super.init(frame: frame)
      backgroundColor = UIColor.clear
    }
    // init the view by deserialisation
    required init?(coder aDecoder: NSCoder)
    {
      super.init(coder: aDecoder)
      backgroundColor = UIColor.clear
    }

    override func draw(_ rect: CGRect)
    {
        
        let fillColor = UIColor(red: 0.118, green: 0.118, blue: 0.149, alpha: 1.000)
        
        let path = UIBezierPath()
        let viewWidth = frame.width
        let viewHeight = frame.height - 20
        
        path.move(to: CGPoint(x: (viewWidth - viewWidth) + 10, y: 0))
        
        path.addLine(to: CGPoint(x: (viewWidth / 2) - 35 - 10, y: 0))
        
        // center left edge
        
        path.addQuadCurve(to: CGPoint(x: (viewWidth / 2 ) - 35, y: (11/2.0)), controlPoint: CGPoint(x: (viewWidth / 2 ) - 35, y: 0))
        // end left edge
        
        path.addArc(withCenter: CGPoint(x: viewWidth / 2, y: 0), radius: 35, startAngle: CGFloat(Double.pi), endAngle: CGFloat(Double.pi * Double.pi), clockwise: false)
        
        // How to draw this curve?
        
        // center right edge
//        path.addQuadCurve(to: CGPoint(x: (viewWidth / 2 ) + 35 + 10 , y: 0), controlPoint: CGPoint(x: (viewWidth / 2 ) + 35 - 10, y: 10))
        
        
        // end right edge
        
        path.addLine(to: CGPoint(x: viewWidth - 10, y: 0))
                
        path.addArc(withCenter: CGPoint(x: viewWidth - 10, y: (viewHeight - viewHeight) + 10),
                    radius: 10,
                    startAngle: CGFloat(Double.pi / 2), // 90 degree
                    endAngle: CGFloat(0), // 0 degree
                clockwise: true)
        
        path.addLine(to: CGPoint(x: viewWidth, y: (viewHeight - viewHeight) + viewHeight + 10))
        
        path.addArc(withCenter: CGPoint(x:  viewWidth - 10, y: (viewHeight - viewHeight) + viewHeight + 10),
                    radius: 10,
                    startAngle: CGFloat(0), // 360 degree
                endAngle: CGFloat((3 * Double.pi) / 2 ), // 270 degree
                clockwise: true)
        
        path.addLine(to: CGPoint(x: viewWidth - 10, y: (viewHeight - viewHeight) + viewHeight + 10 + 10))
        path.addLine(to: CGPoint(x: (viewWidth - viewWidth) + 10, y: (viewHeight - viewHeight) + viewHeight + 10 + 10))
        
        path.addArc(withCenter: CGPoint(x: (viewWidth - viewWidth) + 10, y: (viewHeight - viewHeight) + viewHeight + 10),
                    radius: 10,
                    startAngle: CGFloat((3 * Double.pi) / 2), // 270 degree
                    endAngle: CGFloat(Double.pi ), // 180 degree
                clockwise: true)
        
        path.addLine(to: CGPoint(x: viewWidth - viewWidth, y: (viewHeight - viewHeight) + viewHeight + 10))
        path.addLine(to: CGPoint(x: viewWidth - viewWidth, y: (viewHeight - viewHeight) + 10))
        
        path.addArc(withCenter: CGPoint(x: (viewWidth - viewWidth) + 10, y: (viewHeight - viewHeight) + 10),
                    radius: 10,
                    startAngle: CGFloat(Double.pi), // 180 degree
                endAngle: CGFloat(Double.pi / 2 ), // 90 degree
                clockwise: true)
        
        path.close()
        fillColor.setFill()
        path.fill()
    }
}

Show me example what need change or explain me where I did mistake?

Ice Ice · Accepted Answer · 2020-12-01T14:15:39

I am solved this problem using "addCurve" instead of "addQuadCurve". code which I am replace

from:

// center left edge
        
        path.addQuadCurve(to: CGPoint(x: (viewWidth / 2 ) - 35, y: (11/2.0)), controlPoint: CGPoint(x: (viewWidth / 2 ) - 35, y: 0))
        // end left edge
        
        path.addArc(withCenter: CGPoint(x: viewWidth / 2, y: 0), radius: 35, startAngle: CGFloat(Double.pi), endAngle: CGFloat(Double.pi * Double.pi), clockwise: false)
        
        // How to draw this curve?
        
        // center right edge
//        path.addQuadCurve(to: CGPoint(x: (viewWidth / 2 ) + 35 + 10 , y: 0), controlPoint: CGPoint(x: (viewWidth / 2 ) + 35 - 10, y: 10))
        
        
        // end right edge

to:

// center left edge

    path.addCurve(to: CGPoint(x: (viewWidth / 2) - 35.9, y: 10), controlPoint1: CGPoint(x: (viewWidth / 2) - 35, y: 0), controlPoint2: CGPoint(x: (viewWidth / 2) - 35, y: 10))
    // end left edge
    
    path.addArc(withCenter: CGPoint(x: viewWidth / 2, y: 0), radius: 36.5, startAngle: CGFloat(Double.pi), endAngle: CGFloat(2 * Double.pi), clockwise: false)
    
    // How to draw this curve?
    
    // center right edge
    path.addCurve(to: CGPoint(x: (viewWidth / 2) + 35 + 8, y: 0), controlPoint1: CGPoint(x: (viewWidth / 2) + 36, y: 10), controlPoint2: CGPoint(x: (viewWidth / 2) + 35, y: 0))

    // end right edge

Result:

UIBezierPath, how to draw "QuadCurve"

2 Answers