Récupération des dimensions d'un ImageView

**Gouyon** · 26/01/2016, 16h00

Bonjour

Je viens de me lancer dans JavaFX et je voudrais afficher une image puis pouvoir zoomer et me déplacer dedans.
Pour cela j'utilise un ImageView que j'ai mis dans la partie centrale d'un BorderPane.
Je pensais faire le zoom sur mon image en modifiant le viewport de mon ImageView mais pour cela j'ai besoin de connaitre la taille de mon ImageView.
J'ai regardé FitHeight et FitWidth mais ça me retourne 0.0 quelque soit la taille de l'ImageView à l'écran
Un petit coup de main svp

**bouye** · 27/01/2016, 00h20

Du code, scrognegneu !!!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
import org.scenicview.ScenicView;
 
public class Main extends Application {
 
    @Override
    public void start(Stage primaryStage) {
        final Image image = new Image("http://www.developpez.net/template/images/logo.png");
//        final URL url = getClass().getResource("logo.png");
//        final Image image = new Image(url.toExternalForm());
        final ImageView imageView = new ImageView(image);
        final BorderPane root = new BorderPane();
        root.setCenter(imageView);
        Scene scene = new Scene(root, 500, 500);
        primaryStage.setTitle("Test ImageView BorderPane");
        primaryStage.setScene(scene);
        primaryStage.show();
        ScenicView.show(scene);
    }
 
    public static void main(String[] args) {
        launch(args);
    }
}

layoutBounds et boundsInParent je dirais.

Nom : imageviewbounds.jpg
Affichages : 1134
Taille : 133,1 Ko

**Gouyon** · 27/01/2016, 10h25

Envoyé par bouye

Du code, scrognegneu !!!

En voilà

Mais au départ je ne pouvais pas mettre grand chose. Finalement j'ai trouvé un exemple avec une HBox.
Je récupère ses dimensions pour limiter le déplacement de l'image.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
// Méthodes placée dans le controleur de ma fenêtre
 
public void setVue(ImageView Vue) {
		vueCarte = Vue;
		Rectangle2D viewport = new Rectangle2D(0, 0,500,500);
		vueCarte.setViewport(viewport);
		vueCarte.setOnMousePressed(this::handleMousePressed);
		vueCarte.setOnMouseDragged(this::handleMouseDragged);
	}
 
	private void handleMousePressed(MouseEvent e) {
		startX = e.getX();
		startY = e.getY();
	}
 
	private void handleMouseDragged(MouseEvent e) {
 
		double draggedDistanceX = startX- e.getX();
		double draggedDistanceY = startY-e.getY();
 
		startX = e.getX();
		startY = e.getY();
 
		double curMinX = vueCarte.getViewport().getMinX();
		double curMinY = vueCarte.getViewport().getMinY();
 
		double newMinX = curMinX + draggedDistanceX;
		double newMinY = curMinY + draggedDistanceY;
 
		newMinX = clamp(newMinX, 0, vueCarte.getImage().getWidth() -  monApp.getLargeur());
		newMinY = clamp(newMinY, 0, vueCarte.getImage().getHeight() - monApp.getHauteur());
 
		vueCarte.setViewport(new Rectangle2D(newMinX, newMinY, monApp.getLargeur(), monApp.getHauteur()));
	}
 
