动画 UIBezier 以获得实时曲线

Question

我正在尝试创建一个正在实时更新的简单折线图。某种地震仪.

我在想

UIBezierPath

，通过只根据输入变量在y轴上移动一个点，我可以创建一条在时间轴上移动的线。

问题是你必须“推”之前的点来为新的点腾出空间（所以图表从左到右）。

接下来我可以尝试什么？

 var myBezier = UIBezierPath()
        myBezier.moveToPoint(CGPoint(x: 0, y: 0))
        myBezier.addLineToPoint(CGPoint(x: 100, y: 0))
        myBezier.addLineToPoint(CGPoint(x: 50, y: 100))
        myBezier.closePath()
        UIColor.blackColor().setStroke()
        myBezier.stroke()

Answer 1

你是对的：你需要推动前面的点。要么划分图形的总宽度，使其变得越来越大但保留所有数据，要么在每次向末尾添加一个新点时删除第一个点。您需要存储这些点的数组并每次都重新创建路径。像这样的东西：

//Given...
let graphWidth: CGFloat = 50
let graphHeight: CGFloat = 20
var values: [CGFloat] = [0, 4, 3, 2, 6]

//Here's how you make your curve...
var myBezier = UIBezierPath()
myBezier.moveToPoint(CGPoint(x: 0, y: values.first!))
for (index, value) in values.enumerated() {
    let point = CGPoint(x: CGFloat(index)/CGFloat(values.count) * graphWidth, y: value/values.max()! * graphHeight)
    myBezier.addLineToPoint(point)
}
UIColor.blackColor().setStroke()
myBezier.stroke()

//And here's how you'd add a point...
values.removeFirst() //do this if you want to scroll rather than squish
values.append(8)