圓形座標到Javascript中的數組

在JavaScript中將圓的座標添加到數組的最佳方式是什麼？到目前爲止，我只能做一個半圈，但我需要一個公式將整個圓圈返回到兩個不同的數組：xValues和yValues。（我試圖獲取座標，所以我可以沿着路徑動畫的對象。）圓形座標到Javascript中的數組

這是我到目前爲止有：

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

來源

2008-09-30 VirtuosiMedia

你的循環應該建立這樣的替代：

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

來源

2008-10-01 00:12:09

另外，我會首先將相位計算存儲在局部變量中：`var phase = 2 * Math.PI * i/steps;` – 2010-06-03 20:58:41

如果你已經有半個圈，只要鏡像點以獲得另一半
確保你以正確的順序做到這一點。

更speficically，另一半你只是一個「- sin(...)」

來源

2008-09-30 23:59:53 shoosh

您需要使用的部分功能，輸入弧度到COS和罪取代「+ sin(...)」;因此請將您得到的值作爲圓的四分之一或一半，並在中心點的軸上反射以獲得完整的圓。

這就是說JavaScript的罪惡和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。我無法弄清楚你爲什麼要這樣做，因爲它們已經將值傳遞給了函數。

來源

2008-10-01 00:02:48 dlamblin

我能夠通過的步數相乘來解決它在我自己的以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)); 
    } 
}

來源

2008-10-01 00:11:54 VirtuosiMedia

請注意，此解決方案有效，但出於與您聲明不同的原因。你說「把步數乘以2」，但你的表達式實際上意味着：（（Math.PI * i）/ steps）* 2由於關聯性。 – 2008-10-01 00:19:26

Bresenham的算法速度更快。你可以聽到它與繪製直線有關，但是有一種形式的圓圈算法。

無論你是使用它還是繼續使用trig計算（這些天都很快） - 你只需要畫圓的1/8。通過交換x，y你可以得到另一個1/8，然後x，y的負數，以及兩個 - 交換和未交換 - 給你所有其餘的圓的點。加速8倍！

來源

2008-10-01 00:14:34 DarenW

變化：

Math.PI * i/steps

到：

2*Math.PI * i/steps

一個完整的圓是2PI弧度，而你只打算PI弧度。

來源

2008-10-01 00:16:25

圓形座標到Javascript中的數組

回答

相關問題