Transformation de nodes particuliers dans un groupe

**martzray** · 17/07/2010, 11h57

Bonjour,

Voilà mon problème. J'ai plusieurs boutons. Lorsque je clique sur un bouton, puis sur le rectangle vert clair, j'insère une image png.

Seulement, lorsque j'ai plusieurs objets sur le rectangle, et que je draganddrop sur l'un d'eux, je ne voudrais déplacer que celui-ci, alors que tout le groupe se déplace.

J'ai essayé de chercher dans tout le forum, mais je n'ai trouvé aucune réponse à mon problème.

D'avance, merci à tous ceux qui voudront bien m'aider.

Voici le code de mon début d'application :

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
package parcoursagility;
 
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.input.MouseEvent;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.Node;
import javafx.scene.control.TextBox;
 
 
 
 
var coord_x : Number;
var coord_y : Number;
var start_x : Number;
var start_y : Number;
var end_x : Number;
var end_y : Number;
 
 def txtbx_coord = TextBox {
        layoutX : 850;
        layoutY : 100;
    text: "x : {coord_x} y : {coord_y}"
    columns: 15
}
 
 def txtbx_click = TextBox {
        layoutX : 850;
        layoutY : 150;
    text: "x : {coord_x} y : {coord_y}"
    columns: 15
}
 
 def txtbx_drag = TextBox {
        layoutX : 850;
        layoutY : 200;
    text: "x : {coord_x} y : {coord_y}"
    columns: 15
}
 
 def txtbx_node = TextBox {
        layoutX : 850;
        layoutY : 300;
    text: "x : {coord_x} y : {coord_y}"
    columns: 15
}
 
 
var index_objet : Integer = 0;
def haie = Image { url: "{__DIR__}Haie.png", }
def passerelle = Image { url: "{__DIR__}Passerelle.png" }
var obstacle : Image;
 
def btn_Haie = Button {
        layoutX : 10;
        layoutY : 10;
    text: "Haie"
    action: function() {
    index_objet = 1;
 
    }
}
def btn_Passerelle = Button {
        layoutX : 75;
        layoutY : 10;
    text: "Passerelle"
    action: function() {
    index_objet = 2;
 
    }
}
 
var contenu: Node[] = [
 
   Rectangle{
       x : 0
       y : 50
       width: 800
       height: 400
       fill: Color.LIGHTGREEN
 
       onMouseMoved: function(e: MouseEvent): Void {
    coord_x = e.sceneX;
    coord_y = e.sceneY;
    txtbx_coord.text = "x = {coord_x} y = {coord_y}"
    }
 
 
       onMouseClicked: function( e: MouseEvent ):Void {
      //      index_objet = 1;
         if(index_objet == 1)  then obstacle = haie;
         if(index_objet == 2)  then obstacle = passerelle;
            start_x = e.x;
            start_y = e.y;
            nouvel_obstacle();
       }
   }
     txtbx_coord,
     txtbx_click,
     txtbx_drag,
     txtbx_node,
     btn_Haie,
     btn_Passerelle
 
]
;
 
function nouvel_obstacle(): Void{
            insert ImageView {
               translateX: start_x;
               translateY: start_y;
               x: bind end_x, y: bind end_y
               image: obstacle
               onMouseDragged: function(e: MouseEvent): Void {
               txtbx_node.text = "{contenu.size()}";
               end_x = e.x;
               end_y = e.y;
               txtbx_drag.text = "x = {end_x} y = {end_y}";
 
    }
             } into contenu;
}
 
Stage {
    title: "Parcours d'Agility"
    scene: Scene {
        width: 1024
        height: 800
 
        content: bind contenu
 
    }
}

**galien** · 18/07/2010, 01h18

Le problème se situe au niveau du bind de x et y du node par des variables globales, ce qui affecte tous les nodes crées par cette méthode.

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
 
function nouvel_obstacle(): Void{
insert ImageView {
translateX: start_x;
translateY: start_y;
x: bind end_x, y: bind end_y
image: obstacle
onMouseDragged: function(e: MouseEvent): Void {
txtbx_node.text = "{contenu.size()}";
end_x = e.x;
end_y = e.y;
txtbx_drag.text = "x = {end_x} y = {end_y}";
 
}
} into contenu;
}

Je te conseille de donc de suivre le code de cet exemple pour la gestion du déplacement 'drag'n drop'.

Si j'ai bien compris ton problème ceci devrait convenir

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
 
package test;
 
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextBox;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.scene.Group;
 
var coord_x: Number;
var coord_y: Number;
var start_x: Number;
var start_y: Number;
var end_x: Number;
var end_y: Number;
def txtbx_coord = TextBox {
            layoutX: 850;
            layoutY: 100;
            text: "x : {coord_x} y : {coord_y}"
            columns: 15
        }
def txtbx_click = TextBox {
            layoutX: 850;
            layoutY: 150;
            text: "x : {coord_x} y : {coord_y}"
            columns: 15
        }
def txtbx_drag = TextBox {
            layoutX: 850;
            layoutY: 200;
            text: "x : {coord_x} y : {coord_y}"
            columns: 15
        }
def txtbx_node = TextBox {
    layoutX: 850;
    layoutY: 300;
    text: "x : {coord_x} y : {coord_y}"
    columns: 15
}
var index_objet: Integer = 0;
def haie = Image { url: "{__DIR__}Haie.png", }
def passerelle = Image { url: "{__DIR__}Passerelle.png" }
def btn_Haie = Button {
    layoutX: 10;
    layoutY: 10;
    text: "Haie"
    action: function() {
        index_objet = 1;
 
    }
}
def btn_Passerelle = Button {
    layoutX: 75;
    layoutY: 10;
    text: "Passerelle"
    action: function() {
        index_objet = 2;
 
    }
}
 
function nouvel_obstacle(): Void {
    var x: Number;
    var y: Number;
    def iw: ImageView = ImageView {
        translateX: start_x;
        translateY: start_y;
        image: if (index_objet == 1) haie else passerelle;
        onMousePressed: function(e: MouseEvent): Void {
            x = iw.translateX;
            y = iw.translateY;
            iw.toFront();
        }
 
        onMouseDragged: function(e: MouseEvent): Void {
            txtbx_node.text = "{contenu.content.size()}";
            iw.translateX = x + e.dragX;
            iw.translateY = y + e.dragY;
            txtbx_drag.text = "x = {x} y = {y}";
        }
    }
    insert iw into contenu.content;
}
var contenu: Group;
Stage {
    title: "Parcours d'Agility"
    scene: Scene {
        width: 1024
        height: 700
        content: contenu = Group {
            content:[
                Rectangle {
                    x: 0
                    y: 50
                    width: 800
                    height: 400
                    fill: Color.LIGHTGREEN
 
                    onMouseMoved: function(e: MouseEvent): Void {
                        coord_x = e.sceneX;
                        coord_y = e.sceneY;
                        txtbx_coord.text = "x = {coord_x} y = {coord_y}"
                    }
 
                    onMouseClicked: function(e: MouseEvent): Void {
 
                        start_x = e.x;
                        start_y = e.y;
                        nouvel_obstacle();
                    }
                }
                txtbx_coord,
                txtbx_click,
                txtbx_drag,
                txtbx_node,
                btn_Haie,
                btn_Passerelle
            ]
        }
    }
}

**martzray** · 18/07/2010, 08h20

C'était bien ça ! Ca marche !

Merci beaucoup !

Transformation de nodes particuliers dans un groupe

JavaFX

Vue hybride

Discussions similaires

Partager

Partager