CODEWITHSUNDEEP
iosswiftuibezierpath
Nitesh
Nitesh

Reputation: 2024

Drawing UIView Quad Circle

s

How to make UIView like above.

Tried below but its creating a semi circle type view.

let circlePath = UIBezierPath(arcCenter: CGPoint(x: topView.bounds.size.width, y: topView.bounds.size.height / 2), radius: topView.bounds.size.height, startAngle: .pi, endAngle: 0.0, clockwise: false)
let circleShape = CAShapeLayer()
circleShape.path = circlePath.cgPath
topView.layer.mask = circleShape

Upvotes: 0

Views: 87

Answers (2)

Larme
Larme

Reputation: 26036

Draw it yourself. There is nothing complicated.

With sample: enter image description here

  • Start at CenterPoint
  • Go to BottomPoint (line)
  • Arc from BottomPoint to LeftPoint, and the angle are Pi/2 to Pi (in clockwise)
  • Go to leftPoint
  • Go to CenterPoint (line)

The UIBezierPath:

let bezierPath = UIBezierPath()
let centerPoint = CGPoint(x: view.bounds.width, y: 0)
let bottomPoint = CGPoint(x: view.bounds.width, y: view.bounds.height)
let leftPoint = CGPoint(x: 0, y: 0)
bezierPath.move(to: bottomPoint) //not needed
bezierPath.addArc(withCenter: centerPoint,
                  radius: view.bounds.height,
                  startAngle: CGFloat.pi/2.0,
                  endAngle: CGFloat.pi,
                  clockwise: true)
bezierPath.addLine(to: leftPoint) //not needed
bezierPath.addLine(to: centerPoint)

There are two "not needed", because they are implicit, but you might want to write them if they are "too much hidden" for you.

Why your self? Because, a circle will only have two points and fill between it. In other words, it won't go to "centerPoint" to fill it. Example with the same angle I used in my handmade path:

enter image description here

Upvotes: 2

jrturton
jrturton

Reputation: 119242

There are 2 * .pi radians in a circle, and you're going from pi to 0, which is a semicircle. Your start and end angles have to be 0.5 pi apart.

Upvotes: 1

Related Questions