JavaFX: добавление строки к пути в качестве анимации - PullRequest
Новая
       18

JavaFX: добавление строки к пути в качестве анимации

2 голосов
/ 15 февраля 2010

Я пытаюсь создать анимированный график, который увеличивается по мере добавления новых данных. Я использую путь для построения переменных (JavaFX LineChart кажется слишком медленным), пытаясь построить новую переменную каждые 500 мс, добавляя новый LineTo к набору элементов пути. Я сократил проблему до следующего примера кода. Могут ли какие-нибудь эксперты по 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
               }
            ]
         }
      ]
   }
}

Спасибо большое.

1 Ответ

2 голосов
/ 15 февраля 2010

Я думаю, что вы делаете две вещи неправильно:

Мне не нравится порядок инициализации, но это может быть просто стиль

Вам также нужно увеличить 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
         }
      ]
   }
}
...