如何在画布中找出贝塞尔曲线中特定点的Y坐标？ [英] How to find out Y coordinate of specific point in bezier curve in canvas?

问题描述

我需要找出画布中贝塞尔曲线的特定点的Y坐标。你知道吗，怎么找到它？谢谢

解决方案

使用de Casteljau的算法，您可以找到任何t的贝塞尔曲线的坐标x和y，插值步骤。所以1的t将给你从开始的10％的曲线的x和y。

在我们的三次贝塞尔曲线中，我们有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）+ * 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 * 
 Py =（（1-t）* Dy）+（t * Ey）; 
  

我们现在有Bezier上点的x和y坐标％从开始。我会很快添加一些图片。

I need to find out Y coordinate of specific point of bezier curve in canvas. Do you know, how to find it out? Thank you

解决方案

Using de Casteljau's algorithm you can find the coordinates x and y of a bezier curve for any t, the percentage or interpolation step. So a t of .1 would give you the x and y at 10% of the curve from the beginning. A t of .9 would be 90% from the beginning, and so on.

In our cubic bezier we have p0, point 0, cp0, control point 0, cp1, control point 1, and p1, point 1.

In the first step of the algorithm we draw a line connecting p0 and cp0, another line connecting cp0 and cp1, and another still connecting cp1 and p1. Then for all 3 of these lines we're going to find the point on them that is t % from the start of them.

I'll call the points as follows:

• 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);
  

The second step is very much like the first. In the first we connected the four points with lines and then found 3 new points on them. In this step we'll connect those 3 points with lines find 2 new points on them. I'll call these two new points D and 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);

Finally, we can connect these last two points with another line, and find the last point on it which will give us the point on the bezier curve for that t. I'll call this point P.

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

There we go, we now have the x and y coordinate of a point on the bezier that is t% from the start. I'll add some pictures soon.

这篇关于如何在画布中找出贝塞尔曲线中特定点的Y坐标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！