javafxstagedimensionscene

View of the application javafx


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.


Solution

  • 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); }  
    }
    

    pannable

    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.