使图像“环绕”屏幕。 JavaFX的 [英] Having an image "wrap around" the screen. JavaFX

问题描述

许多在线地图都有这个功能，当一个人到达图像的左/右端时，他们发现自己正在看另一端。这是如何在JavaFX中实现的并且它与scrollPane兼容？另外，缠绕时我会看原始图像或图像的副本（前者更可取）？如果对我特别想要完成的内容有任何疑问，请在下面提问。

Many online maps have this feature where when one reaches the left/right end of an image they find themselves looking at the opposite end. How is this implementable in JavaFX and is it compatible with a scrollPane? In addition, when wrapped around will I be looking at the original image or a copy of the image(with the former preferable)? If there are any questions about what I am specifically trying to accomplish ask below.

推荐答案

你可以显示相同的图像在多个 ImageView 中。这样，图像只在内存中存储一​​次。

You could show the same Image in multiple ImageViews. This way the image is stored only once in memory.

ScrollPane 在这里不是一个好选择，因为你正在尝试创建一个 ScrollPane 不支持的无限窗格。

ScrollPane wouldn't be a good choice here, since you're trying to create a "infinite" pane which ScrollPane does not support.

以下示例允许用户移动2 x 2网格的蒙娜丽莎并调整窗口的整个内容区域覆盖图像。根据图像大小和可见区域，您可能需要更大的网格。 （检查从左上角开始在x / y方向上适合可见区域的图像数量，然后在这些数字上加一个以确定所需的网格尺寸。）

The following example allows the user to move a 2 x 2 grid of Mona Lisas and adjusts the whole content area of the window is covered with images. Depending on the image size and the visible area you may need a larger grid. (Check how many images fit into the visible area in x / y direction starting at the top left and then add one to these numbers to determine the required grid size.)

@Override
public void start(Stage primaryStage) {
    Image image = new Image("https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg");
    GridPane images = new GridPane();

    for (int x = 0; x < 2; x++) {
        for (int y = 0; y < 2; y++) {
            images.add(new ImageView(image), x, y);
        }
    }

    Pane root = new Pane(images);
    images.setManaged(false);

    class DragHandler implements EventHandler<MouseEvent> {

        double startX;
        double startY;
        boolean dragging = false;

        @Override
        public void handle(MouseEvent event) {
            if (dragging) {
                double newX = (event.getX() + startX) % image.getWidth();
                double newY = (event.getY() + startY) % image.getHeight();

                if (newX > 0) {
                    newX -= image.getWidth();
                }

                if (newY > 0) {
                    newY -= image.getHeight();
                }
                images.setLayoutX(newX);
                images.setLayoutY(newY);
            }
        }

    }

    DragHandler handler = new DragHandler();
    root.setOnMouseDragged(handler);
    root.setOnDragDetected(evt -> {
        images.setCursor(Cursor.MOVE);
        handler.startX = images.getLayoutX() - evt.getX();
        handler.startY = images.getLayoutY() - evt.getY();
        handler.dragging = true;
    });

    root.setOnMouseReleased(evt -> {
        handler.dragging = false;
        images.setCursor(Cursor.DEFAULT);
    });

    Scene scene = new Scene(root, 400, 400);

    primaryStage.setScene(scene);
    primaryStage.setResizable(false);
    primaryStage.show();
}

这篇关于使图像“环绕”屏幕。 JavaFX的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！