在画布上以5点绘制椭圆

时间:2019-11-13 07:28:52

标签: javascript geometry html5-canvas coordinates

我在数学上不太好。我需要使用5个坐标绘制一个椭圆,用户将在画布上单击5个不同的位置,然后单击该坐标将绘制1个椭圆。要在画布上绘制椭圆,我有方法

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

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

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

我无法将该公式转换为js。如果您能帮助我从5个畸变点计算出椭圆的圆角,较小半径和中心点,我非常感谢您

1 个答案:

答案 0 :(得分:1)

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

enter image description here

(图片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中的相同问题