Discussion :

[fouckybzh]

Bonjour à tous

L'un de vous connaitrait-il la différence entre les propriétés layoutX/layoutY et translateX/translateY. Je ne trouve pas beaucoup de doc sur le sujet, les définitions données dans la doc de l'api sont quasiment les mêmes :

layoutX/layoutY : Defines the X/Y coordinate of the translation that is added to the transformed coordinates of this Node for the purpose of layout

translateX/translateY : Defines the X/Y coordinate of the translation that is added to the transformed coordinates of this Node

J'avoue ne pas bien comprendre la subtilité entre les deux. Quelqu'un peut-il éclairer ma lanterne ?

Merci beaucoup.

[PhiLho]

Bonne question.
Personnellement, j'aimerai savoir à quoi servent les variables x, y de Text (et quelques autres Nodes) alors qu'on a translateX/Y...
Bon, pour le Text, il doit y avoir des subtilités avec le textOrigin. Mais pour Rectangle, par exemple ? Raisons historiques ?

Bref, pour répondre à ta question, je te renvoie aux notes de release de JavaFX 1.2: "JavaFX 1.2 Technology: Features and Enhancements"
"The preferred method to position a node for layout is layoutX and layoutY instead of using translateX and translateY. While translateX and translateY most likely will work, layoutX and layoutY will have better performance. Also, if you do a legitimate translateX and translateY, the original value is lost if you did not use layoutX and layoutY."
J'ai pas bien compris la dernière phrase...

En gros, ils déprécient translateX/Y...

[bouye]

Pour être un peu plus précis layoutX et layoutY sont appliqués dans le calcul des coordonnées APRES les valeurs des transformations (translate, scale, rotate).

Lors du passage de mon code en 1.1.x -> 1.2.x j'ai replacé persque partout les translate par les layout, sauf aux endroits où je faisais effectivement une translation.

Perso j'aurai préféré qu'il virent ces valeurs et qu'on utilise des transformations affines à la place mais d'un autre coté créer des objets et des matrices dédiés à ces transfos aurait sans doute été plus lent tout en bouffant plus de mémoire.

[PhiLho]

Oui, ces questions de coordonnées (et dimensions) avant/après transformations sont assez obscures, même après avoir lu plusieurs articles sur le sujet, y compris l'excellent démo Node Bounding Rectangles & Coordinates.
Parfois j'ai l'impression que les auteurs de JavaFX eux-même n'ont pas toujours des idées claires à ce sujet (et quelques bugs n'arrangent pas les choses).
Et les indications trop concises de l'API, comme "Defines the X coordinate of the upper-left corner of the rectangle.", "Defines the X coordinate of the translation that is added to the transformed coordinates of this Node for the purpose of layout." ou "Defines the X coordinate of the translation that is added to the transformed coordinates of this Node." sont parfois un peu légères (coordonnées par rapport à quoi ? la scène ? le parent ?).

Et comme tu dis, l'interaction entre variables directes (x, translateX) et indirectes (transforms) est assez complexe. Ces variables directes sont pratiques pour des questions d'efficacité et de concision du code, mais il y a une certaine redondance.

[fouckybzh]

J'en conclus donc qu'il est préférable d'utiliser LayoutX pour repositionner un noeud .... Merci pour ces informations . Je marque ce Post en résolu.

[PhiLho]

Aha, l'article JavaFX1.2: Layout du blog d'Amy Fowler éclaircit quelque peu la distinction :

This separation allows layoutX/layoutY to be used for controlling a node's stable layout position and leaves translateX/translateY for use in dynamic adjustments to that position. [...] modifies translateX/translateY to animate the position of the node without disturbing the surrounding layout (e.g. great for flying, bouncing, or jiggling animations).

Je note aussi qu'en 1.2.1, vpos fonctionne enfin...

J'ai un petit code de test :

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
class Rect extends CustomNode
{
  public var height: Number;
  public var fill: Paint;
 
	override protected function create(): Node
  {
    Rectangle
    {
      width: 50, height: height, fill: fill
      onMousePressed: function (evt: MouseEvent): Void
      {
        var r = evt.node.parent as Rect;
        println("{r} T {r.translateY} L {r.layoutY} M {r.layoutBounds.minY}");
      }
    }
  }
}
 
var scene: Scene;
Stage
{
  x: 0
  title: "Test"
  scene: scene = Scene
  {
    width:	500
    height: 500
    var vr: Rect;
    content:
    [
      HBox
      {
        translateX: 50
        translateY: 100
        spacing: 10
        content:
        [
          Rect { height: 200, id: "Ga", fill: Color.RED,
              // No layout, reference...
          },
          Rect { height: 50, id: "Bu", fill: Color.GREEN,
              translateY: 50
          },
          Rect { height: 50, id: "Zo", fill: Color.BLUE,
              layoutY: 50
          },
          vr = Rect { height: 50, id: "ZoV", fill: Color.VIOLET,
//~               layoutY: bind 50 - vr.layoutBounds.minY // Throws an exception!
              layoutY: 100
              visible: false
          },
          Rect { height: 50, id: "Meu", fill: Color.MAGENTA,
              layoutInfo: LayoutInfo { vpos: VPos.BOTTOM }
          },
          Rect { height: 100, id: "Foo", fill: Color.YELLOW,
              layoutInfo: LayoutInfo { vpos: VPos.CENTER }
          },
          Rect { height: 100, id: "Bar", fill: Color.GRAY,
              layoutInfo: LayoutInfo { vpos: VPos.BASELINE}
          },
          Rectangle
          {
            width: 300, height: 100, fill: Color.rgb(200, 200, 200, 0.5),
            layoutInfo: LayoutInfo { managed: false }
            layoutX: 30, layoutY: 30
          },
        ]
      }
    ]
  }
}