ios - 带曲线路径的滑块

Question

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

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

标签： iosswiftslider

Answer 1

基本思想是，您可以为该曲线定义一个二次贝塞尔曲线，例如，使用一点效用函数point(at:)来告诉您 0 到 1 之间的值，该点在该贝塞尔曲线上的位置：

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
        )
    }
}

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

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:)来设置红色圆形视图：centert

显然，我正在使用手势来擦除 的更改t，但您可以使用自定义步进器或其他任何东西来完成相同的事情。