Capire le trasformazioni

Altro articolo nella sezione Animation della pagina Learn di JavaFX, dedicato questo a una introduzione alle trasformazioni, il titolo é Understanding Transformations.

JavaFX fornisce un notevole supporto alle funzionalità per la trasformazione di oggetti UI. Come in molte librerie grafiche, le tre principali possibilità di trasformare un oggetto sono relative alla traslazione, scalabilità e rotazione . Ce ne sono poi altre, ma é importante avere una buona conoscenza di queste tre, che sono alla base delle altre possibili trasformazioni.

Il risultato dei nostri esperimenti sarà questa serie di oggetti variamente colorati posti sulla nostra scena ognuno dei quali, tranne il quadrato nero in alto a sinistra, sono modificati per mezzo di traslazione, cambio scala o rotazione, rispetto a un nodo.

Traslazione

Per traslare un oggetto si può assegnare un valore ai suoi attributi translateX e translateY, valori positivi spostano l'oggetto verso destra e il basso rispettivamente.
Nell'esempio il rettangolo rt viene spostato verso destra e verso il basso di 100 pixel rispetto a r:

def r = Rectangle {
   x: 30, y: 10, width: 20, height: 20
}

def rt = Rectangle {
   x: 30, y: 10, width: 20, height: 20
   translateX: 100, translateY: 100
   fill: Color.BROWN
}

Cambio scala

Per far crescere un nodo sulla scena basta agire sulle sue proprietà scaleX e scaleY che agiscono da moltiplicatori per la larghezza e l'altezza, rispettivamente.

Si noti che, al contrario di quanto specificato nell'articolo, il punto fermo dell'oggetto da cui si applica la trasformazione é il suo centro. Probabilmente questo vale per JavaFX 1.2, e nella versione precedente non era così.

Per verificare il comportamento di questa funzionalità ho creato quattro rettangoli in questo modo:

def r12 = Rectangle {
   x: 80, y: 10, width: 20, height: 20
   scaleX: 2
   fill: Color.DARKBLUE;
}

def r13 = Rectangle {
   x: 30, y: 40, width: 20, height: 20
   scaleX: 2
   fill: Color.DARKBLUE;
}

def r31 = Rectangle {
   x: 30, y: 80, width: 20, height: 20
   fill: Color.DARKCYAN;
}

def r32 = Rectangle {
   x: 80, y: 80, width: 20, height: 20
   scaleX: 2
   scaleY: 2
   fill: Color.DARKCYAN;
}

Rotazione

Per far rotare un nodo sulla scena basta assegnare il numero di gradi della rotazione all'attribuito rotate dell'oggetto. Si noti che la rotazione avviene rispetto al centro dell'oggetto stesso.

def rr = Rectangle {
   x: 130, y: 10, width: 20, height: 20
   fill: Color.AQUA
   rotate: 45
}