دائرة إحداثيات مجموعة في جافا سكريبت

Question

ما هي أفضل طريقة لإضافة بتنسيق من دائرة إلى صفيف في جافا سكريبت ؟ حتى الآن لقد كنت قادرا على القيام نصف دائرة ، ولكن أريد صيغة التي ترجع كلها دائرة على اثنين صفائف مختلفة: 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));
   }
}

Answer 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]; -- مركز الدائرة هو ليس جزءا منه.

Answer 2

Bresenham خوارزمية هو أسرع وسيلة.تسمع منه فيما يتعلق رسم خطوط مستقيمة ، ولكن هناك شكل خوارزمية الدوائر.

إذا كنت تستخدم هذا أو تواصل مع حساب المثلثات الحسابات (التي هي بتوهج بسرعة هذه الأيام) - تحتاج فقط إلى رسم 1/8 من الدائرة.عن طريق مبادلة x,y يمكنك الحصول على آخر 1/8 ، ثم السلبية من x, y, و كل من - تبادلت و unswapped - يعطيك نقاط على كل ما تبقى من الدائرة.على تسريع من 8x!

Answer 3

التغيير:

Math.PI * i / steps

إلى:

2*Math.PI * i / steps

دائرة كاملة هو 2pi راديان ، كنت فقط إلى باي راديان.

Answer 4

إذا كان لديك نصف دائرة فقط مرآة النقاط للحصول على النصف الآخر
تأكد من القيام بذلك في حق النظام.

أكثر speficically ، أما النصف الآخر يمكنك ببساطة استبدال "+ sin(...)"مع "- sin(...)"

Answer 5

تحتاج إلى استخدام وظيفة جزئية إلى إدخال راديان في كوس و الخطيئة ؛ ولذلك تأخذ القيم أنك تحصل على ربع أو نصف دائرة ، ويعرضها على مركز نقطة' محور للحصول على دائرة كاملة.

وقال جافا سكريبت ذنب لأنه ليست تماما كما من الصعب إرضاءه ، لذلك يجب أن يكون النصف الخاص بك راديان أو شيء ؛ كنت أكتب على أنها:

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.أنا لا يمكن معرفة لماذا كنت تريد أن, كما انهم القيم التي تم تمريرها إلى الدالة بالفعل.

Answer 6

كنت قادرا على حلها بمفردي عن طريق ضرب عدد من الخطوات من 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));
   }
}