Question

我正在尝试创建一个并排显示2张地图的JavaFx gui。一张地图是城市，而另一张是同一个城市的交通系统。此应用程序的目标是执行以下操作：

当用户点击第一张地图（普通城市地图）中的某个位置时，第二张地图（Trans Map）应在相同的位置或相应位置突出显示。

我已经创建了界面，它显示两个相同的地图，并且能够生成mouseEvent以提取坐标。

问题是，如何点击第二张地图突出显示相同的位置？此外，是否可以在界面上添加缩放功能？

以下是代码：

package hcimetromap;

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ListView;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
import javafx.scene.input.MouseEvent;
import javafx.scene.input.ScrollEvent;

/**
 *
 * @author tharwat
 */
public class HciMetroMap extends Application {

   final int xDiff = 675;
   double x = 0;
   double y = 0;

    @Override public void start(Stage stage) throws Exception{
    stage.setTitle("Baseline");


    StackPane layout = new StackPane();
    layout.getStylesheets().add("mainClass.css");
    layout.getStyleClass().add("main-class");

    Scene scene = new Scene(layout, 1200, 1200);
    scene.getStylesheets().add(
      getClass().getResource("mainClass.css").toExternalForm()
    );

    stage.setScene(scene);
    stage.setResizable(false);
    stage.centerOnScreen();


    scene.setOnMouseClicked(new EventHandler<MouseEvent>() {
            public void handle(MouseEvent me) {
                //log mouse move to console, method listed below
                x = me.getX();
                y = me.getY();
                System.out.println("Mouse moved, x: " +x +", y: " + y);
            }
        });

    stage.show();
  }

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

Associated Css：

.main-class {
  -fx-background-image: url('TransMap.jpg'), url('map1.jpg');
  -fx-background-repeat: stretch;   
  -fx-background-size: 50% 100%, 50% 100%;
  -fx-background-position: right , left ;
  -fx-effect: dropshadow(three-pass-box, black, 30, 0.5, 0, 0); 
  -fx-background-insets: 30;

}

如何使用JavaFX创建交互式SIde-Side Map？

0 个答案: