Kreis-Koordinaten-array in Javascript

Was ist der beste Weg, um die Koordinaten von einem Kreis in ein array in JavaScript? Bisher habe ich nur in der Lage war einen halben Kreis, aber ich brauche eine Formel, die gibt dem ganzen Kreis an zwei verschiedenen arrays: xValues und yValues. (Ich versuche, die Koordinaten, so kann ich die Animation eines Objekts entlang eines Pfades.)

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

InformationsquelleAutor VirtuosiMedia | 2008-09-30

  1. 21

    Deine Schleife sollte wie folgt eingerichtet statt:

    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));
}
    • Start der Schleife auf 0
    • Schritt durch den gesamten 2 * PI Bereich nicht nur PI.
    • Sie sollten nicht den var xValues = [centerX]; var yValues = [centerY]; -- die Mitte des Kreises ist nicht ein Teil von Ihr.
    Außerdem würde ich die Speicherung der phase Berechnung in einer lokalen variable zunächst: var phase = 2 * Math.PI * i / steps;

    InformationsquelleAutor Ates Goral

  2. 7

    Bresenham-Algorithmus ist wesentlich schneller. Sie hören es in Bezug auf das zeichnen von geraden Linien, aber es gibt eine form des Algorithmus für Kreise.

    Ob Sie, oder fahren Sie mit der trig Berechnungen (die sind unglaublich schnell in diesen Tagen), Sie brauchen nur zu ziehen, 1/8 der Kreis. Durch austauschen von x,y kann man eine weitere 1/8. und dann das negative von x, von y, und - vertauscht und unswapped - erhalten Sie Punkte für alle den rest der Kreis. Eine Beschleunigung von 8x!

    InformationsquelleAutor DarenW

  3. 5

    Ändern:

    Math.PI * i / steps

    :

    2*Math.PI * i / steps

    Ein voller Kreis ist 2pi Radianten, und Sie sind nur gehen, um pi Bogenmaß.

    InformationsquelleAutor Greg Hewgill

  4. 1

    Wenn Sie bereits einen halben Kreis, einfach nur Spiegel, die Punkte zu Holen, die andere Hälfte

    stellen Sie sicher, dass Sie dies in der richtigen Reihenfolge.

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

    InformationsquelleAutor shoosh

  5. 1

    Müssen Sie eine partielle Funktion zur Eingabe der Bogenmaß in cos und sin; daher nehmen Sie die Werte, die Sie bekommen, für ein Viertel oder die Hälfte des Kreises, und reflektieren Sie über die center-Punkte' - Achse, um Ihre volle Kreis.

    Sagte, dass JavaScript sin und cos sind nicht ganz so wählerisch, also müssen Sie haben halbiert Ihr Rad oder etwas, ich würde es schreiben wie:

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

    Bin ich davon ausgegangen, dass aus welchem Grund auch immer Sie wollte xValues[0] und yValues[0] centerX und centerY. Ich kann nicht herausfinden, warum Sie wollen, dass, wie Sie übergebenen Werte in der Funktion bereits.

    InformationsquelleAutor dlamblin

  6. 0

    War ich in der Lage, es zu lösen, auf meine eigene, durch Multiplikation der Anzahl der Schritte von 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));
   }
}
    Beachten Sie, dass diese Lösung funktioniert, aber aus einem anderen Grund als dem, was Sie gesagt haben. Sie sagte: "Multiplikation der Anzahl der Schritte von 2" aber dein Ausdruck wirklich bedeutet: ((Math.PI * i) / Schritte)*2 aufgrund der Assoziativität.

    InformationsquelleAutor VirtuosiMedia

Schreibe einen Kommentar