我正在尝试为一个项目创建交互式权力游戏 map 。我有一张工作 map 。
我想要做的是,当我单击 map 中的某个区域时,它将打开一个不同的图像,其中包含不同的可点击区域,例如房屋等。
这是 map 目前的样子:
当我单击红色方 block 时,我想打开一个新的相似图像,仅包含该特定区域。是否可以通过在图像顶部添加一个按钮来完成此操作,当我单击该按钮时,它会调用一个将替换图像和其他内容的类?在尝试并搜索如何执行此操作后,我不知道如何在图像顶部添加按钮。
如有任何建议,我们将不胜感激。我对编程还很陌生。
这是我到目前为止的代码;
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 中,我会将 id 分配给 SVG 绘图应用程序(例如 inkscape)中各个区域的形状。借助 SVG2FXML1 等工具,您可以使用 FXMLLoader2 轻松加载它。通过在简单的编辑器中编辑源代码来添加 onClick 方法,或者在加载的节点树中搜索 id 并以编程方式附加处理程序。
这样您就可以避免使用红色方形按钮,并使整个区域对用户的输入使用react。
1 https://github.com/grmartin/SVG2FXML-Extended
² 我不知道转换器是否能够将所有 SVG 转换为相应的 FXML。
关于java - 使用 JavaFX 的交互式 GoT map ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43711216/