使用 JavaFX 的交互式 GoT 地图答案

【问题标题】：Interactive GoT map with JavaFX使用 JavaFX 的交互式 GoT 地图
【发布时间】：2017-04-30 20:54:22
【问题描述】：

我正在尝试为一个项目创建一个互动的《权力的游戏》地图。我有一张工作地图，有点。

我想要做的是当我点击地图中的某个区域时，它会打开一个不同的图像，具有不同的可点击区域，如房屋等。

这是目前地图的样子：

当我点击一个红色方块时，我想打开一个新的类似图像，只有那个特定的区域。这可以通过在图像顶部添加一个按钮来完成，当我单击它时，它会调用一个将替换图像和东西的类？在尝试并搜索了如何操作之后，我不知道如何在图像顶部获得一个按钮。

任何建议将不胜感激。我对编程很陌生。

这是我目前的代码；

   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;


    }

}

【问题讨论】：

标签： java javafx interactive

【解决方案1】：

如果图像的来源是 SVG，我会为 SVG 绘图应用程序（例如 inkscape）中各个区域的形状分配 id。使用 SVG2FXML¹ 等工具，您可以使用 FXMLLoader² 轻松加载它。通过在简单的编辑器中编辑源代码来添加 onClick 方法，或者在加载的节点树中搜索 id 并以编程方式附加处理程序。

这样可以避免使用红色方形按钮，并使整个区域对用户的输入做出反应。

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

² 我不知道转换器是否能够将所有 SVG 转换为相应的 FXML。

【讨论】：