Discussion :

[NatCarmin]

Bonjour,

Je bute sur l'animation d'un canvas. Le contexte est le suivant : j'ai un canvas de 640x640 pixels, géré comme une grille 10x10, où chaque case contient une image de 64x64 pixels. Je fais un drag and drop d'une case dans une autre pour les échanger. Cet échange déclenche deux traitements sur la grille. Et je voudrais afficher cette grille après le premier traitement, puis réafficher la grille après le second traitement. J'ai essayé plusieurs techniques, mais toutes donnent le même résultat. Je ne vois en définitive que le 2e affichage. La méthode qui me paraissait la plus adaptée consiste à utiliser une TimeLine. Voici grosso modo le code :

Voici le code pour déssiner mon canvas :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
	private void dessinerGrille() {
		GraphicsContext gc = grille.getGraphicsContext2D();
 
		for (int l = 0; l < 10; l++) {
			for (int c = 0; c < 10; c++) {
				// ....
				gc.drawImage(images[indiceImage], c * 64, l * 64);
			}
		}
 
	}

Voici le code de la classe contenant l'évènement final du DragNDrop

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 final class DragDroppedEvent implements EventHandler<DragEvent> {
 
		public void handle(DragEvent event) {
			//des traitements...
			echangerSourceTarget();
 
			event.consume();
		}
 
		private void echangerSourceTarget() {
			//d'autres traitements...
			timeline.play();
		}

Voici le code de la TimeLine :

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
 
	        KeyFrame Traitement1 = new KeyFrame(Duration.seconds(1),
	                new EventHandler<ActionEvent>() {
	        			public void handle(ActionEvent event) {
	        				grillePane.getGraphicsContext2D().clearRect(0, 0, 640, 640);
	        				dessinerGrille();
 
	                    }
	                });
 
	        KeyFrame Traitement2 = new KeyFrame(Duration.seconds(1),
	                new EventHandler<ActionEvent>() {
	        			public void handle(ActionEvent event) {
	        				grillePane.getGraphicsContext2D().clearRect(0, 0, 640, 640);
	        				//....
	        				dessinerGrille();
	        				timeline.stop();
	                    }
	                });
 
	        timeline = new Timeline(Traitement1, Traitement2);

Je constate que les 2 KeyFrame sont bien exécutées successivement, mais le dessinerGrille de Traitement1 (dessinerGrille qui est bel et bien exécutée) n'est jamais visible. J'ai beau mettre des pauses, rien à faire. Je ne comprends pas pourquoi. J'ai aussi essayé avec des Platform.runLater, pas mieux... Quelqu'un a une idée ?

Merci d'avance

[NatCarmin]

J'ai un peu honte (seulement un tout petit peu ;-) ). La solution utilisant une TimeLine avec 2 KeyFrame est la bonne. J'avais lu la doc, mais mal (faut dire qu'elle n'est pas forcément limpide sur ce point). La durée que l'on exprime dans le constructeur d'une KeyFrame n'est pas une durée d'affichage (comme je le croyais), mais la position sur la timeline. J'avais mis 1 pour les deux KeyFrame. Elle était donc affichée toutes les deux exactement une seconde après le start. Donc la deuxième effaçait immédiatement la première. En mettant 2 dans la KeyFrame du 2e traitement, la deuxième s'affichera à la seconde 2, soit 1 seconde après la première, qui du coup restera visible 1 seconde...