How to draw rounded rect that wraps around circular button?

Question

I want to design the highlighted portion of curve of the below screen snapshot using bezier path in swift.

i have upload new images which indicate the portion of curve — Lokesh gupta, Mar 26 '20 at 04:59
OK, so let’s say you’re drawing this. Going clockwise from the right side, you have a `addLine` for the right side, an `addCubicCurve` for the rounded edge, an `addArc` to draw the circular arc around the button, another `addCubicCurve` for the rounded edge as you approach the “8 o’clock” portion of the “start tracking” button, and then an `addLine` for the bottom edge, and then carry on around. There’s no built in function to do this ... you’re just going to need to do a little trigonometry to figure out the points to use as you add these cubic bezier and arcs to this path. — Rob, Mar 26 '20 at 05:08
I have tried something like this but don't found any success. — Lokesh gupta, Mar 26 '20 at 05:35

Rob · Accepted Answer · 2020-03-26T07:14:39.833

It’s just a little trigonometry to figure out the arcs around that button in the bottom right hand corner, e.g.

func updatePath() {
    let buttonCenter = CGPoint(x: bounds.maxX - circleRadius, y: bounds.maxY - circleRadius)

    circleShapeLayer.path = UIBezierPath(arcCenter: buttonCenter, radius: circleRadius, startAngle: 0, endAngle: .pi * 2, clockwise: true).cgPath // red

    let angle1 = acos((circleRadius - cornerRadius) / (circleRadius + spaceRadius + cornerRadius))
    let angle2 = acos((circleRadius - bottomDistance - cornerRadius) / (circleRadius + spaceRadius + cornerRadius))

    let arc1Center = CGPoint(x: bounds.maxX - cornerRadius,
                             y: buttonCenter.y - (circleRadius + cornerRadius + spaceRadius) * sin(angle1))

    let path = UIBezierPath()

    path.move(to: CGPoint(x: bounds.maxX, y: bounds.minY + cornerRadius))
    path.addArc(withCenter: arc1Center, radius: cornerRadius, startAngle: 0, endAngle: .pi / 2 + (.pi / 2 - angle1), clockwise: true) // blue
    path.addArc(withCenter: buttonCenter, radius: circleRadius + spaceRadius, startAngle: 2 * .pi - angle1, endAngle: .pi / 2 + angle2, clockwise: false) // green

    let arc2Center = CGPoint(x: buttonCenter.x - (circleRadius + cornerRadius + spaceRadius) * sin(angle2), y: bounds.maxY - bottomDistance - cornerRadius)

    path.addArc(withCenter: arc2Center, radius: cornerRadius, startAngle: -(.pi / 2 - angle2), endAngle: .pi / 2, clockwise: true) // yellow
    path.addArc(withCenter: CGPoint(x: bounds.minX + cornerRadius, y: bounds.maxY - (bottomDistance + cornerRadius)), radius: cornerRadius, startAngle: .pi / 2, endAngle: .pi, clockwise: true) // cyan
    path.addArc(withCenter: CGPoint(x: bounds.minX + cornerRadius, y: bounds.minY + cornerRadius), radius: cornerRadius, startAngle: .pi, endAngle: .pi * 3 / 2, clockwise: true) // white
    path.addArc(withCenter: CGPoint(x: bounds.maxX - cornerRadius, y: bounds.minY + cornerRadius), radius: cornerRadius, startAngle: .pi * 3 / 2, endAngle: 2 * .pi, clockwise: true) // black
    path.close()

    backgroundShapeLayer.path = path.cgPath
}

Yielding:

Or, if you want to match the above strokes, here it is color coded to the comments in the code above:

For example:

@IBDesignable
class BackgroundView: UIView {
    @IBInspectable var cornerRadius:   CGFloat = 10 { didSet { setNeedsLayout() } }
    @IBInspectable var spaceRadius:    CGFloat = 10 { didSet { setNeedsLayout() } }
    @IBInspectable var circleRadius:   CGFloat = 50 { didSet { setNeedsLayout() } }
    @IBInspectable var bottomDistance: CGFloat = 30 { didSet { setNeedsLayout() } }

