JavaFX：将行作为动画附加到路径

Question

我正在尝试创建一个动画图表，该图表会随着新数据的添加而向右增长。我正在使用绘制变量的路径（JavaFX LineChart 似乎太慢），尝试通过将新 LineTo 附加到路径元素集来每 500 毫秒绘制一个新变量。我已将问题简化为以下示例代码。任何 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
         }
      ]
   }
}