Agregar bordes a GridPane JavaFX

Nuestros mejores programadores agotaron sus depósitos de café, por su búsqueda todo el tiempo por la resolución, hasta que Amanda halló el resultado en Bitbucket y hoy la compartimos contigo.

Solución:

no usar setGridLinesVisible(true): la documentación establece explícitamente que esto es solo para depuración.

En su lugar, coloque un panel en todas las celdas de la cuadrícula (incluso en las vacías) y aplique estilo al panel para que pueda ver los bordes. (Esto le da la oportunidad de controlar los bordes con mucho cuidado, para evitar bordes dobles, etc.) Luego, agregue el contenido a cada panel. También puede registrar los oyentes del mouse con el panel, lo que significa que no tiene que hacer las feas matemáticas para averiguar en qué celda se hizo clic.

La forma recomendada de aplicar un borde a cualquier región es usar CSS y un enfoque de “fondo anidado”. En este enfoque, dibuja dos (o más) rellenos de fondo en la región, con diferentes inserciones, dando la apariencia de un borde. Así por ejemplo:

-fx-background-fill: black, white ;
-fx-background-insets: 0, 1 ;

primero dibujará un fondo negro sin inserciones, y luego dibujará un fondo blanco con inserciones de 1 píxel en todos los lados, dando la apariencia de un borde negro de 1 píxel de ancho. Si bien esto puede parecer contrario a la intuición, el rendimiento de esto es (supuestamente) mejor que especificar el borde directamente. También puede especificar una secuencia de cuatro valores para las inserciones para cada relleno, que se interpretan como las inserciones en la parte superior, derecha, inferior e izquierda, respectivamente. Asi que

-fx-background-fill: black, white ;
-fx-background-insets: 0, 0 1 1 0 ;

tiene el efecto de un borde negro a la derecha e inferior, etc.

tampoco estoy seguro SubScene es lo que realmente desea, a menos que tenga la intención de conectar diferentes cámaras a cada celda. Si realmente necesita una subescena, haga que el relleno sea transparente para evitar dibujar sobre los bordes de la celda. Podrías simplemente agregar el Group directamente a cada celda (probablemente podría simplemente agregar el círculo, dependiendo exactamente de lo que necesite…).

Algo como:

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Pane;
import javafx.scene.layout.RowConstraints;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

public class Game2 extends Application
    @Override
    public void start(final Stage stage) throws Exception 
        int rows = 5;
        int columns = 5;

        stage.setTitle("Enjoy your game");

        GridPane grid = new GridPane();
        grid.getStyleClass().add("game-grid");

        for(int i = 0; i < columns; i++) 
            ColumnConstraints column = new ColumnConstraints(40);
            grid.getColumnConstraints().add(column);
        

        for(int i = 0; i < rows; i++) 
            RowConstraints row = new RowConstraints(40);
            grid.getRowConstraints().add(row);
        

        for (int i = 0; i < columns; i++) 
            for (int j = 0; j < rows; j++) 
                Pane pane = new Pane();
                pane.setOnMouseReleased(e -> 
                    pane.getChildren().add(Anims.getAtoms(1));
                );
                pane.getStyleClass().add("game-grid-cell");
                if (i == 0) 
                    pane.getStyleClass().add("first-column");
                
                if (j == 0) 
                    pane.getStyleClass().add("first-row");
                
                grid.add(pane, i, j);
            
        


        Scene scene = new Scene(grid, (columns * 40) + 100, (rows * 40) + 100, Color.WHITE);
        scene.getStylesheets().add("game.css");
        stage.setScene(scene);
        stage.show();
    

    public static class Anims 

        public static Node getAtoms(final int number) 
            Circle circle = new Circle(20, 20f, 7);
            circle.setFill(Color.RED);
            Group group = new Group();
            group.getChildren().add(circle);
//            SubScene scene = new SubScene(group, 40, 40);
//            scene.setFill(Color.TRANSPARENT);
            return group;
        
    

    public static void main(final String[] arguments) 
        Application.launch(arguments);
    

y el css:

.game-grid 
    -fx-background-color: white ;
    -fx-padding: 10 ;

.game-grid-cell 
    -fx-background-color: black, white ;
    -fx-background-insets: 0, 0 1 1 0 ;

.game-grid-cell.first-row 
    -fx-background-insets: 0, 1 1 1 0 ;

.game-grid-cell.first-column 
    -fx-background-insets: 0, 0 1 1 1 ;

.game-grid-cell.first-row.first-column 
    -fx-background-insets: 0, 1 ;

Simplemente agregue un espacio H y V de un ancho de píxel y deje que el color de fondo del panel de la cuadrícula “brille”:

.my-grid-pane 
    -fx-background-color: lightgray;
    -fx-vgap: 1;
    -fx-hgap: 1;
    -fx-padding: 1;

Si el color de fondo del panel de la cuadrícula se extiende desde el exterior más de un píxel (sucederá si su padre es más grande que él), simplemente envuelva la cuadrícula en un Group!

Valoraciones y comentarios

Ten en cuenta dar recomendación a este post si te fue de ayuda.

---

---

Utiliza Nuestro Buscador