JavaFX Transformaciones

JavaFX soporta varios tipos de transformaciones, como: rotación, translación, escalado, etc., en este tutorial veremos cada una de ellas como aplicarlas, las clases necesarias se encuentran en el paquete javafx.scene.transform y la clase Transform es la clase base que contiene todos los métodos necesarios para aplicar transformaciones.

Existen dos maneras para crear transformaciones, la primera utilizando los métodos estáticos de la clase Transform, rotate() devuleve un objeto Rotate, translate() crea un objeto Translate, etc., la otra forma es instanciar directamente cada una de estas clases.

double tx = 10.0;
double ty = 10.0;

// dos maneras de crear un objeto Translate
// este representa una traslacion en las coordenadas (X, Y)
Translate translate1 = Transform.translate(tx, ty);
Translate translate2 = new Translate(tx, ty);

Para aplicar la transformación a un Node obtenemos su colección de transformaciones usando getTransforms() luego agregamos las transformaciones necesarias a esta colección, todas las transformaciones que añadimos serán aplicadas.

Otra forma de aplicar transformaciones es por medio de las correspondientes propiedades, a través de sus métodos set, ejemplo: setTranslateX(), setTranslateY(), setRotate(), etc. 

Button btn1 = new Button("Button #1");
Button btn2 = new Button("Button #2");

Translate t = new Translate(20, 20);     
btn1.getTransforms().add(t);

btn2.setTranslateX(140);
btn2.setTranslateY(20);

Pane root = new Pane();
root.getChildren().addAll(btn1, btn2);

Scene scene = new Scene(root, 300, 250);

primaryStage.setTitle("JavaFX Transformaciones");
primaryStage.setScene(scene);
primaryStage.show();

Empecemos a ver los distintos tipos de transformación que podemos aplicar.

Transformación Translate

Esta transformación mueve el Node en las coordenadas X e Y la cantidad establecida, si el objeto se encuentra en la posición (5, 2) y la traslación es (3, 4) la nueva posición se calcula como: (5+3, 2+4) = (8, 6).

Usando el constructor podemos indicar las coordenadas deseadas:

  • Translate()
  • Translate(double x, double y)
  • Translate(double x, double y, double z)

Usando el constructor vacío la traslación por defecto es (0,0)

Transformación Rotate

Esta transformación hace girar los pixeles que forman el Node en un ángulo indicado, también es posible indicar el punto pivote para la rotación.

La clase Rotate dispone de los siguientes constructores:

  • Rotate()
  • Rotate(double angle)
  • Rotate(double angle, double pivotX, double pivotY)
  • Rotate(double angle, double pivotX, double pivotY, double pivotZ)
  • Rotate(double angle, double pivotX, double pivotY, double pivotZ, Point3D axis)
  • Rotate(double angle, Point3D axis)

Primero indicamos el ángulo de rotación seguido de las coordenadas del punto pivote, si lo deseamos.

Transformación Scale

Esta transformación afecta el tamaño de Node, e igual que la rotación también podemos establecer un punto pivote sobre el cual aplicarla.

Constructores de la clase Scale:

  • Scale()
  • Scale(double x, double y)
  • Scale(double x, double y, double z)
  • Scale(double x, double y, double pivotX, double pivotY)
  • Scale(double x, double y, double z, double pivotX, double pivotY, double pivotZ)

El valor por defecto para las coordenadas (X, Y, Z) es 1.0, para el punto pivote es 0.0.

Comentarios

Temas relacionados

Entradas populares de este blog

tkinter Grid

tkinter Canvas

Histogramas OpenCV Python

Python Binance API