2

任意の数の行と列を持つGridPaneがあり、各セルにImageViewを入力します。

現在、このGridPaneはAnchorPaneに含まれているため、ウィンドウのサイズが変更されると、GridPaneは細かく拡大または縮小しますが、ImageViewsはそのサイズを変更しません。

ImageViewがGridPaneのセルのサイズになるようにするには、何をする必要がありますか？

4

2 に答える 2

3

これには2つの理由が考えられます。

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);
    }
}

これにより、5x2グリッドのスイッチが作成さImageViewれ、グリッドペインのスペース全体が均等に塗りつぶされます。

2）上記の解決策は画像ビューを拡大しますが、ImageViewクラス自体は指示されるまで画像を通常のサイズを超えて拡大しません。グリッドが拡大したときに画像を拡大したい場合は、バインドする必要がImageView#fitWidthPropertyあります。ImageView#fitHeightProperty

于 2012-12-16T11:28:51.513 に答える
3

私はJavaFXの初心者ですが、同様の問題がありました。BorderPaneを含むAnchorPaneがありました。BorderPaneの中央には、GridPane（gridPaneMaze）が含まれていました。このgridPaneMazeは、配列ImageView [7] [7]画像を使用して、グリッドペインの各セルを正方形の.pngファイルで埋めました。

窓の高さに合わせて画像を変えたいと思いました。正方形を使用したので、列の幅は自動的に変更されます。

最初、ウィンドウのサイズを変更すると、列が画像よりも広くなり、画像の高さが行に対して大きくなりました。

試行錯誤の末、これでうまくいくことがわかりました。

行と列の間でforループトラバースを行い、各セルで対応する画像（常に正方形）を使用してImageview を設定し、この高さバインディングを使用しました（グリッドペインの高さを行数で割ったもの） ）：：

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

widthPropertyを使用して、列数で除算することもできると思います。しかし、ほとんどのモニターは幅よりも高さが小さいので、私は高さを使用しました。

グリッドペイン：

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>

ボーダーペイン：アンカーペインにボーダーペインを追加したので、すべてのアンカーを「0」に設定しました。

GRIDPANE： minWidth0とminHeight0がありました。prefWidth、prefHeight、maxWidth、maxHeightを設定していません。

行：垂直方向の配置を中央に設定するだけです（minHeightなし、maxHeightのprefHeight）

列：水平方向の配置のみを中央に設定しました（minWidthなし、maxWidthのprefWidth）

うまくいけば、これが役立つ...

于 2016-04-27T22:12:50.960 に答える