Discussion :

[Gouyon]

Salut à tous

Voilà mon problème. Je suis en train de faire un jeu et dans celui ci des figurines se déplacent sur une carte.
J'ai donc un fenêtre j'ai un ImageView qui me sert de fond et une liste d'ImageView dans un Group qui sont mes figurines.
Pour chaque figurine j'ai un UserData qui correspond à la position du pion sur la carte.
Je souhaite que le centre de chaque figurine soit sur le point défini par le UserData
Le code ci dessous fonctionne bien tant que l'orientation de ma figurine est 0. Dès que l'angle est différent de 0 j'ai des décalages assez incompréhensibles
L'ajustement de la position de l'ImagteView Figurine se fait dans la méthode corrigeLocation .

Je dois avouer que j'ai beaucoup de mal à comprendre le système de gestion des coordonées

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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
 
package application;
 
import java.awt.geom.Point2D;
import java.io.File;
import javafx.application.Application;
import javafx.application.Platform;
import javafx.beans.Observable;
import javafx.geometry.Bounds;
import javafx.geometry.HPos;
 
import javafx.geometry.Rectangle2D;
import javafx.geometry.VPos;
import javafx.scene.Group;
import javafx.scene.Node;
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.GridPane;
import javafx.scene.layout.Priority;
import javafx.scene.layout.Region;
import javafx.scene.transform.Scale;
import javafx.stage.Stage;
import pions.Pion;
 
public class TestPositionement extends Application {
 
	private Stage primaryStage;
	private Scene primaryScene;
 
	private final ImageView vueCarte = new ImageView();
	//private AnimationTimer timer;
 
	Group figurines = new Group();
	private GridPane vueRoot;
 
	private Region mapArea = new Region() {
		{
			getChildren().add(vueCarte);
			getChildren().add(figurines);
		}
	};
 
	private long t0 = -1;
	private double dir=60;
 
	@Override
	public void start(Stage primaryStage) {
 
		this.primaryStage = primaryStage;
 
		for (int fig = 0; fig < 3; fig++) {
			File file = new File("Images/Test/Fig" + fig + ".png");
			Image imgFig = new Image(file.toURI().toString(), false);
			ImageView vueFig = new ImageView();
			vueFig.setImage(imgFig);
			vueFig.getTransforms().add(scale);
			vueFig.relocate(100*(fig+1),200);
			vueFig.setRotate(dir);
			vueFig.visibleProperty().set(true);
			vueFig.setUserData(new Point2D.Double((fig+1) * 100, 200));
			figurines.getChildren().add(vueFig);
		}
 
		//
		File file = new File("Images/Test/Fond.png");
		Image image = new Image(file.toURI().toString(), false);
		vueCarte.setImage(image);
		final Rectangle2D viewport = new Rectangle2D(0, 0, 500, 500);
		vueCarte.setViewport(viewport);
		vueCarte.setOnMouseDragged(this::handleMouseDragged);
		vueCarte.setOnMouseMoved(this::handleMouseMoved);
		vueCarte.setOnScroll(this::handleZoom);
		vueCarte.getTransforms().add(scale);
		Platform.runLater(() ->
 
		{
			mapArea.widthProperty().addListener(this::mapAreaSizeChanged);
			mapArea.heightProperty().addListener(this::mapAreaSizeChanged);
		});
		vueRoot = new GridPane();
 
 
		vueRoot.add(mapArea, 1, 1);
		vueRoot.setConstraints(mapArea, 1, 1, 1, 1, HPos.LEFT, VPos.TOP, Priority.ALWAYS, Priority.ALWAYS);
 
		primaryScene = new Scene(vueRoot, 500, 500);
		primaryStage.setTitle("Test position");
		primaryStage.setScene(primaryScene);
		primaryStage.show();
		corrigeLocation(0, 0);
	}
	private double startX;
	private double startY;
 
	private double lastX;
	private double lastY;
 
