canvas - 如何找出 Canvas 中贝塞尔曲线中特定点的Y坐标？

Question

我需要找出 Canvas 中贝塞尔曲线特定点的 Y 坐标。你知道怎么查吗？谢谢

Answer 1

使用 de Casteljau 算法，您可以找到任何 t、百分比或插值步骤的贝塞尔曲线的坐标 x 和 y。所以 0.1 的 t 会给你从一开始就在曲线的 10% 处的 x 和 y。 0.9 的 t 从一开始就是 90%，依此类推。

在我们的三次贝塞尔曲线中，我们有 p0(点 0)、cp0(控制点 0)、cp1(控制点 1)和 p1(点 1)。

在 第一步在算法中，我们画了一条连接 p0 和 cp0 的线，另一条连接 cp0 和 cp1 的线，还有另一条连接 cp1 和 p1 的线。然后对于所有这 3 条线，我们将在它们上找到距它们开头 t % 的点。

我将按以下方式调用要点:

p0 -> cp0 = A

cp0 -> cp1 = B

cp1 -> p1 = C

Ax = ( (1 - t) * p0x ) + (t * cp0x);
Ay = ( (1 - t) * p0y ) + (t * cp0y);
Bx = ( (1 - t) * cp0x ) + (t * cp1x);
By = ( (1 - t) * cp0y ) + (t * cp1y);
Cx = ( (1 - t) * cp1x ) + (t * p1x);
Cy = ( (1 - t) * cp1y ) + (t * p1y);

第二步非常像第一个。首先，我们用线将四个点连接起来，然后在它们上面找到了 3 个新点。在这一步中，我们将用线连接这 3 个点，在它们上找到 2 个新点。我将这两个新点称为 D 和 E。

    Dx = ( (1 - t) * Ax ) + (t * Bx);
    Dy = ( (1 - t) * Ay ) + (t * By);

    Ex = ( (1 - t) * Bx ) + (t * Cx);
    Ey = ( (1 - t) * By ) + (t * Cy);

最后，我们可以将最后两个点与另一条线连接起来，并找到它上的最后一个点，这将为我们提供该 t 的贝塞尔曲线上的点。我将这一点称为 P。

    Px = ( (1 - t) * Dx ) + (t * Ex);
    Py = ( (1 - t) * Dy ) + (t * Ey);

好了，我们现在有了贝塞尔曲线上一个点的 x 和 y 坐标，该点从一开始就是 t%。我会尽快添加一些图片。