二次貝塞爾曲線數學

Question

有人可以幫我嗎：當我有這樣的貝塞爾曲線時： https ://www.w3schools.com/code/tryit.asp?filename = FX0KJBP2EZ3S

P0(X) = 0 P0(Y) = 50
P1(X) = 100 P1(Y) = 25
P2(X) = 200 P2(Y) = 50

然后像這樣使貝塞爾曲線變小：

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

由於距離P0.X和P2.X，P1較高。 如何保持P1的高度，使其始終處於同一高度？

Answer 1

要按比例縮小曲線（使形狀相同但更小），您必須以相同的比例更改控制點的差異 。 因此應將Y1-Y0更改為類似於(X2'-X0')/(X2-X0) ： 25 / (200/50) = 6.25 。 以整數：

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