Bezier曲线数学

Question

3 weeks ago我问了一个问题，当改变X点时，如何保持bezier曲线的比率。"MBo“帮助了我，但是有一个问题，他建议我做一个新的话题。

问题是P0.Y和P2.Y可能是不同的，因此这条曲线看起来就像一个“兄弟”。

现在我有了这个，当我改变P0.X和P2.X的时候，我想保持这个比率，这个比率很好：

https://www.w3schools.com/code/tryit.asp?filename=FXDIZMBCCYNA

例如，当更改P0.Y时，它看起来像一个"brolly“( P1.X并不完全位于中间)：

https://www.w3schools.com/code/tryit.asp?filename=FXDJ733KQZM4

好的，我试着更仔细地解释它。

我有四个点( X1，Y1，X2，Y2)，并且想要一个基于点的bezier曲线: P0.X在X1上，P1.X在X1和X2之间，P2.X在X2上。P0.Y在Y1上，P2.Y在Y2上。

当我现在有了这个：

ctx.moveTo(0, 50);
ctx.quadraticCurveTo(100, 25, 200, 50);

并改变x1和x2的位置，使比率保持在以下位置：

ctx.moveTo(0, 50);
ctx.quadraticCurveTo(25, 44, 50, 50);

好吧，到目前为止这部分工作还不错。现在我的问题是，当我改变Y1或Y2时，它看起来像"brolly“，而且曲线也不是像上面那样圆的，因为P1.X并不完全在中间。

ctx.moveTo(0, 250);
ctx.quadraticCurveTo(100, 25, 200, 50);

​

​

它应该喜欢这样的地方：

​

​

Answer 1

我是这样看的：

​

​

所以你得到了3分(P0(x0,y0),P1(x1,y1),P2(x2,y2))。现在您想要做的是仍然不清楚，但我想您只是想调整沿x轴的曲线大小，并保持在y轴的形状。

所以你需要改变所有的事情.因此，坚持这一点：

(x1-x0) /  (x2-x0) = (x1'-x0') /  (x2'-x0')
(y1-y0) /  (y2-y0) = (y1'-y0') /  (y2'-y0')
(x1-x0) /  (x1'-x0') = c
(y1-y0) /  (y1'-y0') = c
(x2-x0) /  (x2'-x0') = c
(y2-y0) /  (y2'-y0') = c
(x2-x1) /  (x2'-x1') = c
(y2-y1) /  (y2'-y1') = c

其中x,y是原始点，x',y'是修改后的点

以你为例：

P0=(  0,50)
P1=(100,25)
P2=(200,50)
x2'=50

您需要重新计算其余的，从比例开始：

c = (x2-x0) / (x2'-x0') = (200-0)/(50-0) = 200/50 = 4

然后，只需重新计算缺少的内容：

(x1-x0) / c = (x1'-x0') // x0=0, x0'=0 
x1 / c = x1'
x1' =  100/4 = 25

(y1'-y0') = (y1-y0) / c  // y0' = y0
y1' = (y1-y0) / c + y0
y1' = (25-50) / 4 + 50
y1' = 43.75

(y2'-y0') = (y2-y0) / c  // y0' = y0
y1' = (y2-y0) / c + y0
y1' = (50-50) / 4 + 50
y1' = 50

改变y也是如此..。一旦更改了任何y，就需要以相同的方式重新计算受影响的剩余x,y .

Answer 2

当Bezier曲线经过仿射变换时，将同样的变换应用于它们的控制点。

在您的情况下，转换是围绕曲线的第一个点(P0)旋转和缩放。

旋转角

 fi = arctan((P2'.Y - P2.Y) / (P2.X - P0.X))

结垢系数

 Cf = Sqrt(1 + (P2'.Y - P2.Y)^2/(P2.X - P0.X)^2) 

因此，控制点的新坐标是

xx = P1.X - P0.X
yy = P1.Y - P0.Y
nx = xx * Cos(fi) - yy * Sin(fi) 
ny = xx * Sin(fi) + yy * Cos(fi) 
P1'.X = P0.X + nx * Cf
P1'.Y = P0.Y + ny * Cf