    private let backgroundShapeLayer: CAShapeLayer = {
        let shapeLayer = CAShapeLayer()
        shapeLayer.fillColor = UIColor.white.cgColor
        shapeLayer.strokeColor = UIColor.clear.cgColor
        return shapeLayer
    }()

    private let circleShapeLayer: CAShapeLayer = {
        let shapeLayer = CAShapeLayer()
        shapeLayer.fillColor = UIColor.white.cgColor
        shapeLayer.strokeColor = UIColor.clear.cgColor
        return shapeLayer
    }()

    override init(frame: CGRect = .zero) {
        super.init(frame: frame)
        configure()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        configure()
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        updatePath()
    }
}

private extension BackgroundView {

    func configure() {
        layer.addSublayer(circleShapeLayer)
        layer.addSublayer(backgroundShapeLayer)
    }

    func updatePath() {
        let buttonCenter = CGPoint(x: bounds.maxX - circleRadius, y: bounds.maxY - circleRadius)

        circleShapeLayer.path = UIBezierPath(arcCenter: buttonCenter, radius: circleRadius, startAngle: 0, endAngle: .pi * 2, clockwise: true).cgPath

        let angle1 = acos((circleRadius - cornerRadius) / (circleRadius + spaceRadius + cornerRadius))
        let angle2 = acos((circleRadius - bottomDistance - cornerRadius) / (circleRadius + spaceRadius + cornerRadius))

        let arc1Center = CGPoint(x: bounds.maxX - cornerRadius,
                                 y: buttonCenter.y - (circleRadius + cornerRadius + spaceRadius) * sin(angle1))

        let path = UIBezierPath()

        path.move(to: CGPoint(x: bounds.maxX, y: bounds.minY + cornerRadius))
        path.addArc(withCenter: arc1Center, radius: cornerRadius, startAngle: 0, endAngle: .pi / 2 + (.pi / 2 - angle1), clockwise: true)
        path.addArc(withCenter: buttonCenter, radius: circleRadius + spaceRadius, startAngle: 2 * .pi - angle1, endAngle: .pi / 2 + angle2, clockwise: false)

        let arc2Center = CGPoint(x: buttonCenter.x - (circleRadius + cornerRadius + spaceRadius) * sin(angle2), y: bounds.maxY - bottomDistance - cornerRadius)

        path.addArc(withCenter: arc2Center, radius: cornerRadius, startAngle: -(.pi / 2 - angle2), endAngle: .pi / 2, clockwise: true)
        path.addArc(withCenter: CGPoint(x: bounds.minX + cornerRadius, y: bounds.maxY - (bottomDistance + cornerRadius)), radius: cornerRadius, startAngle: .pi / 2, endAngle: .pi, clockwise: true)
        path.addArc(withCenter: CGPoint(x: bounds.minX + cornerRadius, y: bounds.minY + cornerRadius), radius: cornerRadius, startAngle: .pi, endAngle: .pi * 3 / 2, clockwise: true)
        path.addArc(withCenter: CGPoint(x: bounds.maxX - cornerRadius, y: bounds.minY + cornerRadius), radius: cornerRadius, startAngle: .pi * 3 / 2, endAngle: 2 * .pi, clockwise: true)
        path.close()

        backgroundShapeLayer.path = path.cgPath
    }
}

score 0 · Answer 2 · answered Mar 26 '20 at 05:27

0

You can use Paint code application on mac, to draw the curve using the pen tool and then copy the result of it, since the app provides Drawings-to-code

answered Mar 26 '20 at 05:27

Mostfa Essam

745
8
11

How to draw rounded rect that wraps around circular button?

2 Answers2

Linked