JavaFX Canvas图形选中移动失效及精准选中方案咨询

我来帮你拆解并解决这两个问题，先从拖动失效的问题入手，再讲如何实现精准选中星星图形：

一、修复选中星星无法随鼠标拖动的问题 #

看了你的代码，拖动逻辑的核心问题在于没有计算鼠标与星星的偏移量，直接把点击时的鼠标坐标赋值给星星位置，导致星星无法跟随鼠标平滑移动。另外，鼠标事件的选择也有问题，应该用MouseDragged而不是MouseMoved。

具体修改步骤： #

1. 新增偏移量变量：在Drawing1类里添加两个变量，记录点击时鼠标相对于星星左上角的位置差：

double offsetX; // 鼠标到星星左上角的X轴偏移
double offsetY; // 鼠标到星星左上角的Y轴偏移

2. 重构select方法：点击时不仅要选中星星，还要计算偏移量，同时记得取消其他星星的选中状态：

public void select(MouseEvent e) {
    double temp_mouse_x = e.getSceneX();
    double temp_mouse_y = e.getSceneY();
    // 先取消所有星星的选中状态
    boolean foundSelected = false;
    for (Star star : stars) {
        star.setSelected(false);
    }
    // 从后往前遍历，确保选中最上层的星星
    for (int i = stars.size() - 1; i >= 0; i--) {
        Star star = stars.get(i);
        double x_max = star.getX() + star.getWidth();
        double y_max = star.getY() + star.getHeight();
        nowSelected = temp_mouse_x >= star.getX() && temp_mouse_x <= x_max 
                && temp_mouse_y >= star.getY() && temp_mouse_y <= y_max;
        
        if (nowSelected) {
            // 计算偏移：鼠标位置 - 星星左上角坐标
            offsetX = temp_mouse_x - star.getX();
            offsetY = temp_mouse_y - star.getY();
            star.setSelected(true);
            selectedStar = star;
            foundSelected = true;
            System.out.println(i + " index star selected");
            break; // 找到目标后直接跳出循环
        }
    }
    // 没选中任何星星时重置状态
    if (!foundSelected) {
        nowSelected = false;
        selectedStar = null;
    }
}

3. 修正move方法：用当前鼠标位置减去偏移量，得到星星的新坐标，这样拖动时星星会跟着鼠标走：

public void move(MouseEvent e, Canvas canvas) {
    if (selectedStar == null) return;
    // 计算星星新位置：当前鼠标位置 - 偏移量
    double newX = e.getSceneX() - offsetX;
    double newY = e.getSceneY() - offsetY;
    selectedStar.setX(newX);
    selectedStar.setY(newY);
    redraw();
    System.out.println(selectedStar);
}

4. 替换鼠标事件：把setOnMouseMoved改成setOnMouseDragged，因为只有鼠标按下并拖动时才需要触发移动逻辑：

canvas.setOnMouseDragged(e -> {
    if (this.nowSelected && selectedStar != null) {
        this.move(e, canvas);
    }
});

最后确保你的redraw方法是先清空画布再重新绘制所有星星，比如：

public void redraw() {
    gc.clearRect(0, 0, WINDOW_WIDTH, CANVAS_HEIGHT);
    for (Star star : stars) {
        star.draw();
    }
}

二、实现精准选中星星（非矩形区域） #

不继承Shape类的话，我们可以用射线法判断点是否在多边形内部来实现精准选中。星星本质是多边形，只要能获取它的所有顶点坐标，就能用算法判断鼠标点是否在星星图形内。

具体实现步骤： #

1. 让Star类暴露顶点坐标：在你的Star类中添加一个方法，返回星星的所有顶点坐标（这里以常见的五角星为例，你可以根据自己的绘制逻辑调整）：

import javafx.geometry.Point2D;
import java.util.ArrayList;
import java.util.List;

public class Star {
    // 你的现有代码...
    
    public List<Point2D> getVertices() {
        List<Point2D> vertices = new ArrayList<>();
        // 计算星星的中心坐标
        double centerX = getX() + getWidth() / 2;
        double centerY = getY() + getHeight() / 2;
        double outerRadius = getWidth() / 2; // 外层顶点到中心的距离
        double innerRadius = outerRadius * 0.382; // 五角星内层顶点比例，约为黄金分割倒数
        
        // 生成10个顶点（5个外层+5个内层）
        for (int i = 0; i < 5; i++) {
            // 外层顶点（角度从90度开始，顺时针旋转）
            double outerAngle = Math.toRadians(90 + i * 72);
            vertices.add(new Point2D(centerX + outerRadius * Math.cos(outerAngle),
                    centerY - outerRadius * Math.sin(outerAngle)));
            // 内层顶点（在外层顶点之间）
            double innerAngle = Math.toRadians(90 + 36 + i * 72);
            vertices.add(new Point2D(centerX + innerRadius * Math.cos(innerAngle),
                    centerY - innerRadius * Math.sin(innerAngle)));
        }
        return vertices;
    }
}

2. 实现点在多边形内的判断工具方法：在Drawing1类中添加这个经典的射线法算法：

import javafx.geometry.Point2D;
import java.util.List;

private boolean isPointInPolygon(Point2D point, List<Point2D> vertices) {
    int vertexCount = vertices.size();
    boolean isInside = false;
    
    // 遍历多边形的每条边
    for (int i = 0, j = vertexCount - 1; i < vertexCount; j = i++) {
        Point2D v1 = vertices.get(i);
        Point2D v2 = vertices.get(j);
        
        // 判断鼠标点是否在当前边的Y坐标范围内
        boolean yCrosses = (v1.getY() > point.getY()) != (v2.getY() > point.getY());
        if (yCrosses) {
            // 计算射线与边的交点X坐标
            double intersectX = ((point.getY() - v1.getY()) * (v2.getX() - v1.getX())) 
                    / (v2.getY() - v1.getY()) + v1.getX();
            // 如果鼠标点X坐标在交点左侧，说明射线穿过这条边，切换内部状态
            if (point.getX() < intersectX) {
                isInside = !isInside;
            }
        }
    }
    return isInside;
}

3. 修改select方法的判断逻辑：先通过矩形判断快速过滤掉明显不在星星范围内的点，再用射线法做精准判断：

public void select(MouseEvent e) {
    double temp_mouse_x = e.getSceneX();
    double temp_mouse_y = e.getSceneY();
    Point2D mousePoint = new Point2D(temp_mouse_x, temp_mouse_y);
    
    boolean foundSelected = false;
    // 先取消所有选中状态
    for (Star star : stars) {
        star.setSelected(false);
    }
    
    for (int i = stars.size() - 1; i >= 0; i--) {
        Star star = stars.get(i);
        // 先做矩形快速过滤，提升性能
        double x_max = star.getX() + star.getWidth();
        double y_max = star.getY() + star.getHeight();
        if (temp_mouse_x < star.getX() || temp_mouse_x > x_max 
                || temp_mouse_y < star.getY() || temp_mouse_y > y_max) {
            continue;
        }
        // 再做精准的多边形判断
        nowSelected = isPointInPolygon(mousePoint, star.getVertices());
        if (nowSelected) {
            offsetX = temp_mouse_x - star.getX();
            offsetY = temp_mouse_y - star.getY();
            star.setSelected(true);
            selectedStar = star;
            foundSelected = true;
            System.out.println(i + " index star selected");
            break;
        }
    }
    
    if (!foundSelected) {
        nowSelected = false;
        selectedStar = null;
    }
}

这样修改后，只有当鼠标点击到星星的实际图形区域时，才会选中星星，而不是整个包围矩形。

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