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
         }
      ]
   }
}