Problem using 2 ImageViews (one normal, one zoomed) on an image

Question

Hi, I've a problem in using 2 imageviews on an image.
Imageview A displays an image, and it has been flipped using "scaleX = -1"
Imageview B displays the same image as a zoomed image using viewport with "scaleX = -1"
Unfortunately, Imageview B now displays the far right-hand side of image, insteads of the left-hand side.
package imageview;
import javafx.geometry.Rectangle2D;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.stage.Stage;
var image = Image {
    url: "{__DIR__}flower.png"
var ivA = ImageView {
    image: image
    scaleX: -1
var ivB = ImageView {
    image: image
    fitWidth : 0
    fitHeight : 0
    viewport: Rectangle2D {
        minX: 0
        minY: 0
        width: 100
        height:100
    scaleX: -1
Stage {
    title: "ImageView"
    width: 415
    height: 200
    scene: Scene {
        content: HBox {
            content: [ivA, ivB]
}

Answer 1

Well, I asked for a mock-up of the wanted view, not the real one which I saw already (using my own image)... :-)
But I think I understood want you want. The problem is that you have to set the viewport position according to the image size, but this one is available only after loading it, ie. after the scene is already computed. And the Rectangle2D is immutable, you can't bind the variables.
I solved this by updating the viewport after a click.
Maybe we can track the image loading completion with using on replace on 'progress' or just 'width'.
var image = Image {
    url: "{__DIR__}flower.png"
var fullView = ImageView {
    image: image
    scaleX: -1
var zoomedViewSize = 100;
var zoomFactor = 1.0;
var zoomedView: ImageView = ImageView {
    image: image
    fitWidth : 0
    fitHeight : 0
    viewport: Rectangle2D {
        minX: 0
        minY: 0
        width: 100
        height:100
    scaleX: -1
    onMousePressed: function (evt: MouseEvent): Void
        zoomedView.viewport = Rectangle2D {
            minX: image.width - zoomedViewSize
            minY: 0
            width:  zoomedViewSize
            height: zoomedViewSize
        zoomedView.requestFocus();
Stage {
    title: "ImageView"
    width: 415
    height: 200
    scene: Scene {
        content: HBox {
            spacing: 10
            content: [ fullView, zoomedView ]
}[EDIT] OK, it works with:
var wdth = bind image.width on replace
    if (wdth > 0)
        zoomedView.viewport = Rectangle2D {
            minX: image.width - zoomedViewSize
            minY: 0
            width:  zoomedViewSize
            height: zoomedViewSize
}Note that this variable definition must be after the zoomedView definition... The order of initialization is important here.
Edited by: PhiLho on 1 oct. 2009 13:27