在JavaFx中缩放:当内容大小超过ScrollPane视口时,ScrollEvent被消耗

10

我有一个应用程序需要在ScrollPane内部进行缩放,但是使用当前的方法仍然存在两个挑战。为了复制问题,我编写了一个小应用程序ZoomApp,在下面可以找到其代码。其有限的功能允许在一些任意形状上进行放大和缩小(使用Ctrl +鼠标滚轮)。当缩放内容超出窗口范围时,滚动条应该出现。

挑战1:当滚动条因为innerGroup大小的缩放而出现时,ScrollEvent不再到达我的ZoomHandler。相反,我们开始向下滚动窗口,直到达到底部,再次缩放时才能正常工作。我认为可能

scrollPane.setPannable(false);

会有所不同,但没关系。如何避免这种不必要的行为?

挑战2. 如果不用在innerGroup的左上角绘制一个带有所需差值的像素,那么我该如何将其置中于scrollPane中?

顺便提一句,根据ScrollPane的JavaDoc: "如果应用程序希望滚动基于节点的可视范围(对于缩放内容等),则需要在一个Group中包装滚动节点"。这就是为什么我在ScrollPane内部有一个innerGroupouterGroup的原因。

任何指导我找到解决方案的建议都将不胜感激,因为我是JavaFX的新手。

import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.SceneBuilder;
import javafx.scene.control.ScrollPane;
import javafx.scene.input.ScrollEvent;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

/**
 * Demo of a challenge I have with zooming inside a {@code ScrollPane}.
 * <br>
 * I am running JavaFx 2.2 on a Mac. {@code java -version} yields:
 * <pre>
 * java version "1.7.0_09"
 * Java(TM) SE Runtime Environment (build 1.7.0_09-b05)
 * Java HotSpot(TM) 64-Bit Server VM (build 23.5-b02, mixed mode)
 * </pre>
 * 6 rectangles are drawn, and can be zoomed in and out using either
 * <pre>
 * Ctrl + Mouse Wheel
 * or Ctrl + 2 fingers on the pad.
 * </pre>
 * It reproduces a problem I experience inside an application I am writing.
 * If you magnify to {@link #MAX_SCALE}, an interesting problem occurs when you try to zoom back to {@link #MIN_SCALE}. In the beginning
 * you will see that the {@code scrollPane} scrolls and consumes the {@code ScrollEvent} until we have scrolled to the bottom of the window.
 * Once the bottom of the window is reached, it behaves as expected (or at least as I was expecting).
 *
 * @author Skjalg Bjørndal
 * @since 2012.11.05
 */
public class ZoomApp extends Application {

    private static final int WINDOW_WIDTH = 800;
    private static final int WINDOW_HEIGHT = 600;

    private static final double MAX_SCALE = 2.5d;
    private static final double MIN_SCALE = .5d;

    private class ZoomHandler implements EventHandler<ScrollEvent> {

        private Node nodeToZoom;

        private ZoomHandler(Node nodeToZoom) {
            this.nodeToZoom = nodeToZoom;
        }

        @Override
        public void handle(ScrollEvent scrollEvent) {
            if (scrollEvent.isControlDown()) {
                final double scale = calculateScale(scrollEvent);
                nodeToZoom.setScaleX(scale);
                nodeToZoom.setScaleY(scale);
                scrollEvent.consume();
            }
        }

        private double calculateScale(ScrollEvent scrollEvent) {
            double scale = nodeToZoom.getScaleX() + scrollEvent.getDeltaY() / 100;

            if (scale <= MIN_SCALE) {
                scale = MIN_SCALE;
            } else if (scale >= MAX_SCALE) {
                scale = MAX_SCALE;
            }
            return scale;
        }
    }

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

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

        final Group innerGroup = createSixRectangles();
        final Group outerGroup = new Group(innerGroup);

        final ScrollPane scrollPane = new ScrollPane();
        scrollPane.setContent(outerGroup);
        scrollPane.setOnScroll(new ZoomHandler(innerGroup));

        StackPane stackPane = new StackPane();
        stackPane.getChildren().add(scrollPane);

        Scene scene = SceneBuilder.create()
                .width(WINDOW_WIDTH)
                .height(WINDOW_HEIGHT)
                .root(stackPane)
                .build();

        stage.setScene(scene);
        stage.show();
    }

    private Group createSixRectangles() {
        return new Group(
                createRectangle(0, 0), createRectangle(110, 0), createRectangle(220, 0),
                createRectangle(0, 110), createRectangle(110, 110), createRectangle(220, 110),
                createRectangle(0, 220), createRectangle(110, 220), createRectangle(220, 220)
        );
    }

    private Rectangle createRectangle(int x, int y) {
        Rectangle rectangle = new Rectangle(x, y, 100, 100);
        rectangle.setStroke(Color.ORANGERED);
        rectangle.setFill(Color.ORANGE);
        rectangle.setStrokeWidth(3d);
        return rectangle;
    }
}
3个回答

13

好的,我终于找到了解决我的问题的方法。

只需替换这一行:

   scrollPane.setOnScroll(new ZoomHandler(innerGroup));

与,用

    scrollPane.addEventFilter(ScrollEvent.ANY, new ZoomHandler(innerGroup));

现在它按预期工作,不需要神秘矩形或其他黑科技。

那么下一个问题是为什么?根据Processing Events的这篇优秀文章

事件过滤器在事件捕获阶段执行。

事件处理程序在事件冒泡阶段执行。

我认为这就是造成差别的原因。


不错 Skjalg,我应该多读一些手册 :) 或者只是问问 stackoverflow ... 这听起来更容易。感谢您发布这个问题。 - Bhupen

2
以下解决方法似乎能够提供更好的结果:
  1. Set onscroll event on the outer group to steal the event from the scroll pane.
  2. Add a opaque rectangle which covers the whole screen, so that you don't miss the scroll event. Apparently you can miss scroll event if you don't hit a shape.

    Rectangle opaque = new Rectangle(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);
    opaque.setOpacity( 0 );
    outerGroup.getChildren().add( opaque );
    outerGroup.setOnScroll(new ZoomHandler(innerGroup));
    

+1 @Bhupendra 解决了这个问题。我仍然认为应该能够在不添加这个额外的矩形的情况下修复它。直觉上,这似乎有些不对:““显然,如果您没有命中形状,您可能会错过滚动事件””,但随着我对JavaFx2中的事件处理越来越熟悉,这可能会更清晰。除了您的更改之外,还必须考虑到窗口将调整大小,因此opaque矩形也必须调整大小。 - Skjalg
我用Pane替换了内部的Group,这样滚动事件就不会在形状之间丢失,但是现在事件仅限于内部组的大小。让我知道你发现了什么。谢谢。 - Bhupen
我会在@Bhupendra处回复我采取的方法。现在我在代码的另一个部分,可能需要几天时间。感谢您的关注。 - Skjalg

0
在我的情况下,我已经更新了以下的语句:
if (scrollEvent.isControlDown()) {
改为
if (!scrollEvent.isConsumed()) {... 除了您发布的更改之外... :)

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接