Show part of a circle

Question

i want to display an arbitray part of a circle. I know how to get a round View using layer.cornerRadius now i want to see only a part of that circle(for any given radiant value). It would be ok, if the rest of it would be simply hidden beneath something white. Any ideas, how to achieve that?

edit: i have written a class for my View:

class Circle:UIView {
var rad = 0

    let t = CGFloat(3.0)

    override func draw(_ rect: CGRect) {
        super.draw(rect)
        let r = self.frame.width / CGFloat(2)
        let center = CGPoint(x: r, y: r)
        let path = UIBezierPath()

        path.move(to: CGPoint(x: t, y: r))

        path.addLine(to: CGPoint(x: 0.0, y: r))

        path.addArc(withCenter: center, radius: CGFloat(r), startAngle: CGFloat(Double.pi), endAngle: CGFloat(Double.pi+rad), clockwise: true)

        let pos = path.currentPoint
        let dx = r - pos.x
        let dy = r - pos.y
        let d = sqrt(dx*dx+dy*dy)
        let p = t / d
        path.addLine(to: CGPoint(x: pos.x + p * dx, y: pos.y + p * dy))
        path.addArc(withCenter: center, radius: r-t, startAngle: CGFloat(Double.pi+rad), endAngle: CGFloat(Double.pi), clockwise: false)


        UIColor(named: "red")?.setFill()
        path.fill()
    }
}

public func setRad(perc:Double) {
    rad = Double.pi * 2 * perc

}

in my view controller i call

    circleView.layer.cornerRadius = circleView.frame.size.width / 2
    circleView.clipsToBounds = true
    circleView.layer.borderWidth = 1
    circleView.layer.borderColor = UIColor.darkGray.cgColor

    circleView.layer.shadowColor = UIColor.black.cgColor
    circleView.layer.shadowOpacity = 1
    circleView.layer.shadowOffset = CGSize.zero
    circleView.layer.shadowRadius = 3
    circleView.layer.masksToBounds = false

    circleView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(self.onTap)))

now i get the full square View with a black circle from the corner and the red arc that i draw. If necessary i will post a picture tomorrow

https://stackoverflow.com/questions/32857312/how-do-i-apply-an-animation-around-a-button — matt, Sep 24 '18 at 12:58

score 0 · Answer 1 · answered Sep 24 '18 at 12:45

0

One way to do it is to draw a UIBezierPath.

If you just want an arc, you can call the init(arcCenter:radius:startAngle:endAngle:clockwise:) initializer. Remember to specify the start and end angles in radians!

After that, you can set the stroke color and call stroke

If you want a sector of a circle, you can create a UIBezierPath with the parameterless initializer, then move(to:) the center of the circle, and then addLine(to:) the start of the arc. You can probably calculate where this point is with a bit of trigonometry. After that, call addArc like I described above, then addLine(to:) the point where you started. After that, you can fill the path.

answered Sep 24 '18 at 12:45

Sweeper

213,210
22
193
313

ok i get the arc drawn, but now i can see the original border in addition to the border, that i get by setting cornerRadius – Ginso Sep 24 '18 at 14:00
@Ginso then don’t set the corner radius or the border and draw the view you want entirely in `draw(_:)`. – Sweeper Sep 24 '18 at 15:08
but even if i don't call the super.draw and use UIBezierPath ro fill the entire frame with clear color, i get a white View – Ginso Sep 25 '18 at 08:17
What are you trying to draw exactly? Can you show a picture? @Ginso – Sweeper Sep 25 '18 at 08:56

Show part of a circle

1 Answers1