JavaFX：將行添加到路徑中作爲動畫

Question

我試圖創建一個動畫圖表，它隨着新數據的添加而向右增長。我正在使用繪製變量的路徑（JavaFX LineChart顯得太慢），試圖通過將一個新的LineTo附加到路徑元素集來每500ms繪製一個新變量。我已將問題簡化爲以下示例代碼。可以在任何JavaFX的專家告訴我，爲什麼隨着時間的推移?:

var newX = 10; 
var lineElements: PathElement[]; 


Timeline { 
    repeatCount: Timeline.INDEFINITE 
    keyFrames: [ 
     KeyFrame { 
     time: 500ms 
     canSkip: false 
     action: function() { 
      newX = newX + 10; 
      insert [LineTo {x: newX, y: 100}] into lineElements; 
     } 
     } 
    ] 
}.play(); 

Stage { 
    title: "Application title" 
    scene: Scene { 
     width: 250 
     height: 80 
     content: [ 
     Path { 
      fill: null 
      stroke: Color.RED 
      strokeWidth: 2 
      elements: bind lineElements = [ 
       MoveTo { 
        x: 0 
        y: 100 
       } 
      ] 
     } 
     ] 
    } 
} 

多謝，這並不在增長向下線和正確的結果。

Answer 1

我認爲你正在做的兩件事情錯：

我不喜歡的初始化命令，但可能是隻是一種風格的東西

您還需要增加Y或使彼此相對的PathElements 。

var lineElements: PathElement[] = [MoveTo { 
    x: 0 
    y: 100 
}]; 
Timeline { 
    repeatCount: Timeline.INDEFINITE 
    keyFrames: [ 
     KeyFrame { 
     time: 500ms 
     canSkip: false 
     action: function() { 
      insert LineTo {x: 10 y: 10 absolute: false} into lineElements; 
     } 
     } 
    ] 
}.play(); 

Stage { 
    scene: Scene { 
     content: [ 
     Path { 
      fill: null 
      stroke: Color.RED 
      strokeWidth: 2 
      elements: bind lineElements 
     } 
     ] 
    } 
}