javascript - 圆坐标到Javascript中的数组

Question

将圆的坐标添加到 JavaScript 中的数组的最佳方法是什么？到目前为止，我只能做一个半圆，但我需要一个将整个圆返回到两个不同数组的公式：xValues和yValues. （我正在尝试获取坐标，以便可以沿路径为对象设置动画。）

这是我到目前为止所拥有的：

circle: function(radius, steps, centerX, centerY){
    var xValues = [centerX];
    var yValues = [centerY];
    for (var i = 1; i < steps; i++) {
        xValues[i] = (centerX + radius * Math.cos(Math.PI * i / steps-Math.PI/2));
        yValues[i] = (centerY + radius * Math.sin(Math.PI * i / steps-Math.PI/2));
   }
}

score 24 · Accepted Answer

你的循环应该这样设置：

for (var i = 0; i < steps; i++) {
    xValues[i] = (centerX + radius * Math.cos(2 * Math.PI * i / steps));
    yValues[i] = (centerY + radius * Math.sin(2 * Math.PI * i / steps));
}

从 0 开始循环
遍历整个 2 * PI 范围，而不仅仅是 PI。
你不应该有var xValues = [centerX]; var yValues = [centerY];- 圆的中心不是它的一部分。

score 8 · Accepted Answer

Bresenham 的算法要快得多。你听说过它与绘制直线有关，但有一种用于圆的算法。

无论您是使用它还是继续进行三角计算（如今这些计算速度非常快）——您只需要画出 1/8 的圆圈。通过交换 x,y 你可以得到另一个 1/8，然后 x、y 和两者的负数 - 交换和未交换 - 为你圈子的所有其余部分提供分数。8倍加速！

score 5 · Accepted Answer

改变：

Math.PI * i / steps

到：

2*Math.PI * i / steps

一个完整的圆是 2pi 弧度，而你只会去 pi 弧度。

score 1 · Accepted Answer

如果您已经有半个圆圈，只需镜像点以获得另一半
，确保您以正确的顺序执行此操作。

更具体地说，对于另一半，您只需将“ + sin(...)”替换为“ - sin(...)”

score 1 · Accepted Answer

您需要使用偏函数将弧度输入 cos 和 sin；因此，将您获得的四分之一或一半圆的值，并将它们反映在中心点的轴上以获得完整的圆。

也就是说 JavaScript 的 sin 和 cos 并不那么挑剔，所以你一定把弧度减半了。我会把它写成：

function circle(radius, steps, centerX, centerY){
    var xValues = [centerX];
    var yValues = [centerY];
    var table="<tr><th>Step</th><th>X</th><th>Y</th></tr>";
    var ctx = document.getElementById("canvas").getContext("2d");
    ctx.fillStyle = "red"
    ctx.beginPath();
    for (var i = 0; i <= steps; i++) {
        var radian = (2*Math.PI) * (i/steps);
        xValues[i+1] = centerX + radius * Math.cos(radian);
        yValues[i+1] = centerY + radius * Math.sin(radian);
        if(0==i){ctx.moveTo(xValues[i+1],yValues[i+1]);}else{ctx.lineTo(xValues[i+1],yValues[i+1]);}
        table += "<tr><td>" + i + "</td><td>" + xValues[i+1] + "</td><td>" + yValues[i+1] + "</td></tr>";
    }
    ctx.fill();
    return table;
}
document.body.innerHTML="<canvas id=\"canvas\" width=\"300\" height=\"300\"></canvas><table id=\"table\"/>";
document.getElementById("table").innerHTML+=circle(150,15,150,150);

我假设无论出于何种原因，您都希望 xValues[0] 和 yValues[0] 成为 centerX 和 centerY。我不知道你为什么想要那个，因为它们已经是传递给函数的值了。

score 0 · Accepted Answer

我可以通过将步数乘以 2 自己解决它：

circle: function(radius, steps, centerX, centerY){
    var xValues = [centerX];
    var yValues = [centerY];
    for (var i = 1; i < steps; i++) {
        xValues[i] = (centerX + radius * Math.cos(Math.PI * i / steps*2-Math.PI/2));
        yValues[i] = (centerY + radius * Math.sin(Math.PI * i / steps*2-Math.PI/2));
   }
}

javascript - 圆坐标到Javascript中的数组

6 回答 6

Related

Reference