View of the application javafx

Question

i was searching in google for hours and i still cant find the right answer, so i have a last chance to come here and ask.

i'm making school year JAVA FX project. I'm using NetBeans.

I have a point that i can see on the application i have. The problem is: I would like to have a big map (background) and I need to be able to move with my view. For example move by 50 to the right (x).

I have Application where I use Stage, Scene, StackPane.

I heard something about Dimensions in Java, but i can't use it in javafx application. Is there something similar, what can I use in my Application?

Thank you very much.

Answer 1

What I think you are asking for is a Scene with a map (represented as an Image) in the background and controls layered on top of the map to allow interaction with the map at certain positions. Your question is a little unclear, so I'm not exactly sure if that is what you are asking.

If so, here is some sample code to implement that.

import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.event.*;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.image.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;

/** Constructs a scene with a pannable Map background. */
public class PannableView extends Application {
  private Image backgroundImage;
  
  @Override public void init() {
    backgroundImage = new Image("https://www.narniaweb.com/wp-content/uploads/2009/08/NarniaMap.jpg");
  }
  
  @Override public void start(Stage stage) {
    stage.setTitle("Drag the mouse to pan the map");
    
    // construct the scene contents over a stacked background.
    StackPane layout = new StackPane();
    layout.getChildren().setAll(
      new ImageView(backgroundImage),
      createKillButton()
    );

    // wrap the scene contents in a pannable scroll pane.
    ScrollPane scroll = createScrollPane(layout);
    
    // show the scene.
    Scene scene = new Scene(scroll);
    stage.setScene(scene);
    stage.show();

    // bind the preferred size of the scroll area to the size of the scene.
    scroll.prefWidthProperty().bind(scene.widthProperty());
    scroll.prefHeightProperty().bind(scene.widthProperty());
    
    // center the scroll contents.
    scroll.setHvalue(scroll.getHmin() + (scroll.getHmax() - scroll.getHmin()) / 2);
    scroll.setVvalue(scroll.getVmin() + (scroll.getVmax() - scroll.getVmin()) / 2);
  }
  
  /** @return a control to place on the scene. */
  private Button createKillButton() {
    final Button killButton = new Button("Kill the evil witch");
    killButton.setStyle("-fx-base: firebrick;");
    killButton.setTranslateX(65);
    killButton.setTranslateY(-130);
    killButton.setOnAction(new EventHandler<ActionEvent>() {
      @Override public void handle(ActionEvent t) {
        killButton.setStyle("-fx-base: forestgreen;");
        killButton.setText("Ding-Dong! The Witch is Dead");
      }
    });
    return killButton;
  }

  /** @return a ScrollPane which scrolls the layout. */
  private ScrollPane createScrollPane(Pane layout) {
    ScrollPane scroll = new ScrollPane();
    scroll.setHbarPolicy(ScrollPane.ScrollBarPolicy.NEVER);
    scroll.setVbarPolicy(ScrollPane.ScrollBarPolicy.NEVER);
    scroll.setPannable(true);
    scroll.setPrefSize(800, 600);
    scroll.setContent(layout);
    return scroll;
  }
  
  public static void main(String[] args) { launch(args); }  
}

For the example use the mouse (or probably touch commands or trackpad scroll gestures - though I haven't a touch screen or trackpad to test it) to drag the map around. Click on the button to "Kill the evil witch".

The solution works by:

1. Creating an ImageView to hold the background map.
2. Constructing the scene contents in a StackPane over the stacked background ImageView.
3. Wrapping the scene in a ScrollPane bound to the scene's size.
4. Setting properties on the ScrollPane to make it pannable.