Question

为了实现 minimap 之类的功能，我使用了StackPane在Pane的顶部叠加了ImageView。我将StackPane的缩放x属性和y属性绑定到Slider，以实现缩放效果。我向Circle添加了几个Pane对象。这些圆当然也应该是可缩放的（但确实如此），但在这种情况下，更重要的是，在缩放时，它们应保持在其相对位置。下图显示了到目前为止的GUI外观。

到目前为止，我已经区分出两个有问题的情况。

问题A-纠正位置，但“超出范围”

在这种更简单的情况下，除了放大图像似乎使其超出StackPane的范围外，其他所有操作均正常。结果，您无法再滚动到图像的边框。查看下一个屏幕截图，了解我的意思。

问题B-“范围内”，但位置不正确

为使StackPane适当增长，我将其大小属性绑定到缩放因子乘以图像大小。但是，我非常确定这种方法会以某种方式与底层的坐标结构相混淆，因为现在圆以“> 1”的比例因子“离开”它的位置。上一张屏幕快照中描述了这种行为。

我在下面添加了我的代码。任何帮助将不胜感激：）

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.ScrollPane;
import javafx.scene.control.Slider;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

public class ScalingProblem extends Application {

    private static final String IMAGE_URL = "https://st2.depositphotos.com/3034795/10774/i/950/depositphotos_107745620-stock-photo-labyrinth-or-maze.jpg";

    @Override
    public void start(Stage primaryStage) throws Exception {

        // Prepare the main part of the GUI.
        Image backgroundImage = new Image(IMAGE_URL);
        ImageView imageView = new ImageView(backgroundImage);
        Circle circle = new Circle(40, Color.ORANGE);
        circle.setStroke(Color.BLUE);
        circle.setStrokeWidth(5);
        Pane layer = new Pane(circle);
        StackPane stackPane = new StackPane(imageView, layer);
        ScrollPane scrollPane = new ScrollPane(stackPane);
        scrollPane.setPannable(true);

        // Prepare the controls on the left side.
        Slider xSlider = new Slider();
        Slider ySlider = new Slider();
        Slider radiusSlider = new Slider();
        Slider zoomSlider = new Slider();
        VBox vBox = new VBox(xSlider, ySlider, radiusSlider, zoomSlider);
        vBox.setSpacing(10);
        vBox.setPrefWidth(200);

        // Adjust the sliders.
        adjustSlider(xSlider, 0, 1000, 50);
        adjustSlider(ySlider, 0, 1000, 50);
        adjustSlider(radiusSlider, 0, 100, 15);
        adjustSlider(zoomSlider, 0, 3, 1);
        zoomSlider.setMajorTickUnit(1);
        zoomSlider.setMinorTickCount(1);
        zoomSlider.setShowTickMarks(true);
        zoomSlider.setShowTickLabels(true);

        // Do all necessary binding.
        circle.centerXProperty().bind(xSlider.valueProperty());
        circle.centerYProperty().bind(ySlider.valueProperty());
        circle.radiusProperty().bind(radiusSlider.valueProperty());
        stackPane.scaleXProperty().bind(zoomSlider.valueProperty());
        stackPane.scaleYProperty().bind(zoomSlider.valueProperty());
        /*
         * So far, I always needed to make the StackPane's size grow / shrink depending on the zoom level. If the
         * following two lines are commented out, zooming in will make the ImageView exceed the bounds of the StackPane.
         * As a result, the StackPane does not 'grow' appropriately so that you cannot pan the view to see the edges of
         * the background.
         */
        stackPane.prefWidthProperty().bind(zoomSlider.valueProperty().multiply(backgroundImage.getWidth()));
        stackPane.prefHeightProperty().bind(zoomSlider.valueProperty().multiply(backgroundImage.getHeight()));

        // Piece the GUI together.
        BorderPane root = new BorderPane();
        root.setCenter(scrollPane);
        root.setLeft(vBox);
        root.setPrefHeight(300);
        root.setPrefWidth(500);

        // Show the stage.
        primaryStage.setScene(new Scene(root));
        primaryStage.show();

    }

    private void adjustSlider(Slider slider, double min, double max, double start) {
        slider.setMin(min);
        slider.setMax(max);
        slider.setValue(start);
    }

    public static void main(String[] args) {
        launch();
    }
}

Answer 1

ScrollPane使用未修改的布局范围来确定内容大小。这不包括缩放转换。为防止内容超出可滚动区域，请将缩放后的节点包装在Group中。

像这样修改ScrollPane的创建：

ScrollPane scrollPane = new ScrollPane(new Group(stackPane));

并删除与prefWidth / prefHeight的绑定，即删除以下几行：

stackPane.prefWidthProperty().bind(zoomSlider.valueProperty().multiply(backgroundImage.getWidth()));
stackPane.prefHeightProperty().bind(zoomSlider.valueProperty().multiply(backgroundImage.getHeight()));

JavaFX-ImageView和Pane的边界无法在ScrollPane中正确缩放/缩放

1 个答案: