我正在尝试为项目创建交互式《权力的游戏》地图。我有一张工作地图。
我想要做的是,当我单击地图中的某个区域时,它将打开不同的图像,并具有不同的可单击区域,例如房屋等。
到目前为止,地图是这样的:
当我单击一个红色正方形时,我想打开一个新的类似图像,只包含该特定区域。是否可以通过在图像上方添加按钮来完成此操作,当我单击该按钮时,它将调用一个将替换图像和内容的类?在尝试并搜索如何执行此操作后,我不知道如何在图像上方获得按钮。
任何建议将不胜感激。我是编程新手。
这是我到目前为止的代码;
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;
}
}
最佳答案
如果图片的来源是SVG,我会在SVG绘图应用程序(例如inkscape)中为各个区域的形状分配ID。使用SVG2FXML¹之类的工具,您可以轻松地通过FXMLLoader²加载它。通过在简单的编辑器中编辑源代码来添加onClick方法,或者在加载的节点树中搜索ID,并以编程方式附加处理程序。
这样,您就无需使用红色正方形按钮,并且可以使整个区域对用户的输入做出反应。
¹https://github.com/grmartin/SVG2FXML-Extended
²我不知道转换器是否能够将所有SVG转换为相应的FXML。