Skip to content

Instantly share code, notes, and snippets.

@baarde
Created February 8, 2016 15:30
Show Gist options
  • Save baarde/264b63805e4e01908f96 to your computer and use it in GitHub Desktop.
Save baarde/264b63805e4e01908f96 to your computer and use it in GitHub Desktop.
class CircleView: UIView {
override func drawRect(rect: CGRect) {
// Draw this:
// https://twitter.com/baarde/status/696716466037657600
UIColor.blackColor().setFill()
UIRectFill(rect)
let center = CGPoint(x: bounds.midX, y: bounds.midY)
let radius = CGFloat(120)
let lineWidth = CGFloat(32)
let startAngle = CGFloat(-M_PI_2)
let endAngle = CGFloat(-M_PI_2 / 3)
let clockwise = false
// Blue path (start → end)
UIColor(red: 0x35 / 255.0, green: 0xC5 / 255.0, blue: 0xD8 / 255.0, alpha: 1.0).setFill()
UIBezierPath(roundedArcCenter: center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: clockwise, lineWidth: lineWidth).fill()
// Blue path (end → start)
UIColor(red: 0x71 / 255.0, green: 0x2D / 255.0, blue: 0xF6 / 255.0, alpha: 1.0).setFill()
UIBezierPath(roundedArcCenter: center, radius: radius, startAngle: endAngle, endAngle: startAngle, clockwise: clockwise, lineWidth: lineWidth).fill()
}
}
private extension UIBezierPath {
convenience init(roundedArcCenter center: CGPoint, radius: CGFloat, startAngle: CGFloat, endAngle: CGFloat, clockwise: Bool, lineWidth: CGFloat) {
self.init()
let startPoint = CGPoint(x: center.x + cos(startAngle) * radius, y: center.y + sin(startAngle) * radius)
let endPoint = CGPoint(x: center.x + cos(endAngle) * radius, y: center.y + sin(endAngle) * radius)
// Outer path
addArcWithCenter(center, radius: radius + lineWidth / 2, startAngle: startAngle, endAngle: endAngle, clockwise: clockwise)
// Rounded end
addArcWithCenter(endPoint, radius: lineWidth / 2, startAngle: endAngle, endAngle: endAngle + CGFloat(M_PI), clockwise: clockwise)
// Inner path
addArcWithCenter(center, radius: radius - lineWidth / 2, startAngle: endAngle, endAngle: startAngle, clockwise: !clockwise)
// Rounded start
addArcWithCenter(startPoint, radius: lineWidth / 2, startAngle: startAngle + CGFloat(M_PI), endAngle: startAngle, clockwise: !clockwise)
}
}
@stuffmc
Copy link

stuffmc commented Feb 9, 2016

Really cool. Pro Tip for others: You can test/view this simply in a Storyboard. All you need to see it is

CircleView(frame: CGRectMake(0, 0, 300, 300))

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment