วิธีดำเนินการสเกลแบบรวม/ขนานและแอนิเมชั่นการแปลใน JavaFX 8

ฉันเพิ่งเริ่มลองใช้ Java FX และชอบมันมาก ฉันยังไม่ได้อ่านหนังสือหรือบทช่วยสอนเชิงลึกเกี่ยวกับเรื่องนี้เลย ดังนั้นคำถามนี้อาจจะตอบง่ายมาก

ฉันต้องการขยาย ImageView และแสดงให้ผู้ใช้เห็นบริเวณเฉพาะของ รูปภาพ ในกรณีที่เขาคลิกที่บริเวณใดบริเวณหนึ่งของรูปภาพ เพื่อให้ชัดเจนยิ่งขึ้น โปรดดูภาพต่อไปนี้:

(หากรูปภาพเล็กเกินไป นี่คือเวอร์ชันที่ใหญ่กว่า)

(A) แสดงภาพเต็มภาพที่ฉันใช้ (world-map.jpg, ขนาด: 4.000px X 3.000px)

(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