java - 在 JavaFX 中获取屏幕上路径的 x y 坐标

Question

在 JavaFX 中有什么方法可以获取我在 Canvas 屏幕上绘制的路径的 x、y 坐标？

我有一个应用程序可以在 Canvas 上绘制一些圆圈，然后将圆圈与线连接起来。

之后我可以通过拖动节点来改变圆圈的位置，程序总是在 Canvas 上重新绘制圆圈之间的线

但现在我想在这些圆圈之间绘制一个 QuadCurve。

public void drawQuadCurveOnCanvas(double startX, double startY, double endX, double endY, double controlX, double controlY) {
        // Set line width
        lineDraw.setLineWidth(Constants.LINE_THICKNESS);
        // Set the Color
        lineDraw.setStroke(Constants.DRAG_COLOR);
        // Start the Path
        lineDraw.beginPath();
        lineDraw.moveTo(startX, startY);
        lineDraw.quadraticCurveTo(controlX, controlY, endX, endY);
        // Draw the Path
        lineDraw.stroke();
    }

我以其中一个圆作为控制点，以另外两个圆作为起点和终点坐标绘制 QuadCurve。

所以我想沿着我刚刚绘制的 QuadCurve 获取 x、y 坐标，这样我就可以在这些坐标上创建一些圆，然后当我将这些圆与线连接时，我得到相同的 QuadCurve。

我不知道我是否解释得很好，有人知道如何实现我想要的吗？

Answer 1

对于 Quadratic Bézier Curve , 曲线上任意一点都可以写成

x = (1-t)*(1-t)*startX + 2*t*(1-t)*controlX + t*t*endX
y = (1-t)*(1-t)*startY + 2*t*(1-t)*controlY + t*t*endY

其中 0≤t≤1。

要沿着二次贝塞尔曲线绘制多个圆，只需选择 0 到 1 之间的一些值，并创建一堆圆，其中心由上面公式中的坐标给出。如果控制点可能发生变化，您可以使用绑定(bind)。下面是一个快速示例，它创建了沿曲线绑定(bind)到坐标的圆，其端点又绑定(bind)到圆的线段。

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Spinner;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Line;
import javafx.stage.Stage;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

public class BezierCurve extends Application {

    private Circle start;
    private Circle end;
    private Circle control;
    private Pane drawingPane;
    private List<Circle> points;
    private List<Line> segments;

    private Circle createPoint(double t) {
        Circle c = new Circle(4);
        c.setFill(Color.BLACK);
        c.centerXProperty().bind(Bindings.createDoubleBinding(
                () -> (1-t)*(1-t)*start.getCenterX() 
                     + 2*t*(1-t)*control.getCenterX() 
                     + t*t*end.getCenterX(),
                start.centerXProperty(),
                end.centerXProperty(),
                control.centerXProperty())
        );
        c.centerYProperty().bind(Bindings.createDoubleBinding(
                () -> (1-t)*(1-t)*start.getCenterY() 
                    + 2*t*(1-t)*control.getCenterY() 
                    + t*t*end.getCenterY(),
                start.centerYProperty(),
                end.centerYProperty(),
                control.centerYProperty())
        );
        return c;
    }

    private Line createSegment(Circle start, Circle end) {
        Line segment = new Line();
        segment.startXProperty().bind(start.centerXProperty());
        segment.startYProperty().bind(start.centerYProperty());
        segment.endXProperty().bind(end.centerXProperty());
        segment.endYProperty().bind(end.centerYProperty());
        return segment ;
    }

    @Override
    public void start(Stage stage) throws IOException {
        drawingPane = new Pane();
        points = new ArrayList<>();
        segments = new ArrayList<>();

        start = new Circle(100,100, 10, Color.GREEN);
        end = new Circle(700, 100, 10, Color.GREEN);
        control = new Circle(400, 500, 10, Color.GREEN);

        for (Circle c : List.of(start, end, control)) setUpDragging(c);

        Spinner<Integer> numSegmentsSpinner = new Spinner(5, Integer.MAX_VALUE, 25, 5);
        numSegmentsSpinner.setEditable(true);
        numSegmentsSpinner.valueProperty().addListener(
            (obs, oldValue, newValue) -> populatePointsAndSegments(newValue)
        );
        HBox ctrls = new HBox(5, new Label("Number of segments:"), numSegmentsSpinner);

        populatePointsAndSegments(numSegmentsSpinner.getValue()); ;
        drawingPane.getChildren().addAll(start, end, control);

        BorderPane root = new BorderPane();
        root.setCenter(drawingPane);
        root.setTop(ctrls);
        Scene scene = new Scene(root, 800, 800);
        stage.setScene(scene);
        stage.show();
    }

    private void populatePointsAndSegments(int numSegments) {

        drawingPane.getChildren().removeAll(points);
        drawingPane.getChildren().removeAll(segments);
        points.clear();
        segments.clear();

        Circle previousCircle = start ;

        for (int i = 1 ; i < numSegments; i++) {
            double t = 1.0 * i / numSegments ;
            Circle c = createPoint(t);
            points.add(c);
            segments.add(createSegment(previousCircle, c));
            previousCircle = c ;
        }
        segments.add(createSegment(previousCircle, end));
        drawingPane.getChildren().addAll(points);
        drawingPane.getChildren().addAll(segments);
    }

    private void setUpDragging(Circle c) {
        c.setOnMouseDragged(e -> {
            c.setCenterX(e.getX());
            c.setCenterY(e.getY());
        });
    }

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