java - 计算出 QuadCurveTo 的参数

Question

你们能帮我弄清楚QuadCurveTo的4个参数吗？我试图在QuadCurveTo上找到一些信息。 ，但是没有图很难理解。我知道这 4 个参数绘制 2 条线来控制路径，但是我们如何通过仅知道这 2 个路径 Controller 来准确地知道/计算对象将通过哪些坐标。有一些公式吗？

import javafx.animation.PathTransition;
import javafx.animation.PathTransition.OrientationType;
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.scene.shape.QuadCurveTo;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;

public class _6 extends Application {

    public Rectangle r;

    @Override
    public void start(final Stage stage) {

        r = new Rectangle(50, 80, 80, 90); 
        r.setFill(javafx.scene.paint.Color.ORANGE);
        r.setStrokeWidth(5);
        r.setStroke(Color.ANTIQUEWHITE);

        Path path = new Path();  
         path.getElements().add(new MoveTo(100.0f, 400.0f));
         path.getElements().add(new QuadCurveTo(150.0f, 60.0f, 100.0f, 20.0f));
         PathTransition pt = new PathTransition(Duration.millis(1000), path);

        pt.setDuration(Duration.millis(10000));
        pt.setNode(r);
        pt.setPath(path);
        pt.setOrientation(OrientationType.ORTHOGONAL_TO_TANGENT);
        pt.setCycleCount(4000);
        pt.setAutoReverse(true);

        pt.play();

        stage.setScene(new Scene(new Group(r), 500, 700));
        stage.show();
    }

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

您可以在 new QuadCurveTo(150.0f, 60.0f, 100.0f, 20.0f) 行上找到这些坐标，下面是二次贝塞尔曲线的示例图片.

Answer 1

来自Wikipedia

B(t)=(1-t)*(1-t)*P0 + 2*(1-t)*t*P1 + t*t*P2, 0<=t<=1

这里P0是起点，P1是控制点，P2是终点。请注意，t 可能不等于转换的时间点，因为转换具有可修改的插值器；然而，该路径将穿过该曲线定义的所有点。在您的示例中，P0=(100, 400)、P1=(150, 60) 和 P2=(100, 20)。

解释是，您在起点和控制点之间进行线性插值(称为Q0(t))，并在控制点和终点之间进行线性插值( >Q1(t));那么曲线就是 t 处 Q0(t) 和 Q1(t) 之间的线性插值:B(t)=( 1-t)*Q0(t)+t*Q1(t)