JavaFX实现地图图片上点击两点画线并随缩放同步变化

这个需求的核心是用相对比例坐标替代绝对像素坐标，这样不管地图怎么缩放、平移，线条都能准确对应城市位置。下面是具体的实现步骤和代码示例：

1. 基础准备：定义城市的相对坐标 #

首先你需要提前标记好每个城市在原始地图上的相对位置（以地图左上角为原点，宽高分别归一化为0-1的比例）。比如：

import javafx.geometry.Point2D;
import java.util.HashMap;
import java.util.Map;

// 城市名 -> 相对坐标（x: 0~1, y:0~1）
private static final Map<String, Point2D> CITY_POSITIONS = new HashMap<>();
static {
    CITY_POSITIONS.put("北京", new Point2D(0.25, 0.18));
    CITY_POSITIONS.put("上海", new Point2D(0.62, 0.35));
    CITY_POSITIONS.put("广州", new Point2D(0.58, 0.68));
    // 其他城市以此类推
}

2. 构建UI容器：叠加地图与画布 #

我们用BorderPane作为主容器，里面放一个ScrollPane（支持平移），滚动窗内是自定义的MapCanvasPane——这个面板同时加载地图图片和用于绘制线条的Canvas（Canvas叠在地图上方，透明背景）。

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;

public class MapLineDrawer extends Application {
    private Image mapImage;
    private ImageView mapView;
    private Canvas drawCanvas;
    private GraphicsContext gc;
    private Point2D firstCityPoint; // 记录第一个点击的城市坐标（相对比例）

    @Override
    public void start(Stage primaryStage) {
        // 加载地图图片
        mapImage = new Image("file:src/main/resources/map.png"); // 替换成你的地图路径
        mapView = new ImageView(mapImage);
        mapView.setPreserveRatio(true);
        mapView.setFitWidth(800); // 初始宽度，可调整

        // 创建绘制画布，尺寸和地图一致
        drawCanvas = new Canvas(mapImage.getWidth(), mapImage.getHeight());
        gc = drawCanvas.getGraphicsContext2D();
        gc.setLineWidth(2);
        gc.setStroke(javafx.scene.paint.Color.RED);

        // 自定义面板，叠加地图和画布
        Pane mapPane = new Pane(mapView, drawCanvas);
        mapPane.setPrefSize(mapView.getFitWidth(), mapView.getFitHeight());

        // 监听地图尺寸变化，同步画布尺寸并重绘线条
        mapView.fitWidthProperty().addListener((obs, oldVal, newVal) -> {
            double scale = newVal.doubleValue() / mapImage.getWidth();
            drawCanvas.setWidth(mapImage.getWidth() * scale);
            drawCanvas.setHeight(mapImage.getHeight() * scale);
            redrawLines();
        });

        // 处理点击事件
        mapPane.setOnMouseClicked(e -> {
            // 计算点击位置对应的相对地图比例坐标
            double scaleX = mapView.getFitWidth() / mapImage.getWidth();
            double scaleY = mapView.getFitHeight() / mapImage.getHeight();
            double relativeX = (e.getX() - mapView.getLayoutX()) / scaleX / mapImage.getWidth();
            double relativeY = (e.getY() - mapView.getLayoutY()) / scaleY / mapImage.getHeight();

            // 简化示例：先记录第一个点，再点击第二个点完成连线
            if (firstCityPoint == null) {
                firstCityPoint = new Point2D(relativeX, relativeY);
                System.out.println("选中第一个城市位置：(" + relativeX + ", " + relativeY + ")");
            } else {
                drawLine(firstCityPoint, new Point2D(relativeX, relativeY));
                firstCityPoint = null; // 重置，准备下一次连线
            }
        });

        // 滚动窗支持地图平移
        javafx.scene.control.ScrollPane scrollPane = new javafx.scene.control.ScrollPane(mapPane);
        scrollPane.setPannable(true);

        Scene scene = new Scene(scrollPane, 1000, 800);
        primaryStage.setTitle("地图连线工具");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    // 根据相对坐标绘制线条
    private void drawLine(Point2D p1, Point2D p2) {
        double scaleX = mapView.getFitWidth() / mapImage.getWidth();
        double scaleY = mapView.getFitHeight() / mapImage.getHeight();

        // 转换为当前缩放后的绝对像素坐标
        double x1 = p1.getX() * mapImage.getWidth() * scaleX;
        double y1 = p1.getY() * mapImage.getHeight() * scaleY;
        double x2 = p2.getX() * mapImage.getWidth() * scaleX;
        double y2 = p2.getY() * mapImage.getHeight() * scaleY;

        gc.strokeLine(x1, y1, x2, y2);
    }

    // 缩放后重绘所有线条（实际项目中需维护线条列表）
    private void redrawLines() {
        gc.clearRect(0, 0, drawCanvas.getWidth(), drawCanvas.getHeight());
        // 若需保存多条线，可定义List<LineData>存储，此处遍历重绘即可
    }

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

3. 关键细节说明 #

• 相对坐标的核心作用：所有城市位置和点击位置都转换成相对于原始地图的比例（0-1），缩放时只需乘以当前缩放因子，就能得到正确的绝对像素位置，保证线条与地图同步。
• 城市点击的精准判断：示例简化了点击逻辑，实际可给每个城市设置点击阈值（用Point2D.distance()计算点击位置与城市坐标的距离，小于阈值则判定选中）。
• 多条线条的维护：若需保存多条连线，可定义List<LineData>（LineData包含两个Point2D），每次绘制时添加到列表，重绘时遍历列表重新绘制。
• Swing实现思路：如果用Swing，核心逻辑一致——用JPanel重写paintComponent()，先绘地图再绘线条，监听组件尺寸变化触发重绘，同样用相对坐标实现缩放同步。

内容的提问来源于stack exchange，提问作者fareed thaalba