animieren UIBezier, um eine Live-Kurve zu bekommen?

Question

Ich versuche ein einfaches Liniendiagramm zu erstellen, das live aktualisiert wird. Eine Art von Seismograph.

Ich dachte über UIBezierPath, indem ich nur einen Punkt auf der Y-Achse entsprechend einer Eingabe var verschiebe, kann ich eine Linie erstellen, die sich auf der Zeitachse bewegt.

Das problem IS dass Sie have zu "push" die previous points bis kostenlos up space für die neue ones. (So die graph goes von left nach rechts)

Can anybody Hilfe mit some direction?

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

Sie haben Recht: Sie müssen die vorherigen Punkte drücken. Teilen Sie die Gesamtbreite des Diagramms so auf, dass es zunehmend skaliert wird, aber alle Daten beibehält, oder lassen Sie den ersten Punkt jedes Mal fallen, wenn Sie am Ende ein neues hinzufügen. Sie müssen ein Array dieser Punkte speichern und den Pfad jedes Mal neu erstellen. Etwas wie:

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