按鈕在`ImageView`圖像，其中圖像是使用CSS

設置的集大小我用fitWidth和preserveRatio大小的ImageView在FXML，但圖像不能擴展到它，而是顯示其全尺寸（以過大我的情況）。如何使用FXML或css設置圖像的大小？按鈕在`ImageView`圖像，其中圖像是使用CSS

FXML

<Button 
     fx:id="buttonUp" 
     GridPane.columnIndex="0" 
     GridPane.rowIndex="0" 
     onAction="#buttonUp"> 
    <graphic> 
     <ImageView fitWidth="10.0" pickOnBounds="true" preserveRatio="true"> 
     </ImageView> 
    </graphic> 
</Button>

CSS

#buttonUp { 
    -fx-graphic: url('up.png'); 
} 

#buttonUp:pressed { 
    -fx-graphic: url("up_pressed.png"); 
}

我不想要一個JavaFX代碼解決方案，因爲我要保持我的風格在FXML和CSS。

如果這真的不可能在FXML或css中，那麼我會承認用java做的，在這種情況下只需發表評論。

形象FXML

當我嘗試

<ImageView id="buttonDownImage" fitHeight="40.0" fitWidth="40.0" pickOnBounds="true" preserveRatio="true"> 
    <image> 
     <Image url="resources/down.png" /> 
    </image> 
</ImageView>

然後有如下一個java.lang.IllegalArgumentException: Invalid URL: Invalid URL or resource not found，而我敢肯定，該文件是存在（的CSS可以找到它）和IntellJ自動完成甚至建議在網址中以resources開頭。

來源

2016-10-12 PHPirate

試着用'替換並檢查會發生什麼。 – GOXR3PLUS

@ GoXR3Plus不幸的是，我沒有做任何事情，因爲它只是現在擴展到更大的東西，對我而言，無論如何，縮放都被某種東西否決了。 – PHPirate

看看這個：http://stackoverflow.com/questions/40328355/graphic-automatically-fill-button我認爲在這種情況下最有用的將是'-fx-background-size：contains'。 – Abby

沒有測試過，但試圖利用對ImageView本身的CSS：

<Button 
     fx:id="buttonUp" 
     GridPane.columnIndex="0" 
     GridPane.rowIndex="0" 
     onAction="#buttonUp"> 
    <graphic> 
     <ImageView id="buttonUpGraphic" fitWidth="10.0" pickOnBounds="true" preserveRatio="true"> 
     </ImageView> 
    </graphic> 
</Button>

，然後在CSS：

#buttonUp #buttonUpGraphic { 
    -fx-image: url('up.png'); 
} 

#buttonUp:pressed #buttonUpGraphic { 
    -fx-image: url('up_pressed.png'); 
}

來源

2016-10-12 14:38:50

聽起來像一個計劃，但圖像完全從按鈕中消失，我會試着找出原因。 – PHPirate

如果照片太大，好，然後調整他們！糟糕的解決方案，但總比沒有好。

來源

2016-10-13 15:23:19 PHPirate

按鈕在`ImageView`圖像，其中圖像是使用CSS

回答

相關問題