Hi I'm currently trying to make random angles of a circle but id like the startangle to always be vertical. In the image above its shows 180 degrees of a circle but the start angle is horizontal and it changes depending on the angle i specify. So basically i want the start of the circle to always start at 0 degrees or vertical. Does anyone know the solution for this?
This is the code I'm using.
let center = CGPointMake(size.width/2, size.height/2)
let path = UIBezierPath()
path.addArcWithCenter(center, radius: 200, startAngle: 0, endAngle: 180.degreesToRadians, clockwise: true)
path.addLineToPoint(center)
path.closePath()
let angleShape = SKShapeNode(path: path.CGPath)
angleShape.strokeColor = UIColor(red: 0.203, green: 0.596, blue: 0.858, alpha: 1.0)
angleShape.fillColor = UIColor(red: 0.203, green: 0.596, blue: 0.858, alpha: 1.0)
addChild(angleShape)
change this:
path.addArcWithCenter(center, radius: 200, startAngle: 0, endAngle: 180.degreesToRadians, clockwise: true)
to this:
path.addArcWithCenter(center, radius: 200, startAngle: CGFloat(M_PI_2), endAngle: CGFloat(M_PI + M_PI_2), clockwise: true)
if you want a random startAngle and endAngle try this
func randomRange(min min: CGFloat, max: CGFloat) -> CGFloat {
assert(min < max)
return CGFloat(Float(arc4random()) / 0xFFFFFFFF) * (max - min) + min
}
let startAngle = randomRange(min: CGFloat(0), max: CGFloat(M_PI*2))
let endAngle = randomRange(min: CGFloat(0), max: CGFloat(M_PI*2))
path.addArcWithCenter(center, radius: 200, startAngle: startAngle, endAngle: endAngle, clockwise: true)
Related
I want to create doughnut chart with overlapping one side with rounded corner. like
requirement is starting end should be bellow previous line and ending end should above next line. I tired to do it but last line layer show both on top. I tried with bellow code
private func drawCircle(){
var startAngle: CGFloat = .pi / -2
var endAngle: CGFloat = 0.0
drawableItems.forEach { (item) in
print(item.title)
print(startAngle)
let center = calculateCenter()
endAngle = startAngle + calculateAngles(item: item)
if endAngle > 2 * CGFloat.pi {
endAngle -= 2 * .pi
}
// Radius of the view
let radius: CGFloat = calculateRadius()
let arcWidth: CGFloat = self.arcWidth
let circlePath = UIBezierPath(arcCenter: center,
radius: radius/2 - arcWidth/2,
startAngle: startAngle,
endAngle: endAngle,
clockwise: true)
circlePath.lineCapStyle = .round
let shapeLayer: CAShapeLayer = CAShapeLayer()
shapeLayer.path = circlePath.cgPath
shapeLayer.strokeColor = item.color.cgColor
shapeLayer.lineWidth = arcWidth
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.lineCap = .round
layer.addSublayer(shapeLayer)
startAngle = endAngle
}
}
output gives as bellow. in which last layer with green colour show both end top instead of one bellow previous and other on top of next
please help me to do so.
The issue is that your are drawing a simple arc with a thick line and rounded ends. The two rounded ends of the last arc is always going to cover the previous and first arcs.
The solution is to draw arcs that have a concave end that doesn't cover the convex end of the previous arc.
The following UIBezierPath extension will draw such an arc:
extension UIBezierPath {
convenience init(
chartArcCenter center: CGPoint,
radius: CGFloat,
lineWidth: CGFloat,
startAngle: CGFloat,
endAngle: CGFloat,
clockwise: Bool
) {
self.init()
// Draw inner radius arc
addArc(withCenter: center, radius: radius - lineWidth/2, startAngle: startAngle, endAngle: endAngle, clockwise: clockwise)
// Draw convex endcap
var x = cos(endAngle) * radius + center.x
var y = sin(endAngle) * radius + center.y
addArc(withCenter: CGPoint(x: x, y: y), radius: lineWidth / 2, startAngle: endAngle - .pi, endAngle: endAngle, clockwise: !clockwise)
// Draw outer radius arc
addArc(withCenter: center, radius: radius + lineWidth/2, startAngle: endAngle, endAngle: startAngle, clockwise: !clockwise)
// Draw concave startcap
x = cos(startAngle) * radius + center.x
y = sin(startAngle) * radius + center.y
addArc(withCenter: CGPoint(x: x, y: y), radius: lineWidth / 2, startAngle: startAngle, endAngle: startAngle + .pi, clockwise: clockwise)
close()
}
}
Use this in your code instead of the current UIBezierPath call. You can also make changes to the drawing settings of the shape layer.
With all changes in place your method becomes:
private func drawCircle(){
var startAngle: CGFloat = .pi / -2
var endAngle: CGFloat = 0.0
// Radius of the view
let radius: CGFloat = calculateRadius()
let arcWidth: CGFloat = self.arcWidth
let center = calculateCenter()
drawableItems.forEach { (item) in
endAngle = startAngle + calculateAngles(item: item)
let circlePath = UIBezierPath(chartArcCenter: center,
radius: radius/2 - arcWidth/2,
lineWidth: arcWidth,
startAngle: startAngle,
endAngle: endAngle,
clockwise: true)
let shapeLayer: CAShapeLayer = CAShapeLayer()
shapeLayer.path = circlePath.cgPath
shapeLayer.fillColor = item.color.cgColor
layer.addSublayer(shapeLayer)
startAngle = endAngle
}
}
Also note that there's no reason for the if endAngle > 2 * CGFloat.pi { block. It's OK if the angle "wraps". And the calculations of radius, width and center only need to be done once so no need for those inside the loop.
I'm trying to animate from a circle to a square with rounded corners. As far as I understand, number of points from both paths should be equal for smooth animation. So I wrote a function that builds a circle bases on a number of arcs:
private func circleShape(segmentNumber: Int = 8, radius: CGFloat = 32) -> CGPath {
let center = self.bounds.center
let circlePath = UIBezierPath()
let segmentAngle = CGFloat.pi * CGFloat(2) / CGFloat(segmentNumber)
var currentAngle: CGFloat = 0
for _ in 0 ..< segmentNumber {
let nextAngle = currentAngle + segmentAngle
circlePath.addArc(withCenter: center, radius: radius,
startAngle: currentAngle, endAngle: nextAngle, clockwise: true)
currentAngle = nextAngle
}
circlePath.close()
return circlePath.cgPath
}
I'm checking number of points with getPathElementsPointsAndTypes() and it increases unproportionally to the segmentNumber (segmentNumber: 1, points: 13; sN: 2, p: 14; sN: 3, p: 21; sN: 4, p: 16). So I can't find a segmentNumber that would give the same number of points (19) as the function that draws the square:
private func squareShape(size: CGFloat = 44, radius: CGFloat = 8) -> CGPath {
let rect = CGRect(center: self.bounds.center, size: CGSize(width: size, height: size))
let left = CGFloat.pi
let up = CGFloat(1.5) * CGFloat.pi
let down = CGFloat.pi / CGFloat(2)
let right = CGFloat(0.0)
let squarePath = UIBezierPath()
squarePath.addArc(withCenter: CGPoint(x: rect.minX + radius, y: rect.minY + radius), radius: radius, startAngle: left, endAngle: up, clockwise: true)
squarePath.addArc(withCenter: CGPoint(x: rect.maxX - radius, y: rect.minY + radius), radius: radius, startAngle: up, endAngle: right, clockwise: true)
squarePath.addArc(withCenter: CGPoint(x: rect.maxX - radius, y: rect.maxY - radius), radius: radius, startAngle: right, endAngle: down, clockwise: true)
squarePath.addArc(withCenter: CGPoint(x: rect.minX + radius, y: rect.maxY - radius), radius: radius, startAngle: down, endAngle: left, clockwise: true)
squarePath.close()
return squarePath.cgPath
}
Animation code:
let animation = CABasicAnimation(keyPath: "path")
animation.duration = 2
animation.toValue = self.circleShape()
animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear)
self.testLayer.add(animation, forKey: "pathAnimation")
Result:
What could I change to make the animation same smooth as in example without rounded rects?
You can simply have two paths
func circlePath () -> UIBezierPath {
return UIBezierPath(roundedRect: CGRect(x:0, y:0, width:50, height:50), cornerRadius: 25)
}
func squarePath () -> UIBezierPath {
return UIBezierPath(roundedRect: CGRect(x:0, y:0, width:30, height:30), cornerRadius: 4)
}
I have one circle and 4 arcs located around that circle.
Currently I'm drawing arcs like this:
fileprivate func addArc(from startAngle: CGFloat, to endAngle: CGFloat, of color: SKColor, with text: String) {
let arc = UIBezierPath(arcCenter: CGPoint(x: 0, y: 0), radius: 100, startAngle: startAngle, endAngle: endAngle, clockwise: false)
arc.flatness = 100
let node = SKShapeNode()
node.lineWidth = 36
node.strokeColor = color
node.path = arc.cgPath
addChild(node)
}
and when I later try to add a new LabelNode into my arc,
let labelNode = SKLabelNode(text: text)
labelNode.horizontalAlignmentMode = .center
labelNode.verticalAlignmentMode = .center
node.addChild(labelNode)
that NodeLabel being added into the middle of the circle but not into the middle of the arcs.
I've found that the mistake is in this line:
let arc = UIBezierPath(arcCenter: CGPoint(x: 0, y: 0), radius: 100, startAngle: startAngle, endAngle: endAngle, clockwise: false)
where I'm setting arcCenter.
So the question is, how can I shift the center of those arcs so labelNodes will be added into arcs but not into the circle?
I've been making a simple UIBezierPath animation with Swift. This path consists on creating a rounded rectangle with a colored border. The animation must be the drawing of the colored border. To do so, I've created a CAShapeLayer with a UIBezierPath(roundedRect:, cornerRadius: )
let layer = CAShapeLayer()
var viewPrueba = UIView()
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
viewPrueba = UIView(frame: CGRectMake(self.view.frame.width/2-100, self.view.frame.height/2 - 100, 200, 200))
self.view.addSubview(viewPrueba)
let path = UIBezierPath(roundedRect: CGRectMake(0, 0, 200, 200), cornerRadius: 40.0)
layer.path = path.CGPath
layer.fillColor = UIColor.clearColor().CGColor
layer.strokeColor = UIColor.blueColor().CGColor
layer.strokeStart = 0.0
layer.strokeEnd = 0.0
layer.lineWidth = 4.0
layer.lineJoin = kCALineJoinRound
viewPrueba.layer.addSublayer(layer)
let tapGR = UITapGestureRecognizer(target: self, action: #selector(ViewController.anim))
self.view.addGestureRecognizer(tapGR)
}
func anim() {
let anim1 = CABasicAnimation(keyPath: "strokeEnd")
anim1.fromValue = 0.0
anim1.toValue = 1.0
anim1.duration = 4.0
anim1.repeatCount = 0
anim1.autoreverses = false
anim1.removedOnCompletion = false
anim1.additive = true
anim1.fillMode = kCAFillModeForwards
self.layer.addAnimation(anim1, forKey: "strokeEnd")
}`
It works well. The only problem is that the animation starts from the top-left part of the square and not from the top-center. How can I do that?
The only thing I've found in order to achieve this is by doing it with a circle and not a rectangle, which is not what we want.
Thanks
CoreAnimate animated as the same order as which the UIBezierPath was drawn.
The system method
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius;
return a UIBezierPath which was drawn from the top-left,so your animation started from the top-left.
But you can create your own UIBezierPath drawn form top-center:
func centerStartBezierPath(frame:CGRect,cornerRadius:CGFloat) -> UIBezierPath {
let path = UIBezierPath()
path.moveToPoint(CGPointMake(frame.width/2.0, 0))
path.addLineToPoint(CGPointMake(frame.width-cornerRadius, 0))
path.addArcWithCenter(CGPointMake(frame.width-cornerRadius, cornerRadius),
radius: cornerRadius,
startAngle: CGFloat(-M_PI/2),
endAngle: 0,
clockwise: true)
path.addLineToPoint(CGPointMake(frame.width, frame.height-cornerRadius))
path.addArcWithCenter(CGPointMake(frame.width-cornerRadius, frame.height-cornerRadius),
radius: cornerRadius,
startAngle: 0,
endAngle: CGFloat(M_PI/2),
clockwise: true)
path.addLineToPoint(CGPointMake(cornerRadius, frame.height))
path.addArcWithCenter(CGPointMake(cornerRadius, frame.height-cornerRadius),
radius: cornerRadius,
startAngle: CGFloat(M_PI/2),
endAngle: CGFloat(M_PI),
clockwise: true)
path.addLineToPoint(CGPointMake(0, cornerRadius))
path.addArcWithCenter(CGPointMake(cornerRadius, cornerRadius),
radius: cornerRadius,
startAngle: CGFloat(M_PI),
endAngle: CGFloat(M_PI*3/2),
clockwise: true)
path.closePath()
path.applyTransform(CGAffineTransformMakeTranslation(frame.origin.x, frame.origin.y))
return path;
}
And it works like this:
You can also change the code,and start from any point you want.
Swift syntax changed much during these three years. Here is my updated version of originally accepted answer, but in Swift 5.1+
private extension UIBezierPath {
convenience init(roundedRectFromCenter frame: CGRect, cornerRadius: CGFloat) {
self.init()
move(to: CGPoint(x: frame.width / 2, y: 0))
addLine(to: CGPoint(x: frame.width - cornerRadius, y: 0))
addArc(
withCenter: CGPoint(x: frame.width - cornerRadius, y: cornerRadius),
radius: cornerRadius,
startAngle: -.pi / 2,
endAngle: 0,
clockwise: true
)
addLine(to: CGPoint(x: frame.width, y: frame.height - cornerRadius))
addArc(
withCenter: CGPoint(x: frame.width - cornerRadius, y: frame.height - cornerRadius),
radius: cornerRadius,
startAngle: 0,
endAngle: .pi / 2,
clockwise: true
)
addLine(to: CGPoint(x: cornerRadius, y: frame.height))
addArc(
withCenter: CGPoint(x: cornerRadius, y: frame.height - cornerRadius),
radius: cornerRadius,
startAngle: .pi / 2,
endAngle: .pi,
clockwise: true
)
addLine(to: CGPoint(x: 0, y: cornerRadius))
addArc(
withCenter: CGPoint(x: cornerRadius, y: cornerRadius),
radius: cornerRadius,
startAngle: .pi,
endAngle: .pi * 3 / 2,
clockwise: true
)
close()
apply(CGAffineTransform(
translationX: frame.origin.x,
y: frame.origin.y
))
}
}
I am trying to draw a semi-circle button. I'm having trouble both drawing the semi-circle and attaching it to the button I made in xcode. The button in xcode has constraints pinning it to the bottom of the screen and centering it. I reference the button in my view controller and then try to override it to a semi-circle as follows. I am getting a blank button. I also hard coded in the coordinates from the storyboard of where the button is. Is there a better way to do that?
let circlePath = UIBezierPath.init(arcCenter: CGPoint(x: 113.0, y: 434.0),
radius: 10.0, startAngle: 0.0, endAngle: CGFloat(M_PI), clockwise: true)
let circleShape = CAShapeLayer()
circleShape.path = circlePath.CGPath
sunButton.layer.mask = circleShape
The problem is that your shape layer is positioned way outside the buttons bounds. If you just add the shape layer as a subview of your button's layer you'll see the problem:
button.layer.addSublayer(circleShape)
You have to adjust the arc center point, so that the arc lies within the button's bounds:
let circlePath = UIBezierPath.init(arcCenter: CGPointMake(button.bounds.size.width / 2, 0), radius: button.bounds.size.height, startAngle: 0.0, endAngle: CGFloat(M_PI), clockwise: true)
let circleShape = CAShapeLayer()
circleShape.path = circlePath.CGPath
button.layer.mask = circleShape
And you'll get this:
Swift 5 update:
let circlePath = UIBezierPath.init(arcCenter: CGPoint(x: button.bounds.size.width / 2, y: 0), radius: button.bounds.size.height, startAngle: 0.0, endAngle: .pi, clockwise: true)
let circleShape = CAShapeLayer()
circleShape.path = circlePath.cgPath
button.layer.mask = circleShape
Swift 5:
// semiCircleDown
let circlePath = UIBezierPath(arcCenter: CGPoint(x: shapeView.bounds.size.width/2, y: 0), radius: shapeView.bounds.size.height, startAngle: 0, endAngle: .pi, clockwise: true).cgPath
//semiCircleUp
let circlePath = UIBezierPath(arcCenter: CGPoint(x: shapeView.bounds.size.width/2, y: 0), radius: shapeView.bounds.size.height, startAngle: 2 * .pi, endAngle: .pi, clockwise: true).cgPath
//quarterCircleRightDown
let circlePath = UIBezierPath(arcCenter: CGPoint(x: 0, y: 0), radius: shapeView.bounds.size.width, startAngle: 2 * .pi, endAngle: .pi * 3/2, clockwise: true).cgPath
//quarterCircleLeftDown
let circlePath = UIBezierPath(arcCenter: CGPoint(x: shapeView.bounds.size.width, y: 0), radius: shapeView.bounds.size.width, startAngle: .pi * 3/2, endAngle: .pi, clockwise: true).cgPath
quarterCircleRightUp
let circlePath = UIBezierPath(arcCenter: CGPoint(x: 0, y: shapeView.bounds.size.height), radius: shapeView.bounds.size.width, startAngle: 0, endAngle: .pi/2, clockwise: false).cgPath
//quarterCircleLeftUp
let circlePath = UIBezierPath(arcCenter: CGPoint(x: shapeView.bounds.size.width, y: shapeView.bounds.size.height), radius: shapeView.bounds.size.width, startAngle: .pi/2, endAngle: .pi, clockwise: false).cgPath
let shape = CAShapeLayer()
shape.path = circlePath.cgPath
shapeView.layer.mask = shape