JavaScriptの配列への円座標

StackOverflow https://stackoverflow.com/questions/155649

質問

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));
   }
}
役に立ちましたか？

解決

代わりに、ループを次のように設定する必要があります。

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]; -円の中心はその一部ではありません。

他のヒント

Bresenhamのアルゴリズムははるかに高速です。直線の描画に関連して聞いたことがありますが、円のためのアルゴリズムの形式があります。

それを使用するか、トリガー計算を続行するか（最近では非常に高速です）-円の1/8を描くだけで済みます。 x、yを交換することにより、さらに1/8を取得でき、x、y、およびその両方のマイナス（スワップとアンスワップ）により、残りの円すべてのポイントが得られます。 8倍のスピードアップ！

変更：

Math.PI * i / steps

to：

2*Math.PI * i / steps

完全な円は2piラジアンであり、piラジアンのみになります。

既に半分の円がある場合は、ポイントをミラーリングしてもう半分を取得します
正しい順序でこれを行うようにしてください。

より具体的には、残りの半分については、単に＆quot; + sin（...）＆quot;を置き換えます。 ＆quot; -sin（...）＆quot;

cosとsinにラジアンを入力するには、部分関数を使用する必要があります。したがって、円の4分の1または2分の値を取得し、それらを中心点の軸に反映して完全な円を取得します。

つまり、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にしたいと思っていました。それらが既に関数に渡された値なので、なぜそれが必要なのかわかりません。

ステップ数に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));
   }
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top