ios - 如何使用 UIBezierPath 创建带有数据点的曲线图？

Question

我正在尝试使用 UIBezierPath创建折线图。我的目标是为这张图表制作动画，让它看起来像是“波浪状的”。但我似乎无法获得镜像数据的路径。

编辑:添加数据点

let dataPoints: [Double]


func wave(at elapsed: Double) -> UIBezierPath {
    let amplitude = CGFloat(50) - abs(fmod(CGFloat(elapsed/2), 3) - 1.5) * 100
    func f(_ x: Int) -> CGFloat {
        return sin(((CGFloat(dataPoints[x]*100) / bounds.width) + CGFloat(elapsed/2)) * 4 * .pi) * amplitude + bounds.midY
    }
    let path = UIBezierPath()
    path.move(to: CGPoint(x: 0, y: f(0)))
    for x in 1..<dataPoints.count {
        path.addLine(to: CGPoint(x: CGFloat(x), y: f(x)))
    }
    return path
}

Answer 1

几个问题:

您定义了 f(_:) , 但没有使用它，而是使用 dataPoints (我没有看到你在任何地方填充)。使用您的 f 可能是最简单的。直接发挥作用。

您正在向路径添加三次贝塞尔曲线，但您的控制点是相同的数据点。这不会提供平滑。控制点确实应该是您的 x 之前和之后的点。值，沿着与相关曲线相切的线(例如，沿着由数据点和斜率定义的线，即曲线的一阶导数)。
这样做并不难，但简单的解决方案是使用 addLine .如果你使用足够多的数据点，它会显得很平滑。

当你这样做时，如果只使用 12 个数据点，它不会是一个很好的平滑正弦曲线。相反，请使用更大的数字(120 或 360 或其他)。为了一条正弦曲线，除非您开始看到性能问题，否则不要担心数据点的数量。

您的 x CGPoint 中的值值小于您可能预期的值。如果您只从 0..<12 开始，则生成的路径将只有 12 点宽；哈哈。使用x值一直贯穿相关 View 。

所以，你最终可能会得到类似的东西:

func wave(at elapsed: Double) -> UIBezierPath {
    let amplitude = CGFloat(50) - abs(fmod(CGFloat(elapsed/2), 3) - 1.5) * 40
    func f(_ x: Int) -> CGFloat {
        return sin(((CGFloat(x) / bounds.width) + CGFloat(elapsed/2)) * 4 * .pi) * amplitude + bounds.midY
    }
    let path = UIBezierPath()
    path.move(to: CGPoint(x: 0, y: f(0)))
    for x in 1...Int(bounds.width) {
        path.addLine(to: CGPoint(x: CGFloat(x), y: f(x)))
    }
    return path
}

嫁给 CADisplayLink更新曲线，这会产生: