绘制点到椭圆以允许在GUI中绘制

Question

我实现了一些基本的注释绘制功能，例如箭头。现在我有点陷入椭圆状。

methods to draw an ellipse通常会使用它的两个直径并最终进行轮换：

但是我想在点击的用户和他悬停的点之间显示椭圆，因此我需要一个根据两点计算直径和旋转的函数：

我该怎么做？是否能够以足够的性能实现（因为它在鼠标悬停期间呈现）？

Answer 1

它可以像通常一样完成，只需使用不同的数学来计算形状。如果不为您编写整个代码，则可以在用户单击鼠标按钮时启动事件触发器。该功能将根据屏幕复制用户x和y位置。然后有第二个功能，它将处理鼠标移动。此功能将跟踪鼠标在运动时的x和y坐标。当用户从鼠标按钮上抬起手指时，最终的功能将是鼠标按下事件（假设这是事件应该完成的时候）。使用x和y坐标的初始和最终位置，可以计算用户创建的线的长度。该线是椭圆的长直径。大半径的这个数字的一​​半。然后使用您使用的任何比率来计算较大半径的较小半径。然后根据这些数字创建一个椭圆。

对于数学：假设你的第一个点是x1，y1，终点是x2，y2

我还假设我们有一条从左下角到右上角的线

两点之间的距离= sqrt（（x2-x1）^ 2 +（y2-y1）^ 2）---＆gt; （我们称之为d1）

这一半是大半径的长度---＆gt; （我们称之为r1）

中点公式=（（x1 + x2）/ 2，（y1 + y2）/ 2）---＆gt;旋转轴（我们称之为（m1，m2））

从中点到终点的距离只是半径

半径现在是构造平面的斜边，y2-m2是直角三角形的高度。

找出较大半径的中点和一端之间的角度 - sin（（y2-m2）/ r1）。

较小半径的角度是此角度+ pi / 4弧度。

根据比率计算较小半径的长度。

Answer 2

你要遵循的步骤：

1. 获取该行的角度（来自此帖子：get angle of a line from horizon）

2. 旋转画布或至少是您当前绘制的部分（现场演示：http://www.html5canvastutorials.com/advanced/html5-canvas-transform-rotate-tutorial）

3. 在画布中绘制一个椭圆（http://www.scienceprimer.com/draw-oval-html5-canvas）

生成的椭圆将按照描述进行转换