弯曲路径滑块

Question

我需要创建路径弯曲的自定义滑块。参见上图。

我可以获得路径的x位置，但是如何获得每个x点的y位置？

Answer 1

基本思想是，您可以为该曲线定义一个quadratic 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 ) } } 来告诉您0到1之间的值，该点在该点上贝济耶：

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)

然后您可以使用它来定义弯曲路径：

center

然后您可以相应地设置圆形视图的circleView.center = bezier.point(at: t) ：

path

例如，这里我使用了CAShapeLayer计算属性来渲染蓝色point(at:)，并使用center来基于值设置红色圆形视图的t t：

很明显，我正在使用手势来擦洗{{1}}的更改，但是您可以使用自定义步进器或其他工具来完成相同的操作。