java - 如何在 JavaFX 场景图中拖动低于另一个 `Shape` 的 `shape`？

Question

我正在使用 JavaFX 编写一个教育应用程序，用户可以在其中绘制和操作贝塞尔曲线 Line、QuadCurve 和 CubicCurve。这些曲线应该能够用鼠标拖动。我有两种选择:

1- 使用类 Line、QuadCurve 和 CubicCurve，然后用透明色填充它们，并用另一种颜色描边，说黑色。该选项出现的问题是用户想要拖动一条曲线，但看到拖动的是另一条曲线。这样做的原因是用户要拖动的曲线位于场景图中另一条曲线的下方。例如，在下图中，较小的曲线无法拖动，因为它在场景图中位于较大曲线的下方。

2- 使用类 javafx.scene.shape.Path，在这种情况下，问题是操纵这样的路径有点复杂，因为它由一些 PathElements，并且简单地操作元素不会改变 Path，除非我们从其 elements 属性中删除一个元素，然后添加一个新元素。因此，我更喜欢方法 1。

如何克服第一种方法中出现的问题？

预先感谢您的帮助。我的程序代码的简化版本如下。

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.shape.CubicCurve;
import javafx.scene.shape.QuadCurve;
import javafx.stage.Stage;

public class SampleForStackOverflow extends Application
{
    double lastMouseX;
    double lastMouseY;
    double lastTranslateX;
    double lastTranslateY;

    @Override
    public void start(Stage window)
    {
        final double STROKE_WIDTH = 5;

        QuadCurve quad = new QuadCurve(100, 200, 150, 50, 200, 200);
        quad.setFill(Color.TRANSPARENT);
        quad.setStroke(Color.BLACK);
        quad.setStrokeWidth(STROKE_WIDTH);
        quad.setOnMousePressed(e -> {
            lastMouseX = e.getSceneX();
            lastMouseY = e.getSceneY();
            lastTranslateX = quad.getTranslateX();
            lastTranslateY = quad.getTranslateY();
        });
        quad.setOnMouseDragged(e -> followMouse(quad, e));

        CubicCurve cubic = new CubicCurve(0, 300, 100, 0, 300, 0, 300, 300);
        cubic.setFill(Color.TRANSPARENT);
        cubic.setStroke(Color.BLACK);
        cubic.setStrokeWidth(STROKE_WIDTH);
        cubic.setOnMousePressed(e -> {
            lastMouseX = e.getSceneX();
            lastMouseY = e.getSceneY();
            lastTranslateX = cubic.getTranslateX();
            lastTranslateY = cubic.getTranslateY();
        });
        cubic.setOnMouseDragged(e -> followMouse(cubic, e));

        Group root = new Group(quad, cubic);
        Scene scene = new Scene(root, 500, 500);
        window.setScene(scene);
        window.show();
    }


    private void followMouse(Node node, MouseEvent e)
    {
        double deltaX = e.getSceneX() - lastMouseX;
        double deltaY = e.getSceneY() - lastMouseY;
        node.setTranslateX(deltaX + lastTranslateX);
        node.setTranslateY(deltaY + lastTranslateY);
    }

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

Answer 1

您应该明确地将曲线的填充颜色设置为 null 并将 pickOnBounds 设置为 false，而不是在您的第一个场景中使用透明颜色。透明颜色仍会捕获鼠标事件，但 null 不会，当 pickOnBounds 为 false 时，仅当您正好位于形状的彩色部分上方时才会捕获鼠标事件。