如何讓圖像適合columnSpan

適合的格子大小我有一個GridPane包含單個視頻上的數據，並在其中與columnSpan="3"其中ImageView。當窗口大小發生變化時，我想讓視頻圖像完美地適合整個第一行。有任何想法嗎？如何讓圖像適合columnSpan

這是我到目前爲止有：

代碼：

<?xml version="1.0" encoding="UTF-8"?> 

<?import javafx.scene.control.*?> 
<?import javafx.scene.text.*?> 
<?import javafx.geometry.*?> 
<?import javafx.scene.image.*?> 
<?import javafx.scene.layout.*?> 

<GridPane fx:id="videoGP" alignment="CENTER" gridLinesVisible="true" prefHeight="315.0" prefWidth="405.0" GridPane.columnIndex="1" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"> 
    <columnConstraints> 
     <ColumnConstraints fillWidth="false" halignment="CENTER" hgrow="ALWAYS" maxWidth="30.0" minWidth="10.0" prefWidth="20.0" /> 
     <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" /> 
     <ColumnConstraints hgrow="SOMETIMES" maxWidth="40.0" minWidth="10.0" prefWidth="100.0" /> 
    </columnConstraints> 
    <rowConstraints> 
     <RowConstraints maxHeight="1000.0" minHeight="10.0" percentHeight="80.0" prefHeight="94.0" valignment="CENTER" vgrow="ALWAYS" /> 
     <RowConstraints maxHeight="37.0" minHeight="0.0" percentHeight="10.0" prefHeight="17.0" vgrow="SOMETIMES" /> 
     <RowConstraints maxHeight="31.0" minHeight="10.0" percentHeight="10.0" prefHeight="20.0" vgrow="SOMETIMES" /> 
    </rowConstraints> 
    <children> 
     <ImageView fx:id="videoImage" fitHeight="181.0" fitWidth="364.0" pickOnBounds="true" preserveRatio="true" GridPane.columnSpan="3" GridPane.halignment="CENTER" GridPane.hgrow="ALWAYS" GridPane.valignment="CENTER" GridPane.vgrow="ALWAYS" StackPane.alignment="CENTER"> 
      <image> 
       <Image url="@../ItTakesTimeToBecomeYoung.jpg" /> 
      </image> 
      <GridPane.margin> 
       <Insets /> 
      </GridPane.margin> 
     </ImageView> 
     <ImageView fitHeight="25.0" fitWidth="25.0" onMouseClicked="#clickInfo" pickOnBounds="true" preserveRatio="true" GridPane.rowIndex="1" GridPane.rowSpan="2"> 
      <image> 
       <Image url="@../Views/Icons/bn_info_normal.png" /> 
      </image> 
      <GridPane.margin> 
       <Insets bottom="4.0" left="4.0" right="4.0" top="4.0" /> 
      </GridPane.margin> 
     </ImageView> 
     <Label fx:id="videoName" text="Video Name" GridPane.columnIndex="1" GridPane.rowIndex="1"> 
      <font> 
       <Font name="System Bold Italic" size="12.0" /> 
      </font> 
      <padding> 
       <Insets bottom="4.0" left="4.0" right="4.0" top="4.0" /> 
      </padding> 
     </Label> 
     <Label fx:id="artistName" text="Artist Name" GridPane.columnIndex="1" GridPane.rowIndex="2"> 
      <padding> 
       <Insets bottom="4.0" left="4.0" right="4.0" top="4.0" /> 
      </padding> 
     </Label> 
     <Label fx:id="videoDuration" alignment="CENTER_RIGHT" prefHeight="13.0" prefWidth="124.0" text="3:49" GridPane.columnIndex="2" GridPane.rowIndex="1"> 
      <padding> 
       <Insets bottom="4.0" left="4.0" right="4.0" top="4.0" /> 
      </padding> 
     </Label> 
     <ImageView fitHeight="25.0" fitWidth="25.0" onMouseClicked="#clickPlay" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.hgrow="ALWAYS" GridPane.valignment="CENTER" GridPane.vgrow="ALWAYS"> 
      <image> 
       <Image url="@../Views/Icons/ic_play.png" /> 
      </image> 
     </ImageView> 
    </children> 
</GridPane>

來源

2016-09-22 Meital

ImageView s爲不能調整大小，但您可以使用父母是調整大小和綁定fitWidth和fitHeight屬性以父母的大小使用expression binding：

下面的例子僅僅是可以用作根場景的大小調整的Stage但是不會發生同樣的效果時，觀察行爲，如果StackPane由Parent調整，像GridPane一個StackPane：

<?xml version="1.0" encoding="UTF-8"?> 

<?import javafx.scene.image.*?> 
<?import javafx.scene.layout.*?> 

<StackPane fx:id="root" xmlns:fx="http://javafx.com/fxml/1"> 
    <children> 
     <ImageView fitWidth="${root.width}" fitHeight="${root.height}" preserveRatio="true"> 
       <!-- ^^ bind to size of node with fx:id="root" ^^ --> 
      <image> 
       <Image url="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"/> 
      </image> 
     </ImageView> 
    </children> 
</StackPane>

來源

2016-09-22 09:34:23 fabian

如何讓圖像適合columnSpan

回答

相關問題