Imprimir

Cuando se crea un elemento gráfico en JavaFX que está compuesto de varios elementos a su vez, puede ser necesario agrupar todos esos elementos con idea de poder, por ejemplo, mover todo el conjunto simultáneamente sin tener que mover cada uno de sus elementos por separado.

En este caso vamos a suponer que se desea tener un diseño del personaje de un juego como el siguiente:

Captura de pantalla 2019 01 13 a las 21.29.16 2af3d

Se puede apreciar que el personaje está formado por varios elementos gráficos: rectángulos para el cuerpo, las piernas y el pañuelo, un círculo para el ojo y polígonos para los picos del pañuelo.

Si no se agruparan todos esos elementos, en caso de querer desplazar el personaje por la pantalla se tendría que ir desplazando cada uno de esos elementos, lo que sería un trabajo bastante arduo.

JavaFX ofrece la clase Group para agrupar elementos de este tipo. Por tanto, una vez que se hayan creado todos los elementos del personaje, se añadirán a un objeto de la clase Group dentro de su lista de hijos. Como es habitual en JavaFX, eso se hará realizando una llamada al método add() sobre la lista de hijos del grupo que se debe obtener con el método getChildren() de la clase Group.

Group groupPerson = new Group();
groupPerson.getChildren().add(rectangleCuerpo);

Recuerda que todos los elementos que se deseen mostrar en pantalla deberán añadirse al contenedor principal que se haya asignado a la aplicación, por lo que este grupo deberá añadirse también a la lista de hijos de dicho contenedor con algo como:

root.getChildren().add(groupPerson);

Una vez que se ha creado el grupo, se puede mover todo el conjunto con los métodos setlayoutX() y setLayoutY() de la clase Group de JavaFX.

groupPerson.setLayoutX(50);
groupPerson.setLayoutY(50);

Es importante tener en cuenta que esas coordenadas corresponden a la esquina superior izquierda del grupo, por lo que debes posicionar cada uno de los elementos del conjunto teniendo en cuenta que la posición de referencia será la (0, 0). En este ejemplo se ha considerado que la posición de referencia sea la esquina superior izquierda del bloque del cuerpo, por lo que las coordenadas de cada elemento del dibujo se han asignado a partir de esa posición. En la siguiente imagen se muestra cómo se ha dibujado el personaje si no se hace ningún desplazamiento sobre el conjunto. Observa que se ha colocado en la esquina superior izquierda el punto de referencia que se tomará para posicionar el conjunto:

Captura de pantalla 2019 01 13 a las 21.52.47 98757

A continuación se muestra el ejemplo completo que genera el conjunto propuesto:

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Polygon;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class Main extends Application {
    
    @Override
    public void start(Stage primaryStage) {
        // Elementos del personaje
        Rectangle rectangleCuerpo = new Rectangle(0, 0, 48, 60);
        Rectangle rectanglePierna1 = new Rectangle(1, 50, 10, 20);
        Rectangle rectanglePierna2 = new Rectangle(37, 50, 10, 20);
        Circle circleOjo = new Circle(32, 22, 5);
        Rectangle rectanglePanuelo = new Rectangle(-1, 7, 50, 13);
        Polygon polygonPico1 = new Polygon(new double[]{
            0.0, 15.0,
            -10.0, 32.0,
            5.0, 30.0 });
        Polygon polygonPico2 = new Polygon(new double[]{
            5.0, 13.0,
            -20.0, 10.0,
            -13.0, 25.0 });

        // Colorear cada elemento
        rectangleCuerpo.setFill(Color.BLACK);    
        rectanglePierna1.setFill(Color.BLACK);    
        rectanglePierna2.setFill(Color.BLACK);    
        circleOjo.setFill(Color.WHITE);        
        rectanglePanuelo.setFill(Color.RED);
        polygonPico1.setFill(Color.RED);        
        polygonPico2.setFill(Color.RED);

        // Agrupar todos los elementos
        Group groupPerson = new Group();
        groupPerson.getChildren().add(rectangleCuerpo);
        groupPerson.getChildren().add(rectanglePierna1);
        groupPerson.getChildren().add(rectanglePierna2);
        groupPerson.getChildren().add(circleOjo);
        groupPerson.getChildren().add(rectanglePanuelo);
        groupPerson.getChildren().add(polygonPico1);
        groupPerson.getChildren().add(polygonPico2);
        
        // Posicionar el grupo en la pantalla
        groupPerson.setLayoutX(50);
        groupPerson.setLayoutY(50);
        
        // Añadir el grupo al contenedor principal
        Pane root = new Pane();
        root.getChildren().add(groupPerson);
        
        // Crear y mostrar el escenario
        Scene scene = new Scene(root, 300, 250);
        primaryStage.setTitle("Ejemplo Group JavaFX");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
    
}

Este será el resultado final:

Captura de pantalla 2019 01 13 a las 22.02.00 096d4