在Javascript中将圆坐标转换为数组答案

【问题标题】：Circle coordinates to array in Javascript在Javascript中将圆坐标转换为数组
【发布时间】：2010-09-14 09:56:58
【问题描述】：

在 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));
   }
}

【问题讨论】：

有趣的事实： var π=Math.PI; 是语法上有效的 JavaScript；然后你可以用它的实际符号来引用 π，例如，var x=radius*Math.cos(angle*180/π), y=radius*Math.sin(angle*180/π);

标签： javascript arrays geometry formula

【解决方案1】：

你的循环应该这样设置：

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]; - 圆的中心不是它的一部分。

【讨论】：

另外，我会先将相位计算存储在一个局部变量中：var phase = 2 * Math.PI * i / steps;
如果有 'i' 变量，你如何存储相位？

【解决方案2】：

您需要使用偏函数将弧度输入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。我不明白你为什么想要那个，因为它们已经是传递给函数的值了。

【讨论】：

【解决方案3】：

变化：

Math.PI * i / steps

到：

2*Math.PI * i / steps

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

我可以通过将步数乘以 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));
   }
}

【讨论】：

请注意，此解决方案有效，但原因与您所说的不同。您说“将步数乘以 2”，但您的表达实际上是指：((Math.PI * i) / steps)*2 由于关联性。

【解决方案6】：

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

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

【讨论】：