javascript - 如何使用两个坐标用javascript画一个椭圆?

标签 javascript algorithm graphics 2d ellipse

如下图所示,我有两个坐标,我想画一个长轴边缘与这两个点匹配的椭圆。

enter image description here

我试过获取这两个坐标之间的中点并在这一个坐标的基础上绘制一个椭圆。像这样的代码,下面的函数返回我想要的椭圆点数组:

 function add_oval(centre, x, y) {
    var assemble = new Array();
    var angle;
    var dot;
    var tangent = x / y;
    for (i = 0; i < 36; i++) {
        angle = (2 * Math.PI / 36) * i;
        dot = [centre.lng + Math.sin(angle) * y * tangent, centre.lat + Math.cos(angle) * y];
        assemble.push(dot);
    }
    return assemble;
}

但问题是,这些只能画一个水平的椭圆,我不知道如何改变 Angular 。

有人知道如何解决我的问题吗?

最佳答案

提示:

如果 javascript 中没有旋转椭圆功能,解决方法是改用贝塞尔三次近似。引用帖子How to create circle with Bézier curves?关于如何用四个贝塞尔弧来近似一个圆。那么椭圆就是一个拉伸(stretch)的圆,同样拉伸(stretch)控制点就可以了。

从单位圆开始,按轴长度缩放控制点,应用所需的旋转并平移到所需的中心。缩放和旋转参数可以从给定的长轴(加上短轴的长度)得出。

另一种方法是使用椭圆的参数方程并将其绘制为折线。

关于javascript - 如何使用两个坐标用javascript画一个椭圆?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39098308/

相关文章:

javascript - SVG 对象不会返回到其初始位置

javascript - 代码在 localhost 中工作,但在 hostgator 服务器中不起作用?

javascript - div背景图片不改变重新上传

algorithm - 是否有一种算法可以在 O(nlogn) 中找到安排 n 个类(class)的最少教室数?

image - 如何在 Matlab 中显示图像的红色 channel ?

r - 在 R 和 knitr 中,如何绘制 INLA 结果?

javascript - 冲突的功能

javascript - 将点二进制转换为 float

algorithm - 未知正确输出时有效验证程序逻辑的方法

python - Pyqt 中的 SVG 字形