Canvas 缩放后如何调整 Scroll Pane 大小，消除空白区域？

2024-03-11 00:59:47

## Canvas 缩放后调整 Scroll Pane 大小

### 问题

当你缩小画布（Canvas）时，在其所在位置的 Scroll Pane 中会出现空白区域。

### 解决方法

为了消除空白区域，我们需要调整 Scroll Pane 的大小以匹配 Canvas 的大小。为此，我们需要：

监听 Canvas 的尺寸变化：

canvas.widthProperty().addListener((obs, oldVal, newVal) -> resizeScrollPane());
canvas.heightProperty().addListener((obs, oldVal, newVal) -> resizeScrollPane());

调整 ScrollPane 大小以匹配 Canvas 大小：

private void resizeScrollPane() {
    scrollPane.setPrefWidth(canvas.getWidth());
    scrollPane.setPrefHeight(canvas.getHeight());
}

### 代码示例

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.control.Button;
import javafx.scene.control.ScrollPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class CanvasZoomScroll extends Application {

    @Override
    public void start(Stage primaryStage) {
        Canvas canvas = new Canvas();
        canvas.setWidth(600);
        canvas.setHeight(400);

        ScrollPane scrollPane = new ScrollPane();
        scrollPane.setContent(canvas);
        scrollPane.setFitToWidth(true);
        scrollPane.setFitToHeight(true);
        scrollPane.setPadding(new Insets(5));

        Button zoomOutButton = new Button("缩小");
        zoomOutButton.setOnAction(e -> {
            canvas.setScaleX(canvas.getScaleX() * 0.8);
            canvas.setScaleY(canvas.getScaleY() * 0.8);
        });

        VBox root = new VBox(5);
        root.getChildren().addAll(scrollPane, zoomOutButton);

        Scene scene = new Scene(root);
        primaryStage.setScene(scene);
        primaryStage.setTitle("Canvas 缩放调整 ScrollPane 大小");
        primaryStage.show();
    }
}