I have the following code added in the drawRect function of a UIView creating the following attached green arc.
Is there a way I can make the edges at the ends of the curve to look like the red arc rounded edges in the smaller image attached.
[![//Draw the Interior
let center = CGPoint(x: bounds.width/2,
y: bounds.height/2)
//Calculate the radius based on the max dimension of the view.
let radius = max(bounds.width, bounds.height)
//Thickness of the Arc
let arcWidth: CGFloat = 76
//Start and End of Circle angle
let startAngle: CGFloat = 3 * π/4
let endAngle: CGFloat = π/4
let path = UIBezierPath(arcCenter: center, radius: radius/2 - arcWidth/2,
startAngle: startAngle,
endAngle: endAngle,
clockwise: true)
path.lineWidth = arcWidth
counterColor.setStroke()
path.stroke()]
Set the lineCapStyle property of the bezier path to
.Round:
A line with a rounded end. Quartz draws the line to extend beyond the
endpoint of the path. The line ends with a semicircular arc with a
radius of 1/2 the line’s width, centered on the endpoint.
path.lineCapStyle = .Round
Related
I want to draw the Moon and then animate Moon's shadow. But after launching this code I can see some glitches on animation line:
GIF:
Why is this happening?
Playground code here
Update 1:
Both paths created by this function but with different angles (0 and π/2*0.6):
func calculateMoonPath(for angle: CGFloat) -> UIBezierPath {
let center = CGPoint(x: view.bounds.midX, y: view.bounds.midY)
let radius = view.bounds.height/2
let path = UIBezierPath(arcCenter: center,
radius: radius,
startAngle: -.pi/2,
endAngle: .pi/2,
clockwise: true)
path.addArc(withCenter: .init(x: center.x - radius * tan(angle), y: center.y),
radius: radius / CGFloat(cosf(Float(angle))),
startAngle: .pi/2 - angle,
endAngle: angle - .pi/2,
clockwise: false
)
path.close()
return path
}
In my experience, the code that generates arcs creates different numbers of cubic bezier curves under the covers as the arc angle changes.
That changes the number of control points in the two curves, and messes up the animation. (as David Rönnqvist says, animations are undefined if the starting and ending path have a different number of control points.)
From what I've read, a full circle requires 4 cubic bezier curves to complete.
It wouldn't be that hard to create a variant of the addArc method that always built the arc using 4 cubic bezier curves, regardless of the arc angle. That's what I would suggest.
You could probably break your arc into 4 pieces (Using 4 sequential calls to addArc(withCenter:...) with different start and end angles such that they combine to make your desired full arc. Each of those should be short enough arc lengths to be a single Bezier curve, so you should get the same number of control points for the beginning and ending combined curve.
If you rewrite your calculateMoonPath function like this:
func calculateMoonPath(for angle: CGFloat) -> UIBezierPath {
let center = CGPoint(x: view.bounds.midX, y: view.bounds.midY)
let radius = view.bounds.height/2
let path = UIBezierPath(arcCenter: center,
radius: radius,
startAngle: -.pi/2,
endAngle: .pi/2,
clockwise: true)
let startAngle = .pi/2 - angle
let endAngle = angle - .pi/2
let delta = (endAngle - startAngle) / 4
for index in 0...3 {
let thisStart = startAngle + delta * CGFloat(index)
let thisEnd = startAngle + delta * CGFloat(index + 1)
path.addArc(withCenter: .init(x: center.x - radius * tan(angle), y: center.y),
radius: radius / CGFloat(cosf(Float(angle))),
startAngle: thisStart,
endAngle: thisEnd,
clockwise: false
)
}
path.close()
return path
}
That yields the following:
The way you do each of the two lines,
is simply, two control points!
One at each end.
That's all there is to it. Don't try using an arc.
Here ...
https://www.desmos.com/calculator/cahqdxeshd
I am trying to create a timer. I have a circle using UIBezierPath which I will animate to show the time remaining. This is the code that draws the shape and adds it to the view:
func drawBgShape() {
bgShapeLayer.path = UIBezierPath(arcCenter: CGPoint(x: center.x , y: center.y), radius:
bounds.width/2, startAngle: -.pi/2, endAngle: 1.5*.pi, clockwise: true).cgPath
bgShapeLayer.strokeColor = UIColor.red.cgColor
bgShapeLayer.fillColor = UIColor.clear.cgColor
bgShapeLayer.lineWidth = 10
layer.addSublayer(bgShapeLayer)
}
However, when the code is run, it looks like this;
I have tried a number of ways to centre the progress bar but none of them seem to work. For example, using frame.height/2 doesn't have any effect.
How can I centre the progress bar?
Thanks.
EDIT:
bgShapeLayer is defined like this:
let bgShapeLayer = CAShapeLayer()
The issue is probably this phrase:
arcCenter: CGPoint(x: center.x , y: center.y)
A view center is where the view is located in its superview. That’s not what you want. You want the center of the view. Try this:
arcCenter: CGPoint(x: bounds.midX , y: bounds.midY)
However, it would be better if you gave your shape layer a frame, size, and position and did everything in terms of the shape layer (which is, after all, where the shape is being drawn). For example:
bgShapeLayer.frame = self.layer.bounds
self.layer.addSublayer(bgShapeLayer)
bgShapeLayer.path = UIBezierPath(
arcCenter: CGPoint(x: bgShapeLayer.bounds.midX, y: bgShapeLayer.bounds.midY),
radius: bgShapeLayer.bounds.width/2,
startAngle: -.pi/2, endAngle: 1.5*.pi, clockwise: true).cgPath
That way we do not confuse the view coordinates and the layer coordinates, as your code does. To some extent you can get away with this because it happens that in this situation there is a general equivalence of the view internal coordinates, its layer internal coordinates, and the bgShapeLayer internal coordinates, but such confusion is not a good habit to get into. You should say what you mean rather than relying on a contingency.
I want to draw a line on the circle(intercepting the arc of the circle) perpendicularly like in the picture.
I am using this code to draw circle
let center = CGPoint(x: bounds.width / 2, y: bounds.height / 2)
let path = UIBezierPath(arcCenter: center, radius: radius, startAngle: Conversion.degreesToRadians(value: CGFloat(0)), endAngle: Conversion.degreesToRadians(value: CGFloat(360)), clockwise: true)
path.lineWidth = 2
path.lineCapStyle = CGLineCap.square
UIColor.white.setStroke()
path.stroke()
The basic idea is that a circle has a certain radius about a center CGPoint. To figure out a point on the circle, you can calculate the x and y coordinates like so:
func point(center: CGPoint, radius: CGFloat, angle: CGFloat) -> CGPoint {
let x = center.x + radius * cos(angle)
let y = center.y + radius * sin(angle)
return CGPoint(x: x, y: y)
}
where the angle is measured in radians, starting at 3 o'clock and going clockwise.
So those perpendicular intersecting strokes are merely line segments between two CGPoint at a given angle, where the "radius" used for the start of the line segment might be, for example, something just less than the radius of the circle. For the ending point of the line, use the same angle, but then use a radius value just greater than the radius of the circle.
I've got a rounded button that I'm adding a circular progress ring to using code from here:
http://notebookheavy.com/2014/07/30/ios-7-style-progress-meter-in-swift/
var progressCircle = CAShapeLayer();
let centerPoint = CGPoint (x: circle.bounds.width / 2, y: circle.bounds.width / 2);
let circleRadius : CGFloat = circle.bounds.width / 2 // this is what I need to fix * 1.25
var circlePath = UIBezierPath(arcCenter: centerPoint, radius: circleRadius, startAngle: CGFloat(-0.5 * M_PI), endAngle: CGFloat(1.5 * M_PI), clockwise: true );
circle.layer.addSublayer(progressCircle);
self.view.addSubview(circle)
The above code draws a circle around my button, but I'm wanting instead of the circle to hug the inside of the circumference, I want it to hug the outside. I figured I could just make the radius larger, but once I go beyond width / 2, the subview is no longer visible in the view at all.
How would I allow the radius of the progressCircle to be larger than the button's and appear to be wrapping around the button instead of creating a circle inside of the circumference?
I'm new to swift and to development at all.
I'm trying to create a wheel fortune for my app but I'm having some difficulties. I need to be able to set the number of sections of the wheel each time differently. Any help how to do it?
I tried to create ellipse like that:
import UIKit
class addShape: UIView {
let context = UIGraphicsGetCurrentContext();
override func drawRect(rect: CGRect) {
CGContextSetLineWidth(context, 3.0)
//CGContextSetStrokeColorWithColor(context, UIColor.purpleColor().CGColor)
CGContextStrokeEllipseInRect(context, rect)
UIColor.redColor().set()
//Actually draw the path
CGContextStrokePath(context)
}
}
but I could not create the ellipse at all :(
I tried this way as well:
override func drawRect(rect: CGRect) {
////UTUBE
UIGraphicsBeginImageContextWithOptions(CGSize(width: 512, height: 512), false, 0)
// Define the center point of the view where you’ll rotate the arc around
let center = CGPoint(x:bounds.width/2, y: bounds.height/2)
// Calculate the radius based on the max dimension of the view.
let radius: CGFloat = max(bounds.width, bounds.height)
// Define the thickness of the arc.
let arcWidth: CGFloat = 115
/////FIRST Shape
// Define the start and end angles for the arc.
let startAngle: CGFloat = 2 * π
let endAngle: CGFloat = π / 4
// Create a path based on the center point, radius, and angles you just defined.
var path = UIBezierPath(arcCenter: center,
radius: radius/2 - arcWidth/2,
startAngle: startAngle,
endAngle: endAngle,
clockwise: true)
// Set the line width and color before finally stroking the path.
path.lineWidth = arcWidth
counterColor.setStroke()
path.stroke()
// Second Shape
let startAngle2: CGFloat = π / 4
let endAngle2: CGFloat = π / 2
// Create a path based on the center point, radius, and angles you just defined.
path = UIBezierPath(arcCenter: center,
radius: radius/2 - arcWidth/2,
startAngle: startAngle2,
endAngle: endAngle2,
clockwise: true)
path.lineWidth = arcWidth
UIColor.greenColor().setStroke()
path.stroke()
// 3rd Shape
let startAngle3: CGFloat = π / 2
let endAngle3: CGFloat = 3 * π / 4
// Create a path based on the center point, radius, and angles you just defined.
path = UIBezierPath(arcCenter: center,
radius: radius/2 - arcWidth/2,
startAngle: startAngle3,
endAngle: endAngle3,
clockwise: true)
path.lineWidth = arcWidth
UIColor.blueColor().setStroke()
path.stroke()
// 4th Shape
let startAngle4: CGFloat = 3 * π / 4
let endAngle4: CGFloat = π
// Create a path based on the center point, radius, and angles you just defined.
path = UIBezierPath(arcCenter: center,
radius: radius/2 - arcWidth/2,
startAngle: startAngle4,
endAngle: endAngle4,
clockwise: true)
path.lineWidth = arcWidth
UIColor.redColor().setStroke()
path.stroke()
// 5th Shape
let startAngle5: CGFloat = π
let endAngle5: CGFloat = 5 * π / 4
// Create a path based on the center point, radius, and angles you just defined.
path = UIBezierPath(arcCenter: center,
radius: radius/2 - arcWidth/2,
startAngle: startAngle5,
endAngle: endAngle5,
clockwise: true)
path.lineWidth = arcWidth
UIColor.yellowColor().setStroke()
path.stroke()
// 6th Shape
let startAngle6: CGFloat = 5 * π / 4
let endAngle6: CGFloat = 3 * π / 2
// Create a path based on the center point, radius, and angles you just defined.
path = UIBezierPath(arcCenter: center,
radius: radius/2 - arcWidth/2,
startAngle: startAngle6,
endAngle: endAngle6,
clockwise: true)
path.lineWidth = arcWidth
UIColor.grayColor().setStroke()
path.stroke()
// 7th Shape
let startAngle7: CGFloat = 3 * π / 2
let endAngle7: CGFloat = 7 * π / 4
// Create a path based on the center point, radius, and angles you just defined.
path = UIBezierPath(arcCenter: center,
radius: radius/2 - arcWidth/2,
startAngle: startAngle7,
endAngle: endAngle7,
clockwise: true)
path.lineWidth = arcWidth
UIColor.purpleColor().setStroke()
path.stroke()
// 8th Shape
let startAngle8: CGFloat = 7 * π / 4
let endAngle8: CGFloat = 2 * π
// Create a path based on the center point, radius, and angles you just defined.
path = UIBezierPath(arcCenter: center,
radius: radius/2 - arcWidth/2,
startAngle: startAngle8,
endAngle: endAngle8,
clockwise: true)
path.lineWidth = arcWidth
UIColor.lightGrayColor().setStroke()
path.stroke()
}
I don't think that's the way to do it, but I did not find any other way to do this.
The main problem with your first example is that your context needs to be retrieved as part of drawRect. Once you have a circle, creating n segments is just a question of drawing n-1 lines.
(Insetting for line width increases complication but looks nicer.)
class WheelView: UIView {
var pieSections: Int = 1
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
override func drawRect(rect: CGRect) {
let context = UIGraphicsGetCurrentContext();
let lineWidth: CGFloat = 3.0
// Draw outline
CGContextSetLineWidth(context, lineWidth)
UIColor.redColor().set()
let smaller = rect.insetBy(dx: lineWidth / 2.0, dy: lineWidth / 2.0)
CGContextStrokeEllipseInRect(context, smaller)
let radius = smaller.width / 2.0
let segmentAngle = 2.0 / CGFloat(pieSections) * CGFloat(M_PI)
// Draw segment dividers
for index in 1...pieSections {
let drawAngle = segmentAngle * CGFloat(index)
let x = radius * cos(drawAngle) + rect.width / 2.0
let y = radius * sin(drawAngle) + rect.height / 2.0
CGContextBeginPath(context)
CGContextMoveToPoint(context, rect.width / 2, rect.height / 2)
CGContextAddLineToPoint(context, x, y)
CGContextStrokePath(context)
}
}
}