2017-04-30 56 views
1

我正在嘗試爲項目創建一個交互式的權力遊戲地圖。我有一張工作地圖。JavaFX的交互式GoT地圖

我想要做的是,當我點擊地圖中的某個區域時,它會打開一個不同的圖像,並有不同的可點擊區域,如房屋等。

這是地圖的樣子至今:

enter image description here

當我點擊一個紅色正方形,我想開闢一個新的類似的形象,只是特定區域。這可以通過在圖像頂部添加一個按鈕來完成,當我點擊它時,它會調用一個將替換圖像和東西的類?我不知道如何在圖像頂部找到一個按鈕,然後嘗試並搜索如何去做。

任何意見,將不勝感激。我對編程頗爲陌生。

這是我到目前爲止的代碼;

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; 


    } 

} 

回答

0

如果圖像的源是在SVG我將在SVG繪圖應用程序(例如Inkscape中)分配ID的各區域的形狀。使用SVG2FXML¹之類的工具,您可以輕鬆地使用FXMLLoader2加載它。可以通過在簡單編輯器中編輯源代碼來添加onClick方法,也可以在加載的節點樹中搜索ID並以編程方式附加處理程序。

這樣可以避免使用紅色方塊按鈕,並且可以讓整個區域對用戶的輸入做出反應。

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

²我不知道是否該轉換器是能夠轉換所有 SVGs到相應FXML的。