如何在画布中找出贝塞尔曲线中特定点的Y坐标？

Question

我需要在画布中找出贝塞尔曲线特定点的Y坐标.你知道吗,如何找到它？谢谢

Answer 1

使用de Casteljau算法,您可以找到任何t,百分比或插值步长的贝塞尔曲线的坐标x和y.所以.1会从一开始就给出曲线10%处的x和y..9的t从开头就是90%,依此类推.

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

在算法的第一步中,我们绘制一条连接p0和cp0的线,另一条线连接cp0和cp1,另一条线连接cp1和p1.然后对于所有这三条线,我们将在它们的起点找到它们的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%.我很快就会添加一些图片.

Answer 2

剪切并粘贴准备好的答案:

// Points are objects with x and y properties
// p0: start point
// p1: handle of start point
// p2: handle of end point
// p3: end point
// t: progression along curve 0..1
// returns an object containing x and y values for the given t
BezierCubicXY = function(p0, p1, p2, p3, t) {
    var ret = {};
    var coords = ['x', 'y'];
    var i, k;

    for (i in coords) {
        k = coords[i];
        ret[k] = Math.pow(1 - t, 3) * p0[k] + 3 * Math.pow(1 - t, 2) * t * p1[k] + 3 * (1 - t) * Math.pow(t, 2) * p2[k] + Math.pow(t, 3) * p3[k];
    }

    return ret;
}

Answer 3

圆的方程为： (xh)^2 + (yk)^2 = r^2 其中 h,k 是中心的 x,y 坐标。因此 y 的方程为 y = sqrt(r^2 - (xh)^2) + k 。大多数语言都带有数学包，所以我假设你可以做一些Math.sqrt(..)事情Math.pow(..)

如果我的数学不对，有人纠正我。