1

Boa tarde comunidade,

Ultimamente tenho andado a explorar a vertente javafx e a criar uma aplicação para o meu mestrado. Resumidamente, a aplicação recebe uma imagem do utilizador, e cria uma gridpane por cima da imagem, consoante o número de colunas e linhas que o utilizador pretende. Cada célula da gridpane tem como label o valor 0.

A imagem é exemplo da explicação: inserir a descrição da imagem aqui

Até aqui tudo bem. O que pretendo e não estou a conseguir, é adicionar um mouse event, que sempre que eu clico numa label/célula da gridpane, o valor 0 passe para 1.

package vistas;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.util.ResourceBundle;

import javax.print.DocFlavor.URL;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.RowConstraints;
import javafx.stage.FileChooser;
import principal.main;

public class AreaProjectoController {

    @FXML
    private Button meuBotaoImagem, meuBotaoGrelha, btnLimpaGrelha;

    @FXML
    private ImageView minhaImagem;

    @FXML
    private TextField txtGrelhaLeft, txtGrelhaRight;

    @FXML
    private AnchorPane painelGrelha, painelArea;

    @FXML
    private GridPane painelCriaGrelha;

    public void initialize(URL location, ResourceBundle resources) {}

    public void mostraImagem(ActionEvent evento) throws FileNotFoundException {

        FileChooser imagemEscolhida = new FileChooser();

        // Define a extensão do ficheiro
        FileChooser.ExtensionFilter extFilter = new FileChooser.ExtensionFilter("JPEG/PNG", "*.jpeg", "*.png");
        imagemEscolhida.getExtensionFilters().add(extFilter);

        // abre a janela para procurar uma imagem
        File ficheiro = imagemEscolhida.showOpenDialog(main.getPrimaryStage());

        // O if trata quando se cancela o carregamento de uma imagem
        if(ficheiro != null) {
            Image imagem = new Image(new FileInputStream(ficheiro));
            minhaImagem.setImage(imagem);
            painelGrelha.setVisible(true);
            txtGrelhaLeft.setText("0");
            txtGrelhaRight.setText("0");
        } 

    }

    public void criaGrelha(ActionEvent evento) {

        int txtLeft = 0, txtRight = 0, i = 1, ii = 1;

        ColumnConstraints colunas = null; 
        RowConstraints linhas = null;

        txtLeft = Integer.parseInt(txtGrelhaLeft.getText());
        txtRight = Integer.parseInt(txtGrelhaRight.getText());

        //Este for cria a grelha após receber os valores
        for(i = 1; i <= txtLeft; i++) {
            colunas = new ColumnConstraints();
            colunas.setPercentWidth(25);
            painelCriaGrelha.getColumnConstraints().add(colunas);
        }

        for(ii = 1; ii <= txtRight; ii++) {
            linhas = new RowConstraints();
            linhas.setPercentHeight(25);
            painelCriaGrelha.getRowConstraints().add(linhas);
        }

        Label fillLabel[][] = new Label[txtLeft][txtRight];

        for (int l = 0; l < fillLabel.length; l++) {
            for (int j = 0; j < fillLabel[l].length; j++) {
                fillLabel[l][j] = new Label();
                fillLabel[l][j].setText("0");
                painelCriaGrelha.add(fillLabel[l][j], l, j);
            }
        }

        painelCriaGrelha.setGridLinesVisible(true); //isto faz aparecer as linhas da grelha a preto
        painelArea.setVisible(true);

        System.out.println(fillLabel[2][2]);
    }

    public void limpaGrelha(ActionEvent evento) {

        painelCriaGrelha.getColumnConstraints().clear();
        painelCriaGrelha.getRowConstraints().clear();
        txtGrelhaLeft.setText("0");
        txtGrelhaRight.setText("0");

    }


}

Este é o código que tem as funcionalidades que vemos na imagem. É a classe controller da view. Por que o meu objectivo é seleccionar as labels/células que correspondem à área azul da imagem. De referir que os valores vão para uma matriz. Neste exemplo a matriz está:

0000000000

0000000000

0000000000

0000000000

0000000000

0000000000

0000000000

0000000000

0000000000

0000000000

Mas deveria ficar, após implementação do evento mouse click, algo assim:

0000111111

1111111111

1111111111

1111100011

1111100011

0000000000

0000000000

0000000000

0000000000

0000000000

Obrigado.

1 Resposta 1

0

Pesquisei bastante sobre seu problema e as soluções que eu achei envolviam navegar todos os nós do grid e colocar um onMouseClick em todos os nós (Bem porco na minha opinião). Como não encontrei o que me parece mais correto pro seu caso fiz um workaround que pode resolver seu problema (Ou pelo menos uma boa direção).

@FXML
private GridPane grid;

private ObservableList<ColumnConstraints> columns;
private ObservableList<RowConstraints> rows;


@Override
public void initialize(URL url, ResourceBundle rb) {
    grid.setGridLinesVisible(true);
    columns = grid.getColumnConstraints();
    rows = grid.getRowConstraints();
}

@FXML
public void mudarValorCelula(MouseEvent e){
    Double x, y, columnAcc = 0.0, rowAcc = 0.0;
    int i = 0, j = 0;

    // Pega a posição clicada pelo mouse
    x = e.getX();
    y = e.getY();

    // Calcula em qual coluna o X está
    for (ColumnConstraints c : columns){
        if(columnAcc < x && x < columnAcc + c.getPrefWidth()){
            break;
        }
        j++;
        columnAcc += c.getPrefWidth();           
    }

    // Calcula em qual linha o Y está
    for (RowConstraints c : rows){
        if(rowAcc < y && y < rowAcc + c.getPrefHeight()){
            break;
        }
        i++;
        rowAcc += c.getPrefHeight();           
    }

    // Modificando o elemento correto
    Label l = (Label) grid.getChildren().get(j*columns.size() + i);
    l.setText("1");
}

Também é necessário colocar o método mudarValorCelula no onMouseClick do seu grid:

<GridPane fx:id="grid" layoutX="15.0" layoutY="55.0" onMouseClicked="#mudarValorCelula">

Essa solução presupõe algumas coisas importantes:

  1. Seu grid está inteiramente preenchido com Labels
  2. Os labels estão em ordem de coluna (ver imagem abaixo)
  3. Todos os rows e colunas devem ter sua constraint

Isso acontece porque o método add do grid é dessa forma grid.add(column, row) que é o oposto do que estamos acostumados, então temos que colocar os labels nessa ordem:

inserir a descrição da imagem aqui

Se quiser pegar por row terá que ficar assim (0,0) (1,0) (2,0) (0,1) ... e mudar o i*columns.size() + j

Obs.: Só foi testado com matrizes quadradas, não funciona para outros tipos.

Obs2.: Se você souber o número de colunas a prioi é bom colocar no lugar de columns.size()

O resultado foi o seguite:

inserir a descrição da imagem aqui

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .