如何以度數旋轉壓扁的圓（橢圓）

Question

我在我的代碼中用一個點（即 circle_x 和 circle_Y）繪制了一個圓路徑，如下所示：

var circSize    = 15;
var circArc     = 2 * Math.PI; 
var aspectAdd   = 10; 
var circle_x    = (circSize + aspectAdd) * Math.cos(circArc);
var circle_y    = (circSize * Math.sin(circArc);

然后用 aspectAdd 將圓壓扁，使其成為橢圓。 橢圓是純粹的不可見路徑，用作另一個點的 animation 路徑。 如何以度數旋轉橢圓？ 它必須是純數學。 對於這個實例，我沒有使用 canvas ctx 或 svg 路徑腳本（我可以很容易地給出旋轉值）。

Answer 1

用於找到半軸rx和ry的橢圓點的方程，旋轉角度fi 。

使用所需的步驟在0..2*Pi范圍內計算t參數的點。

x = rx * Cos(t) * Cos(fi) - ry * Sin(t) * Sin(fi) + cx
y = rx * Cos(t) * Sin(fi) + ry * Sin(t) * Cos(fi) + cy

rx=100、ry=60、fi=-Pi/6 的示例：

另外：您似乎在此處計算了 fluid.js 文件中的橢圓點：

var r_x = circle_x * Math.cos(circRot) - circle_y * Math.sin(circRot);
var r_y = circle_x * Math.sin(circRot) + circle_y * Math.cos(circRot);

所以你需要修改這些行來測試它們：

 var ellipseRot =  Math.PI / 4
    var r_x = circle_x * Math.cos(circRot) * Math.cos(ellipseRot)- circle_y * Math.sin(circRot) * Math.sin(ellipseRot);
    var r_y = circle_x * Math.sin(circRot) *Math.sin(ellipseRot) + circle_y * Math.cos(circRot) * Math.cos(ellipseRot);

然后將ellipseRot更改為 slider

Answer 2

您可能應該在數學計算器中問過這個問題。

您需要對參數函數應用旋轉。

具體來說，

r_x = x * cos(theta) - y * sin(theta)
r_y = x * sin(theta) + y * cos(theta)

我會讓你處理替換。