Carte interactive GoT avec JavaFX


J'essaie de créer une carte interactive Game of Thrones pour un projet. J'ai une carte de travail, en quelque sorte.

Ce que je veux faire, c'est que lorsque je clique sur une certaine zone de la carte, cela ouvre une image différente, avec différentes zones cliquables comme des maisons et autres.

Voici à quoi ressemble la carte jusqu'à présent:

entrez la description de l'image ici

Lorsque je clique sur un carré rouge, je veux ouvrir une nouvelle image similaire, avec juste cette région spécifique. Cela pourrait-il être fait en ajoutant un bouton au-dessus de l'image et quand je clique dessus, il appellera une classe qui remplacera l'image et d'autres choses? Je ne sais pas comment obtenir un bouton au-dessus de l'image, après avoir essayé et cherché comment le faire.

Tout conseil serait apprécié. Je suis assez nouveau dans la programmation.

Voici le code que j'ai jusqu'à présent;

   import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.*;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;
import javafx.event.*;
import java.util.*;

public class MapDemo extends Application {




public void start (Stage ps) {

ImageView img=new ImageView(getClass().getResource("map.jpg").toExternalForm());

List<County> alltowns = new ArrayList<County>();

alltowns.add(new County("The North",165,265));
alltowns.add(new County("The Vale",265,415));
alltowns.add(new County("Crownlands",280,520));
alltowns.add(new County("Stormlands",280,635));
alltowns.add(new County("Dorne",190,725));
alltowns.add(new County("The Reach",150,600));
alltowns.add(new County("Westerland",135,505));
alltowns.add(new County("Riverlands",180,440));
alltowns.add(new County("Iron Isles",80,400));









img.setOnMouseMoved(e->{
    ps.setTitle(e.getX()+", "+e.getY());
});


img.setOnMousePressed(e->{
    for(County t : alltowns)
    {
        double dist=Math.sqrt(Math.pow(t.getX()-e.getX(),2)+Math.pow(t.getY()-e.getY(),2));

        if(dist<=20)
            System.out.println(t.getName());
    }
});


ps.setScene(new Scene(new Group(img),413,796));
ps.show();

}

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

}

//---------------------------------------------

class County {
    String name;
    double x,y;

    public County(String n, double a, double b){
        name=n;
        x=a;
        y=b;
    }

    public String getName() {
        return name;

    }

    public double getX() {
        return x;
    }

    public double getY() {
        return y;


    }

}
Author: JustJayme, 2017-04-30

1 answers

Si la source de l'image est en SVG, j'attribuerais des ID aux formes des différentes régions dans une application de dessin SVG (par exemple inkscape). Avec des outils comme SVG2FXML1, vous pouvez facilement le charger avec le FXMLLoader2. Ajoutez les méthodes OnClick en éditant la source dans un éditeur simple, ou recherchez les ID dans l'arborescence des nœuds chargés et attachez les gestionnaires par programme.

De cette façon, vous évitez le besoin de boutons carrés rouges et vous faites réagir toute la région aux entrée.

1 https://github.com/grmartin/SVG2FXML-Extended

2 Je ne sais pas si le convertisseur est capable de convertir tous les SVGs en un FXML correspondant.

 0
Author: M. le Rutte, 2017-05-01 16:27:02