javascript - Javascriptで配列する円座標

Question

JavaScriptで円の座標を配列に追加する最良の方法は何ですか? これまでのところ、半円しかできませんでしたが、円全体を 2 つの異なる配列とに返す式が必要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 から開始します
PI だけでなく、2 * PI 範囲全体をステップ実行します。
円の中心は円の一部ではありませvar xValues = [centerX]; var yValues = [centerY];ん。

score 8 · Accepted Answer

Bresenham のアルゴリズムはずっと高速です。直線を描くことでよく耳にしますが、円のアルゴリズムには形式があります。

それを使用するか、三角関数の計算 (最近では非常に高速です) を続行するかに関係なく、円の 8 分の 1 を描くだけで済みます。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 に入力するには、部分関数を使用する必要があります。したがって、円の 4 分の 1 または 2 分の 1 の値を取得し、それらを中心点の軸に反映して完全な円を取得します。

とはいえ、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