Slider with curved path - ios

Question

I need to create custom slider which path is curved. See the image above.
I can get the x position of the path, but how can I get its y position for each x point?

Answer 1

The basic idea is that you can define a quadratic Bézier for that curve, e.g., with a little utility function, point(at:) to tell you for values between 0 and 1, where the point is on that Bézier:
struct QuadBezier {
var point1: CGPoint
var point2: CGPoint
var controlPoint: CGPoint
var path: UIBezierPath {
let path = UIBezierPath()
path.move(to: point1)
path.addQuadCurve(to: point2, controlPoint: controlPoint)
return path
}
func point(at t: CGFloat) -> CGPoint {
let t1 = 1 - t
return CGPoint(
x: t1 * t1 * point1.x + 2 * t * t1 * controlPoint.x + t * t * point2.x,
y: t1 * t1 * point1.y + 2 * t * t1 * controlPoint.y + t * t * point2.y
)
}
}
Then you can then use that to define the curved path:
let bounds = view.bounds
let point1 = CGPoint(x: bounds.minX, y: bounds.midY)
let point2 = CGPoint(x: bounds.maxX, y: bounds.midY)
let controlPoint = CGPoint(x: bounds.midX, y: bounds.midY + 100)
let bezier = QuadBezier(point1: point1, point2: point2, controlPoint: controlPoint)
And you can then set the center of your circular view accordingly:
circleView.center = bezier.point(at: t)
E.g., here I’ve used path computed property to render blue CAShapeLayer, and using point(at:) to set the center of the red circular view based upon a value t:
Obviously, I’m using a gesture to scrub changes of t, but you can use your custom stepper or whatever to accomplish the same thing.