Question

我使用fitWidth和preserveRatio来调整FXML中ImageView的大小，但图片不会缩放到它，而是显示其完整大小（在我的情况下太大）。如何使用FXML或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开始。

Answer 1

未经过测试，但尝试使用var num = 10, dynar = [...Array(num)].map((_,i) => ++i+""); console.log(dynar);本身的CSS：

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>

Answer 2

如果图片太大，那么，请调整它们的大小！解决方案不好，但总比没有好。

在使用css设置图像的按钮中的`ImageView`中设置图像的大小

2 个答案: