I want to create a Bezier curve, and create a collision boundary for my object.
let firstSurfacePoint = CGPoint(x: 30, y: 120)
let secondSurfacePoint = CGPoint(x: 20, y: 200)
let thirdSurfacePoint = CGPoint(x: 200, y: 300)
let center = CGPoint(x: 150, y: 120)
let radius: CGFloat = 120.00
let arcWidth: CGFloat = 20.00
let fourthSurfacePoint = CGPoint(x: 240, y: 300)
func createCollisionPath(collision: UICollisionBehavior) {
let line = UIBezierPath()
line.moveToPoint(firstSurfacePoint)
line.addCurveToPoint(thirdSurfacePoint, controlPoint1: secondSurfacePoint, controlPoint2: secondSurfacePoint)
line.addLineToPoint(fourthSurfacePoint)
let currentPath = CAShapeLayer()
currentPath.path = line.CGPath
currentPath.strokeColor = UIColor.blackColor().CGColor
currentPath.fillColor = UIColor.clearColor().CGColor
currentPath.lineWidth = 1
view.layer.addSublayer(currentPath)
collision.addBoundaryWithIdentifier("curve", forPath: line)
}
the same poor result I get, if I choose addArcWithCente
line.moveToPoint(firstSurfacePoint)
line.addArcWithCenter(center, radius: radius, startAngle: CGFloat(M_PI), endAngle: CGFloat(M_PI/2), clockwise: false)
line.addLineToPoint(fourthSurfacePoint)
In this two tries receive a strange results, that are crucial, as I can't create a proper collision. In the first attempt my object goes through path as if it is a straight line from firstPoint to thirdPoint, as well as in the second
What am I doing wrong?
My figure(without Arc)
My figure(with Arc)
currentPath.fillColor = nil
or
currentPath.fillColor = UIColor.clearColor().CGColor
Related
I want to draw a semi circle with the bottom line and reuse it as shape node again. How can I implement this. This is my code for semi circle.
And also some code is hard coded so some help is appreciated.
func drawLine(from: CGPoint, to: CGPoint) {
// for line
let myLine = SKShapeNode()
let myPath = CGMutablePath()
myPath.addLines(between: [from, to])
myLine.path = myPath
myLine.strokeColor = SKColor.blue
myLine.lineWidth = 4
addChild(myLine)
}
func drawSemi(){
// for semi circle
let bezierPath = UIBezierPath(arcCenter: CGPoint(x: 0, y: 0), radius: 50, startAngle: 0, endAngle: .pi, clockwise: true)
let pathNode = SKShapeNode(path: bezierPath.cgPath)
pathNode.strokeColor = SKColor.blue
pathNode.position = CGPoint(x: self.size.width/2, y: self.size.height/2)
pathNode.lineWidth = 3
addChild(pathNode)
}
func drawCompleteSemi(){
drawSemi()
drawLine(from: CGPoint(x: 450, y: 500), to: CGPoint(x: 550, y: 500))
}
simply call close() on your bezier path, and omit the drawline function entirely
let bezierPath = UIBezierPath(arcCenter: CGPoint(x: 0, y: 0), radius: 50, startAngle: 0, endAngle: .pi, clockwise: true)
bezierPath.close() //<-- add this line
I'm trying to trace a line around the outside of the main view - trace along the edge of the screen. The following image shows the outline, and the code below shows how it animates.
The problem is, the animation draws the outer edge first, and then it draws the area around the notch.
I need it to start to draw the outer edge, drop down and draw around the notch, and then continue along the outer edge until it finishes.
import UIKit
class ViewController: UIViewController {
var layer: CAShapeLayer = CAShapeLayer()
override func viewDidLoad() {
super.viewDidLoad()
setupBorder()
animateBorder()
}
func setupBorder() {
let bounds = self.view.bounds
if UIDevice.current.hasNotch {
// FIXME: needs tweaks for:
// 12 pro max (corners and notch)
// 12 pro (corners)
// 12 mini (notch)
// the math works for all X and 11 series
// border around the phone screen
let framePath = UIBezierPath(roundedRect: bounds, byRoundingCorners: .allCorners, cornerRadii: CGSize(width: 40, height: 40))
// Math courtesy of:
// https://www.paintcodeapp.com/news/iphone-x-screen-demystified
let devicePointWidth = UIScreen.main.bounds.size.width
let w = devicePointWidth * 83 / 375
let n = devicePointWidth * 209 / 375
let notchBounds = CGRect(x: w, y: -10, width: n, height: 40)
let notchPath = UIBezierPath(roundedRect: notchBounds, byRoundingCorners: [.bottomLeft, .bottomRight], cornerRadii: CGSize(width: 20, height: 20))
// This is the problem. The framePath is drawn first,
// and then the notchPath is drawn. I need these to be
// mathematically merged
framePath.append(notchPath)
framePath.usesEvenOddFillRule = true
layer.path = framePath.cgPath
} else {
// if device is an 8 or lower, the border of the screen
// is a rectangle
layer.path = UIBezierPath(rect: bounds).cgPath
}
layer.strokeColor = UIColor.blue.cgColor
layer.strokeEnd = 0.0
layer.lineWidth = 20.0
layer.fillColor = nil
self.view.layer.addSublayer(layer)
}
func animateBorder() {
CATransaction.begin()
let animation = CABasicAnimation(keyPath: #keyPath(CAShapeLayer.strokeEnd))
animation.timingFunction = CAMediaTimingFunction(name: .linear)
animation.fromValue = 0.0
animation.toValue = 1.0
animation.duration = 6
CATransaction.setCompletionBlock { [weak self] in
self?.layer.strokeColor = UIColor.cyan.cgColor
self?.layer.strokeEnd = 1.0
}
layer.add(animation, forKey: "stroke-screen")
CATransaction.commit()
}
}
extension UIDevice {
var hasNotch: Bool {
// FIXME: Does not work with apps that use SceneDelegate
// Requires the window var in the AppDelegate
if #available(iOS 11.0, *) {
return UIApplication.shared.delegate?.window??.safeAreaInsets.bottom ?? 0 > 20
}
return false
}
}
The code above can be used in a new project, BUT the SceneDelegate.swift file will need to be removed, the Application Scene Manifest entry in the Info.plist will need to be deleted, and var window: UIWindow? will need to be added to AppDelegate.swift.
You're having that issue because you're creating two separate shapes and appending one to the next. So your path is being properly drawn.
You need to create one shape by using the exact coordinates so its properly drawn.
Here's a simple shape without any rounded corners:
let framePath = UIBezierPath()
framePath.move(to: .zero)
framePath.addLine(to: CGPoint(x: w, y: 0))
framePath.addLine(to: CGPoint(x: w, y: 30))
framePath.addLine(to: CGPoint(x: w+n, y: 30))
framePath.addLine(to: CGPoint(x: w+n, y: 0))
framePath.addLine(to: CGPoint(x: devicePointWidth, y: 0))
framePath.addLine(to: CGPoint(x: devicePointWidth, y: self.view.bounds.height))
framePath.addLine(to: CGPoint(x: 0, y: self.view.bounds.height))
framePath.addLine(to: .zero)
Then you can user addArc(withCenter:radius:startAngle:endAngle:clockwise:) to add the curved parts.
Here is a rough draft using some of the values that you had calculated:
let circleTop = CGFloat(3*Double.pi / 2)
let circleRight = CGFloat(0)
let circleBottom = CGFloat(Double.pi / 2)
let circleLeft = CGFloat(Double.pi)
let framePath = UIBezierPath()
framePath.move(to: CGPoint(x: 40, y: 0))
framePath.addLine(to: CGPoint(x: w-6, y: 0))
framePath.addArc(withCenter: CGPoint(x: w-6, y: 6), radius: 6, startAngle: circleTop, endAngle: circleRight, clockwise: true)
framePath.addArc(withCenter: CGPoint(x: w+20, y: 10), radius: 20, startAngle: circleLeft, endAngle: circleBottom, clockwise: false)
framePath.addLine(to: CGPoint(x: w+n-20, y: 30))
framePath.addArc(withCenter: CGPoint(x: w+n-20, y: 10), radius: 20, startAngle: circleBottom, endAngle: circleRight, clockwise: false)
framePath.addArc(withCenter: CGPoint(x: w+n+6, y: 6), radius: 6, startAngle: CGFloat(Double.pi), endAngle: circleTop, clockwise: true)
framePath.addLine(to: CGPoint(x: devicePointWidth-40, y: 0))
framePath.addArc(withCenter: CGPoint(x: devicePointWidth-40, y: 40), radius: 40, startAngle: circleTop, endAngle: circleRight, clockwise: true)
framePath.addLine(to: CGPoint(x: devicePointWidth, y: self.view.bounds.height - 40))
framePath.addArc(withCenter: CGPoint(x: UIScreen.main.bounds.size.width-40, y: UIScreen.main.bounds.size.height-40), radius: 40, startAngle: circleRight, endAngle: circleBottom, clockwise: true)
framePath.addLine(to: CGPoint(x: 40, y: self.view.bounds.height))
framePath.addArc(withCenter: CGPoint(x: 40, y: UIScreen.main.bounds.size.height-40), radius: 40, startAngle: circleBottom, endAngle: circleLeft, clockwise: true)
framePath.addLine(to: CGPoint(x: 0, y: 40))
framePath.addArc(withCenter: CGPoint(x: 40, y: 40), radius: 40, startAngle: circleLeft, endAngle: circleTop, clockwise: true)
I did the following:
let xOrigin = (pointsOfPerformance[POP.gluteusMaximus.index].x_origin / 375) * self.view.bounds.width
let yOrigin = (pointsOfPerformance[POP.gluteusMaximus.index].y_origin / 666.6666) * (self.view.bounds.width * 16 / 9)
let p0 = CGPoint(x: xOrigin, y: yOrigin)
let xDest = (pointsOfPerformance[POP.upperBack.index].x_origin / 375) * self.view.bounds.width
let yDest = (pointsOfPerformance[POP.upperBack.index].y_origin / 666.6666) * (self.view.bounds.width * 16 / 9)
let p1 = CGPoint(x: xDest, y: yDest)
let midPoint = CGPoint(x: (xOrigin + xDest) / 2, y:
(yOrigin + yDest) / 2)
let path = UIBezierPath()
path.move(to: p0)
path.addLine(to: p1)
path.addArc(withCenter: p2, radius: 94, startAngle: 200, endAngle: 130, clockwise: true)
let centerOfCircle = makePoint(xOffset: p2.x, yOffset: p2.y)
view.addSubview(centerOfCircle)
let shapeLayer = CAShapeLayer()
shapeLayer.path = path.cgPath
shapeLayer.fillColor = UIColor.animationRed.cgColor
shapeLayer.strokeColor = UIColor.animationRed.cgColor
shapeLayer.lineWidth = 0.05
view.layer.addSublayer(shapeLayer)
How do I get the circle to only show up as a slice of its curve that comes off the line on the back. It's unclear how I manipulate the function to get only the part coming off the line on the back visible.
This works on MacOS:
class CustomView: NSView {
override func draw(_ rect: CGRect) {
let bkgrnd = NSBezierPath(rect: rect)
let fillColor = NSColor.white
fillColor.set()
bkgrnd.fill()
let center = NSMakePoint(rect.size.width/2,rect.size.height/2)
let radius:CGFloat = rect.size.width/4
let path1 = NSBezierPath()
path1.appendArc(withCenter: center, radius: radius, startAngle: 90, endAngle: 270)
NSColor.gray.set()
path1.fill()
let path2 = NSBezierPath()
path2.appendArc(withCenter: center, radius: radius, startAngle: 270, endAngle: 90)
NSColor.blue.set()
path2.fill()
}
}
Demonstrates getting a small slice of the periphery of a circle for MacOS:
class CustomView: NSView {
override func draw(_ rect: CGRect ) {
let bkgrnd = NSBezierPath(rect: rect)
let fillColor = NSColor.white
fillColor.set()
bkgrnd.fill()
let center = NSMakePoint(rect.size.width/2,rect.size.height/2)
let radius:CGFloat = rect.size.width/4
let circle = NSBezierPath()
circle.appendArc(withCenter: center, radius: radius, startAngle: 0, endAngle: 360)
NSColor.gray.set()
circle.fill()
let arc = NSBezierPath()
arc.appendArc(withCenter: center, radius: radius, startAngle: 120, endAngle: 200)
NSColor.blue.set()
arc.fill()
}
}
Here is my demo:
As, you can see, the tip of the line is not rotated. This what I want to achieve:
How I draw the original line: When I tap on the screen, I got a CGPoint and draw everything base on that
func drawWholeRuler(originalPoint:CGPoint){ //Draw a whole ruler with every components
endPoint = CGPoint(x: originalPoint.x - 70, y: originalPoint.y)
startPoint = CGPoint(x: originalPoint.x + 70, y: originalPoint.y)
dotStartPointX = CGPoint(x: startPoint!.x, y: startPoint!.y - dotLineSize)
dotStartPointY = CGPoint(x: startPoint!.x, y: startPoint!.y + dotLineSize)
dotEndPointX = CGPoint(x: endPoint!.x, y: endPoint!.y - dotLineSize)
dotEndPointY = CGPoint(x: endPoint!.x, y: endPoint!.y + dotLineSize)
let path = drawLineFromPoint(start: startPoint!, toPoint: endPoint!, ofColor: fillColor, inView: self)
let dotStart = drawLineFromPoint(start: dotStartPointX!, toPoint: dotStartPointY!, ofColor: fillColor, inView: self)
let dotEnd = drawLineFromPoint(start: dotEndPointX!, toPoint: dotEndPointY!, ofColor: fillColor, inView: self)
let circleStart = drawCircle(point: startPoint!)
let circleEnd = drawCircle(point: endPoint!)
let newPath:bezierPathStruct = bezierPathStruct(startPoint: startPoint!, endPoint: endPoint!, dotStartPointX: dotStartPointX!, dotStartPointY: dotStartPointY!, dotEndPointX: dotEndPointX!, dotEndPointY: dotEndPointY!, path: path, dotStart: dotStart, dotEnd: dotEnd, circleStart: circleStart, circleEnd:circleEnd)
bezierPathArray.append(newPath)
}
Now is how I handle longPress and extend the line, which is actually just delete the tapped line and redraw everything separately (middle line, 2 vertical lines, 2 bubbles) when touch moves
#objc func handleLongPress(recognizer: UIGestureRecognizer) {
var startPointOfTouchedRuler:CGPoint = .zero
let zeroPoint:CGPoint = .zero
let currentPanPoint = longTapRecognizer.location(in: self)
// print("here",currentPanPoint)
if let sublayers = self.layer.sublayers as? [CAShapeLayer]{ //get all CAShape and stored as an array
for layer in sublayers{ // go through each CAShape
if let path = layer.path, path.contains(currentPanPoint) { // if there is a path at that point then return, else create a path
startPointOfTouchedRuler = detectWhichRuler(layer: layer)
if startPointOfTouchedRuler != zeroPoint{
// drawCircle(point: startPointOfTouchedRuler)
break
}else{
}
}
}
}
let linePath = UIBezierPath()
var circlePath = UIBezierPath()
var circlePath2 = UIBezierPath()
let verticalLinePath1 = UIBezierPath()
let verticalLinePath2 = UIBezierPath()
switch longTapRecognizer.state {
case .began:
tapGestureStartPoint = startPointOfTouchedRuler
if tapGestureStartPoint == zeroPoint {return}
self.layer.addSublayer(lineShape)
self.layer.addSublayer(shapeLayer1)
self.layer.addSublayer(shapeLayer2)
self.layer.addSublayer(verticalLineShape)
self.layer.addSublayer(verticalLineShape2)
shapeLayer1.anchorPoint = startPointOfTouchedRuler
verticalLinePath1.move(to: CGPoint(x: startPointOfTouchedRuler.x, y: startPointOfTouchedRuler.y - dotLineSize ))
verticalLinePath1.addLine(to: CGPoint(x: startPointOfTouchedRuler.x , y: startPointOfTouchedRuler.y + dotLineSize))
verticalLinePath2.move(to: CGPoint(x: currentPanPoint.x, y: currentPanPoint.y - dotLineSize))
verticalLinePath2.addLine(to: CGPoint(x: currentPanPoint.x, y: currentPanPoint.y + dotLineSize))
verticalLineShape.path = verticalLinePath1.cgPath
verticalLineShape2.path = verticalLinePath2.cgPath
linePath.move(to: tapGestureStartPoint)
linePath.addLine(to: currentPanPoint)
circlePath = UIBezierPath(arcCenter: currentPanPoint, radius: 15.0, startAngle: CGFloat(0), endAngle: CGFloat(Double.pi * 2.0), clockwise: true)
circlePath2 = UIBezierPath(arcCenter: startPointOfTouchedRuler, radius: 15.0, startAngle: CGFloat(0), endAngle: CGFloat(Double.pi * 2.0), clockwise: true)
shapeLayer2.path = circlePath2.cgPath
shapeLayer1.path = circlePath.cgPath
lineShape.path = linePath.cgPath
case .changed:
//
verticalLinePath2.move(to: CGPoint(x: currentPanPoint.x , y: currentPanPoint.y - dotLineSize))
verticalLinePath2.addLine(to: CGPoint(x: currentPanPoint.x, y: currentPanPoint.y + dotLineSize))
verticalLineShape2.path = verticalLinePath2.cgPath
linePath.move(to: tapGestureStartPoint)
linePath.addLine(to: currentPanPoint)
circlePath = UIBezierPath(arcCenter: currentPanPoint, radius: 15.0, startAngle: CGFloat(0), endAngle: CGFloat(Double.pi * 2.0), clockwise: true)
shapeLayer1.path = circlePath.cgPath
circlePath.move(to: tapGestureStartPoint)
lineShape.path = linePath.cgPath
case .ended:
verticalLineShape.path = nil
verticalLineShape2.path = nil
verticalLineShape2.removeFromSuperlayer()
verticalLineShape.removeFromSuperlayer()
shapeLayer2.path = nil
shapeLayer2.removeFromSuperlayer()
lineShape.path = nil
shapeLayer1.path = nil
lineShape.removeFromSuperlayer()
shapeLayer1.removeFromSuperlayer()
if tapGestureStartPoint == zeroPoint {return}
extendALine(startPoint: tapGestureStartPoint, currentPoint: currentPanPoint)
shouldDeleteRuler = true
default: print("default")
break
}
}
Now what I want is to rotate 2 lines at the edge when user hold and move finger. I tried CATransform3DRotate but it doesn't change anything.
I also tried
verticalLineShape.anchorPoint = startPointOfTouchedRuler
let degrees = 90.0
let radians = CGFloat(degrees * .pi / 180)
verticalLineShape.transform = CATransform3DMakeRotation(radians, 0.0, 0.0, 1.0)
verticalLineShape.anchorPoint = startPointOfTouchedRuler
But verticalLineShape disappeared instead of rotating.
So how is the best way to approach this?
I figured out, instead of rotating CAShapeLayer, I just need too rotate UIBezierPath before verticalLineShape.path = verticalLinePath1.cgPath
What I did:
extension UIBezierPath {
func rotate(path:UIBezierPath, degree:CGFloat){
let bounds:CGRect = path.cgPath.boundingBox
let center:CGPoint = CGPoint(x: bounds.midX, y: bounds.midY)
let radians:CGFloat = (degree/180 * .pi)
var transform:CGAffineTransform = CGAffineTransform.identity
transform = transform.translatedBy(x: center.x, y: center.y);
transform = transform.rotated(by: radians);
transform = transform.translatedBy(x: -center.x, y: -center.y);
path.apply(transform)
}
}
use
verticalLinePath1.rotate(path: verticalLinePath1, degree: 30)
Below is an image of my circle quadrants followed by the code. How can I reduce each arc by say, 10 points/pixels on each side so that there are gaps between the arcs? At first I was reducing them by CGFloat(Double.pi/36) on each side but that left didn't produce a straight gap, but a portion just sliced out, which is not what I want. I need each arc to have straight edges (horizontal and vertical) not diagonal.
class GameScene: SKScene, SKPhysicsContactDelegate {
var topRightPathNode : SKShapeNode!
var bottomRightPathNode : SKShapeNode!
var bottomLeftPathNode : SKShapeNode!
var topLeftPathNode : SKShapeNode!
override init(size: CGSize) {
super.init(size: size)
// TOP RIGHT
let topRightBezierPath = UIBezierPath(arcCenter: CGPoint(x: 0, y:0), radius: 100, startAngle: CGFloat(Double.pi/2), endAngle: 0, clockwise: false)
topRightPathNode = SKShapeNode(path: topRightBezierPath.cgPath)
topRightPathNode.strokeColor = SKColor.white
topRightPathNode.lineWidth = 18
topRightPathNode.position = CGPoint(x: frame.midX, y:frame.midY)
addChild(topRightPathNode)
// BOTTOM RIGHT
let bottomRightBezierPath = UIBezierPath(arcCenter: CGPoint(x: 0, y:0), radius: 100, startAngle: 0 , endAngle: 3*CGFloat(Double.pi/2), clockwise: false)
bottomRightPathNode = SKShapeNode(path: bottomRightBezierPath.cgPath)
bottomRightPathNode.strokeColor = SKColor.orange
bottomRightPathNode.lineWidth = 18
bottomRightPathNode.position = CGPoint(x: frame.midX, y:frame.midY)
addChild(bottomRightPathNode)
// BOTTOM LEFT
let bottomLeftBezierPath = UIBezierPath(arcCenter: CGPoint(x: 0, y:0), radius: 100, startAngle: 3*CGFloat(Double.pi/2), endAngle: 2*CGFloat(Double.pi/2), clockwise: false)
bottomLeftPathNode = SKShapeNode(path: bottomLeftBezierPath.cgPath)
bottomLeftPathNode.strokeColor = SKColor.green
bottomLeftPathNode.lineWidth = 18
bottomLeftPathNode.position = CGPoint(x: frame.midX, y:frame.midY)
addChild(bottomLeftPathNode)
// TOP LEFT
let topLeftBezierPath = UIBezierPath(arcCenter: CGPoint(x: 0, y:0), radius: 100, startAngle: 2*CGFloat(Double.pi/2), endAngle: CGFloat(Double.pi/2), clockwise: false)
topLeftPathNode = SKShapeNode(path: topLeftBezierPath.cgPath)
topLeftPathNode.strokeColor = SKColor.blue
topLeftPathNode.lineWidth = 18
topLeftPathNode.position = CGPoint(x: frame.midX, y:frame.midY)
addChild(topLeftPathNode)
}
}
Below is some code that when pasted into a iOS Playground generates a picture that I think matches your description.
In order to get the sides to remain parallel to the axes in the place where there are gaps, you have to do a little math to figure out what the points are. Then you have to draw the outline of the shape you want instead of relying on the stroke width added by the drawing system. The math is not too complicated if you're familiar with Trigonometry, but your question suggested that you might be OK.
import UIKit
import SpriteKit
import PlaygroundSupport
let radius = CGFloat(100)
let sceneSize = CGSize(width: 640, height: 480)
let sceneView = SKView(frame: CGRect(origin: CGPoint.zero, size: sceneSize))
let scene = SKScene(size: sceneSize)
scene.backgroundColor = UIColor.black
let topRightPath = arcSegment(center: CGPoint.zero, radius: radius, strokeWidth: 18, gapWidth: 18)
let topRightPathNode = SKShapeNode(path: topRightPath)
topRightPathNode.fillColor = SKColor.white
topRightPathNode.lineWidth = 0
topRightPathNode.position = CGPoint(x: 320, y: 240)
scene.addChild(topRightPathNode)
var reflectOnY = CGAffineTransform(scaleX: 1.0, y: -1.0)
let bottomRightPath = topRightPath.copy(using: &reflectOnY)!
let bottomRightPathNode = SKShapeNode(path: bottomRightPath)
bottomRightPathNode.fillColor = SKColor.orange
bottomRightPathNode.lineWidth = 0
bottomRightPathNode.position = CGPoint(x: 320, y: 240)
scene.addChild(bottomRightPathNode)
var reflectOnX = CGAffineTransform(scaleX: -1.0, y: 1.0)
let bottomLeftPath = bottomRightPath.copy(using: &reflectOnX)!
let bottomLeftPathNode = SKShapeNode(path: bottomLeftPath)
bottomLeftPathNode.fillColor = SKColor.green
bottomLeftPathNode.lineWidth = 0
bottomLeftPathNode.position = CGPoint(x: 320, y: 240)
scene.addChild(bottomLeftPathNode)
let topLeftPath = bottomLeftPath.copy(using: &reflectOnY)!
let topLeftPathNode = SKShapeNode(path: topLeftPath)
topLeftPathNode.fillColor = SKColor.blue
topLeftPathNode.lineWidth = 0
topLeftPathNode.position = CGPoint(x: 320, y:240)
scene.addChild(topLeftPathNode)
sceneView.presentScene(scene)
PlaygroundPage.current.liveView = sceneView
PlaygroundPage.current.needsIndefiniteExecution = true
func arcSegment(center : CGPoint,
radius: CGFloat,
strokeWidth: CGFloat,
gapWidth: CGFloat) -> CGPath
{
let halfStrokeWidth = strokeWidth / 2.0
let outerRadius = radius + halfStrokeWidth
let innerRadius = radius - halfStrokeWidth
let halfGap = gapWidth / 2.0
let outerStartAngle = CGFloat(atan2(sqrt(outerRadius * outerRadius - halfGap * halfGap), halfGap))
let outerEndAngle = CGFloat(atan2(halfGap, sqrt(outerRadius * outerRadius - halfGap * halfGap)))
let innerStartAngle = CGFloat(atan2(halfGap, sqrt(innerRadius * innerRadius - halfGap * halfGap)))
let innerEndAngle = CGFloat(atan2(sqrt(innerRadius * innerRadius - halfGap * halfGap), halfGap))
let path = CGMutablePath()
path.addArc(center: center, radius: outerRadius, startAngle: outerStartAngle, endAngle: outerEndAngle, clockwise: true)
// Quartz 2D will assume a "moveTo" here
path.addArc(center: center, radius: innerRadius, startAngle: innerStartAngle, endAngle: innerEndAngle, clockwise: false)
path.closeSubpath()
return path
}