	private void handleMouseMoved(MouseEvent e) {
		double XX = e.getX() + vueCarte.getViewport().getMinX();
		double YY = e.getY() + vueCarte.getViewport().getMinY();
		System.out.println(e.getX()+","+e.getY());
	}
 
 
 
	private void handleMouseDragged(MouseEvent e) {
		if (e.isPrimaryButtonDown()) {
 
			double draggedDistanceX = startX - e.getX();
			double draggedDistanceY = startY - e.getY();
 
			startX = e.getX();
			startY = e.getY();
 
 
			double viewWidth = mapArea.getWidth() / zoom;
			double viewHeight = mapArea.getHeight() / 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));
			corrigeLocation(newMinX, newMinY);
		}
	}
 
	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() / zoom;
		double viewHeight = mapArea.getHeight() / 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;
 
		scale.setX(zoom);
		scale.setY(zoom);
		double viewWidth = mapArea.getWidth() / zoom;
		double viewHeight = mapArea.getHeight() / 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));
			corrigeLocation(newMinX, newMinY);
		}
	}
 
	private void corrigeLocation(double orgx, double orgy) {
 
		for (Node vueFig : figurines.getChildren()) {
			Point2D unite = (Point2D) vueFig.getUserData();
			double nx = (unite.getX() - orgx) * zoom;
			double ny = (unite.getY() - orgy) * zoom;
			int m=0;			
			if (nx >= 0 && ny >= 0) {
				Bounds bnd=vueFig.getLayoutBounds();		
				double xc=(bnd.getMinX()+bnd.getMaxX())/2;
				double yc=(bnd.getMinY()+bnd.getMaxY())/2;
				vueFig.setLayoutX(nx-xc*zoom);
				vueFig.setLayoutY(ny-yc*zoom);				
				vueFig.visibleProperty().set(true);
				} else
				vueFig.visibleProperty().set(false);
		}
	}
 
 
	public static void main(String[] args) {
		launch(args);
	}
 
 
}

[bouye]

Bon pour le moment je vais me content de citer la doc car je me heurte aussi a quelques soucis :

Bounding Rectangles

Since every Node has transformations, every Node's geometric bounding rectangle can be described differently depending on whether transformations are accounted for or not.

Each Node has a read-only boundsInLocal variable which specifies the bounding rectangle of the Node in untransformed local coordinates. boundsInLocal includes the Node's shape geometry, including any space required for a non-zero stroke that may fall outside the local position/size variables, and its clip and effect variables.

Each Node also has a read-only boundsInParent variable which specifies the bounding rectangle of the Node after all transformations have been applied, including those set in transforms, scaleX/scaleY, rotate, translateX/translateY, and layoutX/layoutY. It is called "boundsInParent" because the rectangle will be relative to the parent's coordinate system. This is the 'visual' bounds of the node.

Finally, the layoutBounds variable defines the rectangular bounds of the Node that should be used as the basis for layout calculations and may differ from the visual bounds of the node. For shapes, Text, and ImageView, layoutBounds by default includes only the shape geometry, including space required for a non-zero strokeWidth, but does not include the effect, clip, or any transforms. For resizable classes (Regions and Controls) layoutBounds will always map to 0,0 width x height.

The image shows a node without any transformation and its boundsInLocal:



If we rotate the image by 20 degrees we get following result:



The red rectangle represents boundsInParent in the coordinate space of the Node's parent. The boundsInLocal stays the same as in the first image, the green rectangle in this image represents boundsInLocal in the coordinate space of the Node.
The images show a filled and stroked rectangle and their bounds. The first rectangle [x:10.0 y:10.0 width:100.0 height:100.0 strokeWidth:0] has the following bounds bounds: [x:10.0 y:10.0 width:100.0 height:100.0]. The second rectangle [x:10.0 y:10.0 width:100.0 height:100.0 strokeWidth:5] has the following bounds: [x:7.5 y:7.5 width:105 height:105] (the stroke is centered by default, so only half of it is outside of the original bounds; it is also possible to create inside or outside stroke). Since neither of the rectangles has any transformation applied, boundsInParent and boundsInLocal are the same.

