어떻게 ImageView를 창 크기가 조정될 때 크기를 조정합니까

Question

임의의 수의 행과 열이있는 GridPane이 있고 각 셀을 ImageView로 채 웁니다.

이제이 GridPane은 AnchorPane에 포함되어 있으므로 Window의 크기가 조정되면 GridPane은 잘 확대되거나 축소되지만 ImageViews는 크기를 변경하지 않습니다.

ImageView에서 GridPane의 셀 크기를 사용하려면 어떻게해야합니까?

Answer 1

이것은 두 가지 이유가있을 수 있습니다.

1) 그리드 창의 행 및 열 제약 조건을 정의하지 않았을 수 있습니다. GridPane이 성장하더라도 셀이 반드시 원하는 크기를 초과하지는 않습니다. 이것을 달성하는 가장 좋은 방법은과 같이 백분율 너비/높이 제약 조건을 정의하는 것입니다

public class ImageGrid extends Application { 
    @Override 
    public void start(final Stage stage) throws Exception { 
     final GridPane pane = new GridPane(); 
     for (int i = 0; i < 10; i++) { 
      final ImageView imageView = new ImageView(new Image("...")); 
      pane.getChildren().add(imageView); 
      GridPane.setConstraints(imageView, i%5, i/5); 
     } 

     pane.getColumnConstraints().addAll(
      columnWithPercentage(20), 
      columnWithPercentage(20), 
      columnWithPercentage(20), 
      columnWithPercentage(20), 
      columnWithPercentage(20) 
     ); 

     pane.getRowConstraints().addAll(
       rowWithPercentage(50), 
       rowWithPercentage(50) 
     ); 

     final Scene scene = new Scene(pane); 
     stage.setScene(scene); 
     stage.setWidth(800); 
     stage.setHeight(600); 
     stage.show(); 
    } 

    private ColumnConstraints columnWithPercentage(final double percentage) { 
     final ColumnConstraints constraints = new ColumnConstraints(); 
     constraints.setPercentWidth(percentage); 
     return constraints; 
    } 

    private RowConstraints rowWithPercentage(final double percentage) { 
     final RowConstraints constraints = new RowConstraints(); 
     constraints.setPercentHeight(percentage); 
     return constraints; 
    } 
    public static void main(String[] args) { 
     Application.launch(args); 
    } 
} 

이 똑같이 그리드 패널의 전체 공간을 채울 것입니다 ImageView의 느릅 나무의 5 × 그리드를 생성합니다.

2) 위의 솔루션을 사용하면 이미지보기가 커지지 만 ImageView 클래스 자체는 말할 때까지 일반 크기를 초과하여 이미지를 늘리지 않습니다. 격자가 확장 될 때 이미지의 크기를 조정하려면 ImageView#fitWidthProperty 및 ImageView#fitHeightProperty을 바인딩해야합니다.

Answer 2

저는 JavaFX의 초보자이며 비슷한 문제가 있습니다. BorderPane이 포함 된 AnchorPane이 있습니다. BorderPane의 중앙에는 GridPane (gridPaneMaze)이 포함되어 있습니다. 이 gridPaneMaze는 배열 ImageView [7] [7] 이미지를 사용하여 제 격자판의 각 셀을 사각형 .png 파일로 채 웁니다.

창 높이와 함께 이미지가 변경되기를 원했습니다. 사각형을 사용했기 때문에 열의 너비가 자동으로 변경됩니다.

처음에는 창 크기를 조정할 때 내 열이 내 이미지보다 넓고 이미지의 높이가 행에 비해 커졌습니다. 인 (I의 행과 열 사이 I는 해당 이미지와 이미지 뷰 세트의 각 셀에 대한 루프 이송했다

IMAGES :

시행 착오 후 I 이것은 트릭 한 것으로 항상 사각형) 및 사용이 높이 결합 (I 행의 수에 의해 gridpane의 높이를 나눈 값) :

images[i][j].fitHeightProperty().bind(gridPaneMaze.heightProperty().divide(7)); 
images[i][j].setPreserveRatio(true); 

당신도 열 수에 의해 widthProperty와 격차를 사용할 수 있습니다 추정. 그러나 대부분의 모니터의 너비가 너비보다 작기 때문에 높이를 사용했습니다.

GRIDPANE는 :

나는 FXML 내 gridPane을했지만 그 값에 차이가 없습니다.

<BorderPane AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"> 
<center> 
    <GridPane fx:id="gridPaneMaze" centerShape="false" minHeight="0.0" minWidth="0.0" BorderPane.alignment="TOP_LEFT"> 
     <columnConstraints> 
      <ColumnConstraints halignment="CENTER" /> 
      <ColumnConstraints halignment="CENTER" /> 
      <ColumnConstraints halignment="CENTER" /> 
      <ColumnConstraints halignment="CENTER" /> 
      <ColumnConstraints halignment="CENTER" /> 
      <ColumnConstraints halignment="CENTER" /> 
      <ColumnConstraints halignment="CENTER" /> 
     </columnConstraints> 
     <rowConstraints> 
      <RowConstraints valignment="CENTER" /> 
      <RowConstraints valignment="CENTER" /> 
      <RowConstraints valignment="CENTER" /> 
      <RowConstraints valignment="CENTER" /> 
      <RowConstraints valignment="CENTER" /> 
      <RowConstraints valignment="CENTER" /> 
      <RowConstraints valignment="CENTER" /> 
     </rowConstraints> 
     <children> 
      //... 
     </children> 
     <BorderPane.margin> 
      <Insets left="10.0" top="10.0" /> 
     </BorderPane.margin> 
    </GridPane> 
</center> 

BORDERPANE

: 나는 나의 anchorpane에 borderpane을 추가, 그래서 '0'으로 모든 앵커를 설정합니다.

그리드 펀 :은 minWidth가 0이고 minHeight가 0입니다.prefWidth, prefHeight, maxWidth 또는 maxHeight를 설정하지 않았습니다.

ROWS : 나는 (더 중요 minHeight,의 maxHeight의 prefHeight)

COLUMNS 중심으로 수직 정렬 아무것도 설정되어 있지 : 나는 중심으로 수평 정렬 아무것도 설정하지 (아무 minWidth를,의 maxWidth의 prefWidth)

이 정보가 도움이 되었기를 바랍니다.