JavaFX应用可缩放：字体与图片大小范围限制实现求助

问题分析 #

当前代码中字体大小绑定直接基于窗口宽高之和计算，未做范围限制，且因输出小数位过多导致字体频繁细微变化；同时图片未实现随窗口动态缩放及大小限制。

修正方案 #

1. 字体大小修正与范围限制 #

• 使用范围钳制限制字体大小的最小/最大值，避免过小或过大
• 格式化字体大小字符串，减少小数位数，避免样式频繁更新
• 改用窗口较小边的比例计算缩放，避免宽高差异过大时字体失衡

2. 图片缩放与范围限制 #

• 将ImageView的fitHeight和fitWidth绑定到统一缩放比例
• 同样通过范围钳制限制图片的最小/最大尺寸，保证显示效果

修改后的代码 #

FXFontBindApp.java #

package how.to.resize.in.java.fx;

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.beans.property.DoubleProperty;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class FXFontBindApp extends Application {
    private DoubleProperty fontSize = new SimpleDoubleProperty(10);
    // 定义字体和图片的大小范围
    private static final double MIN_FONT_SIZE = 10;
    private static final double MAX_FONT_SIZE = 24;
    private static final double MIN_IMAGE_SIZE = 12;
    private static final double MAX_IMAGE_SIZE = 28;

    @Override
    public void start(Stage primaryStage) throws Exception {
        FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("/FontResizeExample.fxml"));
        StackPane pane = fxmlLoader.load();
        FXFontBindController controller = fxmlLoader.getController();
        Scene scene = new Scene(pane);
        primaryStage.setScene(scene);
        primaryStage.setTitle("Font Resize Example");

        // 基于窗口较小边计算缩放比例，限制字体范围
        fontSize.bind(Bindings.createDoubleBinding(() -> {
            double scaleFactor = Math.min(scene.getWidth(), scene.getHeight()) / 40;
            return Math.max(MIN_FONT_SIZE, Math.min(MAX_FONT_SIZE, scaleFactor));
        }, scene.widthProperty(), scene.heightProperty()));

        // 格式化字体大小为一位小数，避免频繁样式更新
        pane.styleProperty().bind(Bindings.concat("-fx-font-size: ", fontSize.asString("%.1f")));

        // 绑定图片大小到字体比例，并限制范围
        controller.getLoginImageView().fitHeightProperty().bind(
                Bindings.clamp(MIN_IMAGE_SIZE, fontSize.multiply(0.8), MAX_IMAGE_SIZE)
        );
        controller.getLoginImageView().fitWidthProperty().bind(
                Bindings.clamp(MIN_IMAGE_SIZE, fontSize.multiply(0.8), MAX_IMAGE_SIZE)
        );

        primaryStage.show();
    }
}

FXFontBindController.java #

package how.to.resize.in.java.fx;

import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.image.ImageView;

import java.net.URL;
import java.util.ResourceBundle;

public class FXFontBindController implements Initializable {
    @FXML
    private ImageView loginImageView;

    public ImageView getLoginImageView() {
        return loginImageView;
    }

    @Override
    public void initialize(URL location, ResourceBundle resources) {

    }
}

FontResizeExample.fxml（修改ImageView的fx:id） #

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

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

<?import javafx.collections.FXCollections?>
<?import java.lang.String?>
<StackPane fx:id="stackPane" stylesheets="@root.css" xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml" fx:controller="how.to.resize.in.java.fx.FXFontBindController">
    <AnchorPane fx:id="anchorPane">
        <VBox fx:id="outerVBox" spacing="10.0" AnchorPane.bottomAnchor="10.0" AnchorPane.leftAnchor="10.0" AnchorPane.rightAnchor="10.0" AnchorPane.topAnchor="10.0">
            <VBox fx:id="header" alignment="TOP_CENTER" VBox.vgrow="ALWAYS">
                <Label fx:id="headerTitle" styleClass="title" text="Please enter username and password"/>
            </VBox>
            <VBox fx:id="enterRootPasswords" alignment="CENTER" VBox.vgrow="ALWAYS">
                <VBox fx:id="rootPasswordFields" spacing="5.0" VBox.vgrow="ALWAYS">
                    <PasswordField fx:id="pin1" promptText="Pin" />
                    <HBox VBox.vgrow="ALWAYS">
                        <Region HBox.hgrow="ALWAYS" />
                        <Hyperlink fx:id="forgotPassword" alignment="CENTER" text="Forgot Password?" textAlignment="JUSTIFY" HBox.hgrow="ALWAYS" />
                    </HBox>
                </VBox>
            </VBox>
            <VBox alignment="CENTER" VBox.vgrow="ALWAYS">
                <VBox alignment="CENTER" VBox.vgrow="ALWAYS">
                    <Label fx:id="selectCardReaderLabel" text="Select Smart Card Reader" />
                    <ComboBox fx:id="selectCardReaderCombo" promptText="Select Smart Card Reader">
                        <items>
                            <FXCollections fx:factory="observableArrayList">
                                <String fx:value="Three"/>
                                <String fx:value="Two"/>
                                <String fx:value="One"/>
                            </FXCollections>
                        </items>
                    </ComboBox>
                </VBox>
            </VBox>
            <VBox fx:id="footer" alignment="BOTTOM_CENTER" VBox.vgrow="ALWAYS">
                <HBox fx:id="hBoxOkCancel" VBox.vgrow="ALWAYS">
                    <Region HBox.hgrow="ALWAYS" />
                    <Button fx:id="btnLogin" graphicTextGap="10.0" text="OK" HBox.hgrow="ALWAYS" VBox.vgrow="ALWAYS">
                        <graphic>
                            <ImageView fx:id="loginImageView" fitHeight="16.0" fitWidth="16.0" pickOnBounds="true" preserveRatio="true">
                                <Image url="@hook.png" />
                            </ImageView>
                        </graphic>
                    </Button>
                </HBox>
            </VBox>
            <padding>
                <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
            </padding>
        </VBox>
    </AnchorPane>
</StackPane>

关键说明 #

• 字体计算改用窗口最小边的比例，避免窗口拉伸时字体失衡
• 通过范围钳制严格限制字体和图片的大小范围，保证界面可读性
• 格式化字体大小字符串，减少样式更新频率，消除细微变化问题
• 图片绑定到字体比例，保证界面元素缩放一致性

内容的提问来源于stack exchange，提问作者Billie