[bouye]

Donc j'ai commence a modifier le code en changeant le layout initial des images qui les placent centrée autour du point choisi. Par contre il se trouve que pour que boundsInParent retourne les bonnes valeurs, il faut appliquer la transformation de rotation avant de récupérer les bornes transformees de la forme. De plus, c'est beaucoup plus simple d'appliquer la transformation de mise a l’échelle sur le groupe plutôt que sur chaque forme individuellement (je pense que l'ordre des transformations doit mettre le boxon). Idem avec le décalage lors du scroll.

Chui pas tout a fait sur que ce soit exactement corrigeLocation() fasse ce que tu veux donc vérifie bien (PS : rechanger les chemins vers les images) :

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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
public class TestPositionement extends Application {
 
    private Stage primaryStage;
    private Scene primaryScene;
 
    private final ImageView vueCarte = new ImageView();
    //private AnimationTimer timer;
 
    Group figurines = new Group();
    private GridPane vueRoot;
 
    private Region mapArea = new Region() {
        {
            getChildren().add(vueCarte);
            getChildren().add(figurines);
        }
    };
 
    private long t0 = -1;
    private double dir = 60;
 
    @Override
    public void start(Stage primaryStage) {
 
        this.primaryStage = primaryStage;
 
        for (int fig = 0; fig < 3; fig++) {
            File file = new File("src/imageviewmap/Fig" + fig + ".png");
            Image imgFig = new Image(file.toURI().toString(), false);
            ImageView vueFig = new ImageView();
            vueFig.setImage(imgFig);
            // On est oblige d'appliquer la rotation avant pour que les boundsInParent retournent la bonne valeur.
            vueFig.setRotate(dir);
            final double x = 100 * (fig + 1);
            final double y = 200;
            final Bounds transformedBounds = vueFig.getBoundsInParent();
            final double nodeTransformedX = transformedBounds.getMinX();
            final double nodeTransformedY = transformedBounds.getMinY();
            final double nodeTransformedW = transformedBounds.getWidth();
            final double nodeTransformedH = transformedBounds.getHeight();
            vueFig.relocate(x - nodeTransformedX - nodeTransformedW / 2, y - nodeTransformedY - nodeTransformedH / 2);
            vueFig.setVisible(true);
            vueFig.setUserData(new Point2D.Double(x, y));
            figurines.getChildren().add(vueFig);
            // Test
            final Bounds bounds = vueFig.getBoundsInLocal();
            final double nodeW = bounds.getWidth();
            final double nodeH = bounds.getHeight();
            Rectangle localBoundsRect = new Rectangle(x - nodeW / 2, y - nodeH / 2, nodeW, nodeH);
            localBoundsRect.setFill(null);
            localBoundsRect.setStrokeWidth(1);
            localBoundsRect.setStroke(Color.WHITE);
            Rectangle localTransformedBoundsRect = new Rectangle(x - nodeW / 2, y - nodeH / 2, nodeW, nodeH);
            localTransformedBoundsRect.setFill(null);
            localTransformedBoundsRect.setStroke(Color.GRAY);
            localTransformedBoundsRect.setStrokeWidth(1);
            localTransformedBoundsRect.setRotate(dir);
            Rectangle parentBoundsRect = new Rectangle(x - nodeTransformedW / 2, y - nodeTransformedH / 2, nodeTransformedW, nodeTransformedH);
            parentBoundsRect.setFill(null);
            parentBoundsRect.setStroke(Color.BLACK);
            parentBoundsRect.setStrokeWidth(1);
            Circle center = new Circle(5, Color.WHITE);
            center.setCenterX(x);
            center.setCenterY(y);
            figurines.getChildren().addAll(localBoundsRect, localTransformedBoundsRect, parentBoundsRect, center);
        }
        figurines.getTransforms().add(scale);
        //
        File file = new File("src/imageviewmap/Fond.png");
        Image image = new Image(file.toURI().toString(), false);
        vueCarte.setImage(image);
        final Rectangle2D viewport = new Rectangle2D(0, 0, 500, 500);
        vueCarte.setViewport(viewport);
        vueCarte.setOnMouseDragged(this::handleMouseDragged);
        vueCarte.setOnMouseMoved(this::handleMouseMoved);
        vueCarte.setOnScroll(this::handleZoom);
        vueCarte.getTransforms().add(scale);
        Platform.runLater(()
                -> {
            mapArea.widthProperty().addListener(this::mapAreaSizeChanged);
            mapArea.heightProperty().addListener(this::mapAreaSizeChanged);
        });
        vueRoot = new GridPane();
 
        vueRoot.add(mapArea, 1, 1);
        vueRoot.setConstraints(mapArea, 1, 1, 1, 1, HPos.LEFT, VPos.TOP, Priority.ALWAYS, Priority.ALWAYS);
 
        primaryScene = new Scene(vueRoot, 500, 500);
        primaryStage.setTitle("Test position");
        primaryStage.setScene(primaryScene);
        primaryStage.show();
        corrigeLocation(0, 0);
//        ScenicView.show(primaryScene);
    }
    private double startX;
    private double startY;
 
    private double lastX;
    private double lastY;
 
    private void handleMouseMoved(MouseEvent e) {
        double XX = e.getX() + vueCarte.getViewport().getMinX();
        double YY = e.getY() + vueCarte.getViewport().getMinY();
        System.out.println(e.getX() + "," + e.getY());
    }
 
    private void handleMouseDragged(MouseEvent e) {
        if (e.isPrimaryButtonDown()) {
 
            double draggedDistanceX = startX - e.getX();
            double draggedDistanceY = startY - e.getY();
 
            startX = e.getX();
            startY = e.getY();
 
            double viewWidth = mapArea.getWidth() / zoom;
            double viewHeight = mapArea.getHeight() / 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));
            corrigeLocation(newMinX, newMinY);
        }
    }
 
    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() / zoom;
        double viewHeight = mapArea.getHeight() / 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;
 
        scale.setX(zoom);
        scale.setY(zoom);
        double viewWidth = mapArea.getWidth() / zoom;
        double viewHeight = mapArea.getHeight() / 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));
            corrigeLocation(newMinX, newMinY);
        }
    }
 
    private void corrigeLocation(double orgx, double orgy) {
        double nx = orgx * zoom;
        double ny = orgy * zoom;
        figurines.setTranslateX(-nx);
        figurines.setTranslateY(-ny);
        for (Node vueFig : figurines.getChildren()) {
            Point2D unite = (Point2D) vueFig.getUserData();
            // Pour les cercles et rectangles que j'ai rajoute.
            if (unite == null) {
                continue;
            }
            // A verifier !
            unite.setLocation(unite.getX() - nx, unite.getY() - ny);
        }
    }
 
    public static void main(String[] args) {
        launch(args);
    }
 
}

PS2 : le rectangle blanc est la boite englobante non-transformee du pion. Le rectangle gris est la boite englobante transformée du pion (avec rotation donc). le rectangle noir est l'espace occupe par le pion dans son parent. Le cercle blanc est le point de positionnement.

[Gouyon]

Ca à l'air de bien fonctionner. Par contre corrigeLocation() se réduit à ça

Code :

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

1
2
3
4
5
6
7
 
private void corrigeLocation(double orgx, double orgy) {
        double nx = orgx * zoom;
        double ny = orgy * zoom;
        figurines.setTranslateX(-nx);
        figurines.setTranslateY(-ny);
    }

Par contre j'ai un soucis au niveau du MouseDragged. Je repart toujours du même point quand je clique et tire.

[Gouyon]

trouvé j'avais oublier d'ajouter ça

Code :

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

1
2
3
4
5
 
private void handleMousePressed(MouseEvent e) {
		startX = e.getX();
		startY = e.getY();
    }