javascript - 在 Canvas 上绘制有 5 个点的椭圆

Question

我的数学不太好。我需要使用 5 个坐标绘制一个椭圆，其中用户将单击 Canvas 中的 5 个不同位置，并获取将绘制的单击坐标 1 个椭圆。要在 Canvas 上绘制椭圆，我有方法

ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, anticlockwise]);

我需要椭圆的中心位置和2半径。我只有椭圆周长的 5 个坐标。我得到了一个计算椭圆的矩阵公式。

ax2+bxy+cy2+dx+ey+f=0

我无法将该方程转换为 js。如果您能帮我从任意 5 个点计算椭圆的长短半径和圆心，我将非常感谢

Answer 1

有5个点，您可以找到该矩阵的圆锥曲线(此处为椭圆)扩展行列式的一般公式(用您的点坐标替换xi,yi):

(图片taken here)

Simple example to begin with

使用my answer for inverse problem

//calc implicit ellipse equation
//semiaxes rx, ry; rotated at fi radians; centered at (cx,cy)
//note: implicit form Ax^2+Bxy+Cy^2+Dx+Ey+F=0 (not 2B,2D,2E)

// in Pascal notation Sqr is squared
B := Sin(2 * Fi) * (ry * ry - rx * rx);
A := Sqr(ry * Cos(fi)) + Sqr(rx * Sin(fi));
C := Sqr(rx * Cos(fi)) + Sqr(ry * Sin(fi));
D := -B * cy - 2 * A * cx;
E := -2 * C * cy - B * cx;
F := C * cy * cy + A * cx * cx + B * cx * cy - rx * rx * ry * ry;

我们可以看到

Fi = 0.5 * atan2(B, A-C)

然后

ry^2+rx^2 = A + C
ry^2-rx^2 = B / Sin(2*Fi)

所以

ry = Sqrt((A + C + B / Sin(2*Fi))/2)
rx = Sqrt((A + C - B / Sin(2*Fi))/2)

(除了 Fi=0 的情况，我们可以直接从 A 和 C 中提取半轴)

然后从D/E方程组中求出cx、cy

另请参阅Wiki formulas对于同样的问题