Kreis-Koordinaten an array in Javascript

Question

Was ist der beste Weg, um die Koordinaten des Kreises zu einem array in JavaScript?Bisher habe ich nur in der Lage war einen halben Kreis, aber ich brauche eine Formel, die gibt dem ganzen Kreis auf zwei verschiedene arrays: xValues und yValues.(Ich versuche, die Koordinaten, so kann ich animieren Sie ein Objekt entlang eines Pfads.)

Hier ist, was ich habe, so weit:

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

Ihre Schleifen wie dies stattdessen aufgebaut werden sollen:

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

• Starten Sie Ihre Schleife bei 0
• Schritt durch den gesamten 2 * PI-Bereich, nicht nur PI.
• Sie sollten nicht die var xValues = [centerX]; var yValues = [centerY]; haben -. Die Mitte des Kreises ist nicht ein Teil davon

Answer 2

Bresenham-Algorithmus ist viel schneller. Sie hören davon in Bezug auf gerade Linien zeichnen, aber es gibt eine Form des Algorithmus für die Kreise.

Ob Sie verwenden oder mit den trigonometrischen Berechnungen (die sekundenschnell und sind in diesen Tagen) - Sie benötigen nur 1/8 des Kreises zu zeichnen. Durch x Swapping, y Sie eine weitere 1/8 bekommen, und dann die negative von x, y, und von beiden - getauscht und nicht vertauscht - gibt Ihnen Punkte für den ganzen Rest des Kreises. Eine Beschleunigung von 8x!

Answer 3

Ändern:

Math.PI * i / steps

zu:

2*Math.PI * i / steps

Ein Kreis ist 2pi Radiant, und Sie werden nur zu pi Radian.

Answer 4

Wenn Sie bereits einen halben Kreis haben, spiegeln nur die Punkte, die andere Hälfte
bekommen stellen Sie sicher, dies zu tun in der richtigen Reihenfolge.

mehr speficically, für die andere Hälfte Sie einfach ersetzen Sie die „+ sin(...)“ mit einem „- sin(...)“

Answer 5

Sie müssen mit einer partiellen Funktion zur Eingabe der Bogenmaß in cos und Sünde.daher nehmen die Werte, die Sie bekommen, für ein Viertel oder die Hälfte des Kreises, und spiegeln Sie Sie über die Mitte Punkte' - Achse, um Ihre volle Kreis.

Das sagte JavaScript, sin und cos sind nicht ganz so wählerisch, so müssen Sie halbiert Ihr Rad oder so etwas;Ich würde es schreiben als:

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

Ich vermutete, dass Sie aus irgendeinem Grund wollte xValues[0] und yValues[0] werden centerX und centerY.Ich kann nicht herausfinden, warum würden Sie wollen, wie Sie sind übergebenen Werte in die Funktion bereits.

Answer 6

Ich war in der Lage, es selbst zu lösen, indem die Anzahl der Schritte, die von 2 multipliziert:

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