//l'application
	@Override
	public void start(Stage primaryStage) {
		try {
			vueCarte = new ImageView();
			vueCarte.setPreserveRatio(true);
			BufferedImage bufferedImage = ImageIO.read(new File("Images/ImgTest.png"));
			Image image = SwingFXUtils.toFXImage(bufferedImage, null);
			vueCarte.setImage(image);
			mainStage = primaryStage;
			FXMLLoader loader = new FXMLLoader();
			loader.setLocation(TestMain.class.getResource("view/Vue.fxml"));
			vue = (BorderPane) loader.load();
			centre = new HBox(vueCarte);
			vue.setCenter(centre);
			VueControl vueCtrl = loader.getController();
			Scene scene = new Scene(vue,500,500);
			mainStage.setScene(scene);
			mainStage.show();
			vueCtrl.setApp(this);
			vueCtrl.setVue(vueCarte);
 
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
 
	public double getLargeur() {
		return centre.getWidth();
	}
 
	public double getHauteur() {
		return centre.getHeight();
	}

J'ai juste un petit souci quand j’agrandis ma fenêtre l'image ne se redessine pas. Je suppose qu'il faut que j'intercepte le message de redimensionnement. Je vais chercher ça

**bouye** · 28/01/2016, 08h37

Pour ma part j'ai résolu le soucis en faisant ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
public class Main extends Application {
 
    private StackPane mapArea;
    private ImageView vueCarte;
 
    @Override
    public void start(Stage primaryStage) {
        final File file = new File("C:\\Users\\Fabrice\\Pictures\\0B9mf4AAIMRl1RzRpQkhTcFFXcms.jpg");
        final Image image = new Image(file.toURI().toString(), true);
        vueCarte = new ImageView(image);
        final Rectangle2D viewport = new Rectangle2D(0, 0, 500, 500);
        vueCarte.setViewport(viewport);
        vueCarte.setOnMousePressed(this::handleMousePressed);
        vueCarte.setOnMouseDragged(this::handleMouseDragged);
        mapArea = new StackPane(vueCarte);
        Platform.runLater(() -> {
            mapArea.widthProperty().addListener(this::mapAreaSizeChanged);
            mapArea.heightProperty().addListener(this::mapAreaSizeChanged);
        });
        final BorderPane root = new BorderPane();
        root.setCenter(mapArea);
        Scene scene = new Scene(root, 500, 500);
        primaryStage.setTitle("Test ImageView BorderPane");
        primaryStage.setScene(scene);
        primaryStage.show();
//        ScenicView.show(scene);
    }
 
    private double startX;
    private double startY;
 
    private void handleMousePressed(MouseEvent e) {
        startX = e.getX();
        startY = e.getY();
    }
 
    private void handleMouseDragged(MouseEvent e) {
 
        double draggedDistanceX = startX - e.getX();
        double draggedDistanceY = startY - e.getY();
 
        startX = e.getX();
        startY = e.getY();
 
        double viewWidth = mapArea.getWidth();
        double viewHeight = mapArea.getHeight();
 
        final Rectangle2D viewport = vueCarte.getViewport();
        double curMinX = viewport.getMinX();
        double curMinY = viewport.getMinY();
 
        double newMinX = curMinX + draggedDistanceX;
        double newMinY = curMinY + draggedDistanceY;
        newMinX = clamp(newMinX, 0, vueCarte.getImage().getWidth() - viewWidth);
        newMinY = clamp(newMinY, 0, vueCarte.getImage().getHeight() - viewHeight);
        vueCarte.setViewport(new Rectangle2D(newMinX, newMinY, viewWidth, viewHeight));
    }
 
    private void mapAreaSizeChanged(Observable o) {
        double viewWidth = mapArea.getWidth();
        double viewHeight = mapArea.getHeight();
        final Rectangle2D viewport = vueCarte.getViewport();
        if (viewport.getWidth() != viewWidth || viewport.getHeight() != viewHeight) {
            double newMinX = viewport.getMinX();
            double newMinY = viewport.getMinY();
            newMinX = clamp(newMinX, 0, vueCarte.getImage().getWidth() - viewWidth);
            newMinY = clamp(newMinY, 0, vueCarte.getImage().getHeight() - viewHeight);
            vueCarte.setViewport(new Rectangle2D(newMinX, newMinY, viewWidth, viewHeight));
        }
    }
 
    public static void main(String[] args) {
        launch(args);
    }
}

Et j'ai utilisé Platform.runLater() car sinon au début les dimensions de la zone ne sont pas bonne et donc la vue n'est pas bonne et rien de n'affiche tant qu'on ne redimensionne pas la fenêtre.

PS : attention la méthode clamp() sera inaccessible dans le JDK 9 (car API interne). Mais bon, elle fait 3 ligne donc facile d'en créer une autre ailleurs.

**Gouyon** · 28/01/2016, 12h44

Envoyé par bouye

Et j'ai utilisé Platform.runLater() car sinon au début les dimensions de la zone ne sont pas bonne et donc la vue n'est pas bonne et rien de n'affiche tant qu'on ne redimensionne pas la fenêtre.

ça marche parfaitement
Par contre j'ai ajouté une fonction zoom avec la molette de la souris.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
private void handleZoom(ScrollEvent event) {
		double delta = event.getDeltaY();
		if (delta < 0)
			zoom /= 2;
		if (delta > 0)
			zoom *= 2;
		if (zoom < 0.5)
			zoom = 0.5;
		if (zoom > 2)
			zoom = 2;
		vueCarte.setScaleX(zoom);
		vueCarte.setScaleY(zoom);
 
		}

Mais quand je rétrécie mon image elle n'occupe plus la surface entière (alors qu'elle le devrait vue les dimension initiale de l'image et la taille de la zone d'affichage).
J'ai l'impression que les setScale ne s'appliquent pas à l'image. J'ai essayé de jouer avec la taille du viewport mais ça ne fonctionne pas

Envoyé par bouye

PS : attention la méthode clamp() sera inaccessible dans le JDK 9 (car API interne). Mais bon, elle fait 3 ligne donc facile d'en créer une autre ailleurs.

C'est noté mais dans mon cas c'est une fonction privée qui est dans le code.

**bouye** · 29/01/2016, 03h18

Plusieurs trucs :

scaleX et scaleY prennent toujours comme origine de la transformation le barycentre du nœud donc mieux vaut utiliser une transformation scale qui prendra comme origine (0, 0) (vu qu'on ne spécifie rien).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
private double zoom = 1.0;
private Scale scale = new Scale(zoom, zoom);
 
[...]
 
vueCarte.getTransforms().add(scale);
 
[...]
 
scale.setX(zoom);
scale.setY(zoom);

Du coup lorsque tu zoomes en avant (x2) ton viewport doit devenir deux fois plus petit (1/2). Idem si tu zoomes en arrière (x0.5) ton viewport doit devenir deux fois plus grand (1/0.5). Donc il faut le recalculer lors du zoom ou de n'importe quelle opération ou on change les dimensions du viewport en tenant compte de l'inverse du facteur de zoom.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
```
1
2
double viewWidth = mapArea.getWidth() * 1 / zoom;
double viewHeight = mapArea.getHeight() * 1 / zoom;
```

Donc du coup il faut bien vérifier les paramètres de la méthode clamp() pour éviter que la borne max devienne négative lorsqu'on zoome trop en arrière (voir plus bas #1) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
newMinX = clamp(newMinX, 0, Math.max(0, vueCarte.getImage().getWidth() - viewWidth));
newMinY = clamp(newMinY, 0, Math.max(0, vueCarte.getImage().getHeight() - viewHeight));

Et comme le StackPane s’agrandissait de lui-même pour accompagner l’agrandissement du viewport (y a comme un bug vu que ça ne prenait pas en compte le facteur de zoom), j'ai donc mis une Region a la place comme conteneur car elle conserve elle toujours la taille donnée par le BorderPane.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
import java.io.File;
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.application.Platform;
import javafx.beans.Observable;
import javafx.geometry.Rectangle2D;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseEvent;
import javafx.scene.input.ScrollEvent;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Region;
import javafx.scene.transform.Scale;
import javafx.stage.Stage;
 
public class Main extends Application {
 
    private final ImageView vueCarte = new ImageView();
    private final Region mapArea = new Region() {
        {
            getChildren().add(vueCarte);
        }
    };
 
    @Override
    public void start(Stage primaryStage) {
        final File file = new File("C:\\Users\\Fabriceb\\Pictures\\Outland.jpg");
        final Image image = new Image(file.toURI().toString(), true);
        vueCarte.setImage(image);
        final Rectangle2D viewport = new Rectangle2D(0, 0, 500, 500);
        vueCarte.setViewport(viewport);
        vueCarte.setOnMousePressed(this::handleMousePressed);
        vueCarte.setOnMouseDragged(this::handleMouseDragged);
        vueCarte.setOnScroll(this::handleZoom);
        vueCarte.getTransforms().add(scale);
        Platform.runLater(() -> {
            mapArea.widthProperty().addListener(this::mapAreaSizeChanged);
            mapArea.heightProperty().addListener(this::mapAreaSizeChanged);
        });
        final BorderPane root = new BorderPane();
        root.setCenter(mapArea);
        Scene scene = new Scene(root, 500, 500);
        primaryStage.setTitle("Test ImageView BorderPane");
        primaryStage.setScene(scene);
        primaryStage.show();
//        ScenicView.show(scene);
    }
 
    private double startX;
    private double startY;
 
    private void handleMousePressed(MouseEvent e) {
        startX = e.getX();
        startY = e.getY();
    }
 
    private void handleMouseDragged(MouseEvent e) {
 
        double draggedDistanceX = startX - e.getX();
        double draggedDistanceY = startY - e.getY();
 
        startX = e.getX();
        startY = e.getY();
 
        double viewWidth = mapArea.getWidth() * 1 / zoom;
        double viewHeight = mapArea.getHeight() * 1 / zoom;
 
        final Rectangle2D viewport = vueCarte.getViewport();
        double curMinX = viewport.getMinX();
        double curMinY = viewport.getMinY();
 
        double newMinX = curMinX + draggedDistanceX;
        double newMinY = curMinY + draggedDistanceY;
        newMinX = clamp(newMinX, 0, Math.max(0, vueCarte.getImage().getWidth() - viewWidth));
        newMinY = clamp(newMinY, 0, Math.max(0, vueCarte.getImage().getHeight() - viewHeight));
        vueCarte.setViewport(new Rectangle2D(newMinX, newMinY, viewWidth, viewHeight));
        System.out.printf("%f x %f \t %f x %f%n", newMinX, newMinY, vueCarte.getImage().getWidth(), vueCarte.getImage().getHeight());
    }
 
    double clamp(double min, double value, double max) {
        double result = Math.max(min, value);
        result = Math.min(result, max);
        return result;
    }
 
    private void mapAreaSizeChanged(Observable o) {
        double viewWidth = mapArea.getWidth() * 1 / zoom;
        double viewHeight = mapArea.getHeight() * 1 / zoom;
        final Rectangle2D viewport = vueCarte.getViewport();
        if (viewport.getWidth() != viewWidth || viewport.getHeight() != viewHeight) {
            double newMinX = viewport.getMinX();
            double newMinY = viewport.getMinY();
            newMinX = clamp(newMinX, 0, Math.max(0, vueCarte.getImage().getWidth() - viewWidth));
            newMinY = clamp(newMinY, 0, Math.max(0, vueCarte.getImage().getHeight() - viewHeight));
            vueCarte.setViewport(new Rectangle2D(newMinX, newMinY, viewWidth, viewHeight));
        }
    }
 
    private double zoom = 1.0;
    private Scale scale = new Scale(zoom, zoom);
    private static final double MIN_ZOOM = 0.5;
    private static final double MAX_ZOOM = 2.0;
 
    private void handleZoom(ScrollEvent event) {
        double delta = event.getDeltaY();
        double newZoom = zoom;
        if (delta < 0) {
            newZoom /= 2;
        }
        if (delta > 0) {
            newZoom *= 2;
        }
        newZoom = clamp(MIN_ZOOM, newZoom, MAX_ZOOM);
        if (newZoom == zoom) {
            return;
        }
        zoom = newZoom;
        System.out.printf("Zoom: %f%n", zoom);
        scale.setX(zoom);
        scale.setY(zoom);
        double viewWidth = mapArea.getWidth() * 1 / zoom;
        double viewHeight = mapArea.getHeight() * 1 / zoom;
        final Rectangle2D viewport = vueCarte.getViewport();
        if (viewport.getWidth() != viewWidth || viewport.getHeight() != viewHeight) {
            double newMinX = viewport.getMinX();
            double newMinY = viewport.getMinY();
            newMinX = clamp(newMinX, 0, Math.max(0, vueCarte.getImage().getWidth() - viewWidth));
            newMinY = clamp(newMinY, 0, Math.max(0, vueCarte.getImage().getHeight() - viewHeight));
            vueCarte.setViewport(new Rectangle2D(newMinX, newMinY, viewWidth, viewHeight));
        }
    }
 
    public static void main(String[] args) {
        launch(args);
    }
}

Parmi les améliorations possible :

Borner la taille max du viewport lors du zoom aux dimensions de l'image.
On recalcule / repositionne le viewport dans 3 méthodes en faisant grosso-modo la même chose, ca peut être unifié dans une méthode commune.

Récupération des dimensions d'un ImageView

JavaFX

Vue hybride

Discussions similaires

Partager

Partager