Как выполнить комбинированное/параллельное масштабирование и анимацию перевода в JavaFX 8

Я совсем недавно начал экспериментировать с Java FX, и он мне очень нравится. Я еще не читал никаких книг или подробных руководств по этому поводу, поэтому на этот вопрос, возможно, очень просто ответить.

Я хочу увеличить ImageView и показать пользователю определенную область Image в случае, если он нажмет на определенную область изображения. Чтобы быть более точным, взгляните на следующее изображение:

введите здесь описание изображения

(если изображение слишком маленькое, вот увеличенная версия)

(A) показывает полное изображение, которое я использую (world-map.jpg, размер: 4000 x 3000 пикселей)

(1) показывает этап, который я показываю пользователю. Я выполнил некоторое начальное масштабирование и преобразование в объект ImageView, чтобы представление было больше сосредоточено на Европе и Африке. Отмеченная область — это дополнительный элемент с прикрепленным обработчиком событий (не в моем коде)

(2) показывает результат, который я получил после выполнения моего ParallelTransition

(3) показывает результат, который я хочу получить

Что происходит, когда я выполняю свой ParallelTransition, так это то, что ImageView правильно увеличивается, но также переводится в правый нижний угол изображения. Что я сделал не так?

Вот мой код приложения JavaFX:

@Override
  public void start(final Stage stage)
  {

    // our root group
    final Group g = new Group();

    // load image
    ImageView im = new ImageView();
    // using a helper method to load external resource
    Image img = FileUtils.loadImage(R.imageWorldMap);
    im.setImage(img);
    g.getChildren().add(im);

    // translate to center view on europe and africa
    Translate t = new Translate();
    t.setX(-300);
    t.setY(-200);
    im.getTransforms().add(t);

    // zoom out because source image is huge
    Scale scale = new Scale();
    scale.setX(.3);
    scale.setY(.3);
    im.getTransforms().add(scale);

    // create scene and show stage
    final Scene s = new Scene(g, 640, 480);
    stage.setScene(s);
    stage.show();

    // code below is normally inside an event handler 
    // but for simplicity reason and testing its like that now

    // move europe to the center
    TranslateTransition translateTransition =
            new TranslateTransition(Duration.millis(2000), im);

    translateTransition.setToX(1100); // 3300
    translateTransition.setToY(900); // 2700

    // scale in europe
    ScaleTransition scaleTransition =
            new ScaleTransition(Duration.millis(2000), im);
    scaleTransition.setToX(3f);
    scaleTransition.setToY(3f);

    // create parallel translation
    ParallelTransition parallelTransition = new ParallelTransition();
    parallelTransition.getChildren().addAll(
            scaleTransition
            , translateTransition
    );

    parallelTransition.play();

  }

Я немного поигрался с координатами, чтобы получить лучшие результаты, и мне это удалось, но я хотел бы понять, как прагматично выполнить эту задачу.

В качестве дополнительного вопроса, можете ли вы порекомендовать (по своему опыту) книгу по Java FX 8.

Технология, которую я использую: Win7, Java8, JavaFX8


person Chris    schedule 14.09.2014    source источник


Ответы (1)


Я бы сослался на примеры... Демонстрации под javafx есть проект, который делает то, что вы хотите, я верю.. MandrelBot ... src находится в том же пакете..

person jdub1581    schedule 20.09.2014