在椭圆周边绘制物体

Question

这个问题可以作为一个数学问题来提出，但我的是一个编程问题。

我有一定数量的List元素（群集节点），在我从服务器获取JSON数据之前，我都不知道。我必须在“circle”中绘制节点，因此我需要计算x和y，给出循环每次迭代的元素总数。

我知道i - 元素将以theta=2*pi*i/(n)角度定相。所以最终如果我想在圆圈中绘制元素，我可以将每个x,y计算为

x = r*cos(theta)
y = r*sin(theta)

其中r是半径。出于布局原因（最大化横向布局计算机屏幕中的元素），我必须在椭圆周围放置元素，其中半径r位于两个半径r1和r2之间。

如何计算theta角度以及r1和r2半径的坐标？

Answer 1

嗯，这与我在Positioning divs on a circle上的回答略有不同。

首先，椭圆上坐标的等式是：

(x, y) = (rx * cos(θ), ry * sin(θ))

其中，rx是沿X轴的半径，ry是沿Y轴的半径。

---

函数generate(n, rx, ry, id)有四个参数，其中n是div的数量，rx和ry是沿X和Y的半径-axis，最后id是id的{​​{1}}，您想要将椭圆排列的div添加到其中。

Fiddle

上的演示

HTML：

div

的JavaScript：

<div id="main"></div>

CSS：

var theta = [];

var setup = function (n, rx, ry, id) {
    var main = document.getElementById(id);
    var mainHeight = parseInt(window.getComputedStyle(main).height.slice(0, -2));
    var circleArray = [];
    var colors = ['red', 'green', 'purple', 'black', 'orange', 'yellow', 'maroon', 'grey', 'lightblue', 'tomato', 'pink', 'maroon', 'cyan', 'magenta', 'blue', 'chocolate', 'darkslateblue', 'coral', 'blueviolet', 'burlywood', 'cornflowerblue', 'crimson', 'darkgoldenrod', 'olive', 'sienna', 'red', 'green', 'purple', 'black', 'orange', 'yellow', 'maroon', 'grey', 'lightblue', 'tomato', 'pink', 'maroon', 'cyan', 'magenta', 'blue', 'chocolate', 'darkslateblue', 'coral', 'blueviolet', 'burlywood', 'cornflowerblue', 'crimson', 'darkgoldenrod', 'olive', 'sienna'];
    for (var i = 0; i < n; i++) {
        var circle = document.createElement('div');
        circle.className = 'circle number' + i;
        circleArray.push(circle);
        circleArray[i].posx = Math.round(rx * (Math.cos(theta[i]))) + 'px';
        circleArray[i].posy = Math.round(ry * (Math.sin(theta[i]))) + 'px';
        circleArray[i].style.position = "absolute";
        circleArray[i].style.backgroundColor = colors[i];
        circleArray[i].style.top = ((mainHeight / 2) - parseInt(circleArray[i].posy.slice(0, -2))) + 'px';
        circleArray[i].style.left = ((mainHeight/ 2 ) + parseInt(circleArray[i].posx.slice(0, -2))) + 'px';
        main.appendChild(circleArray[i]);
    }
};

var generate = function(n, rx, ry, id) {
    var frags = 360 / n;
    for (var i = 0; i <= n; i++) {
        theta.push((frags / 180) * i * Math.PI);
    }
    setup(n, rx, ry, id)
}
generate(16, 150, 50, 'main');