Why the view content is not centered? - ios

Question

This is my result
Although I am explicitly stating that the arc center is the center of the view.
This is my code:
let count = colors.count-1
var index: Int = initialIndex
for oneArray in points {
let startAngleRadiant: CGFloat = degreesToRadians(Double(oneArray[0]))
let endAngleRadiant: CGFloat = degreesToRadians(Double(oneArray[1]))
let radius: CGFloat = self.frame.height/4
let path = UIBezierPath(arcCenter: center,
radius: radius,
startAngle: startAngleRadiant,
endAngle: endAngleRadiant,
clockwise: true)
let color = UIColor(red: colors[count-index][0], green: colors[count-index][1], blue: colors[count-index][2], alpha: 1.0)
path.lineWidth = CGFloat(4)
if ++index >= count {
index = 0
}
color.setStroke()
path.stroke()
}
And the view (that's the circle inside) has the correct constrains for height and width. As you see here
This is the constrain of the view Wainting Circle View
as you see, i am setting the hight and the width relative to the supper view,
thus the center of that view should be correct, as a result, the self.center that i am using should draw at the center

Answer 1

You are defining the center of your arch a self.center which the docs describe as:
The center is specified within the coordinate system of its superview and is measured in points. Setting this property changes the values of the frame properties accordingly.
This is essentially the same as CGPoint(x: frame.midX, y: frame.midY), meaning that if your view isn't flush with the top of the superview superview, center.x is going to be different from the center of the view.
For example, if your view has frame == CGRect(x:50, y:50, width:100, height:100), it will have center == CGPoint(x: 50 + 100/2, y: 50 + 100 /2) == CGPoint(x:100, y:100) which is the bottom right corner of the view.
If you want the circle to be centered in the center of the view, you should pick your center based of the bounds, which is in a view-relative coordinate system:
let center = CGPoint(x: bounds.midX, y: bounds.midY)
let path = UIBezierPath(arcCenter: center,
radius: radius,
startAngle: startAngleRadiant,
endAngle: endAngleRadiant,
clockwise: true)