Wie zeichne ich bei einem Kreis mit einem Radius von (200.200) und einem Radius von 25 einen Bogen von 270 bis 135 Grad und einen von 270 bis 45 Grad?
0 Grad bedeutet, dass es sich direkt auf der x-Achse (der rechten Seite) befindet (was bedeutet, dass es sich um eine 3-Uhr-Position handelt). 270 Grad bedeutet, dass es sich um eine 12-Uhr-Position handelt, und 90 Grad bedeutet, dass es sich um eine 6-Uhr-Position handelt
Allgemeiner gesagt, was ist ein Pfad für einen Bogen für einen Teil eines Kreises mit
x, y, r, d1, d2, direction
Bedeutung
center (x,y), radius r, degree_start, degree_end, direction
arcSweep
Variable tatsächlich denlarge-arc-flag
Parameter svg A steuert . Im obigen Code ist der Wert für densweep-flag
Parameter immer Null.arcSweep
sollte wahrscheinlich in so etwas umbenannt werdenlongArc
.endAngle - 0.0001
folgt zu schneiden: Wenn nicht, wird der volle Bogen nicht gerendert.Sie möchten den elliptischen
A
Befehl rc verwenden . Leider müssen Sie dafür die kartesischen Koordinaten (x, y) der Start- und Endpunkte und nicht die Polarkoordinaten (Radius, Winkel) angeben, die Sie haben. Sie müssen also etwas rechnen. Hier ist eine JavaScript-Funktion, die funktionieren sollte (obwohl ich sie noch nicht getestet habe) und die hoffentlich ziemlich selbsterklärend ist:Welche Winkel welchen Taktpositionen entsprechen, hängt vom Koordinatensystem ab. Tauschen und / oder negieren Sie einfach die sin / cos-Begriffe nach Bedarf.
Der Befehl arc hat folgende Parameter:
Für Ihr erstes Beispiel:
rx
=ry
= 25 undx-axis-rotation
= 0, da Sie einen Kreis und keine Ellipse wollen.M
Mit der obigen Funktion können Sie sowohl die Startkoordinaten (zu denen Sie übergehen sollten ) als auch die Endkoordinaten (x, y) berechnen. Dies ergibt (200, 175) bzw. ungefähr (182.322, 217.678). Angesichts dieser Einschränkungen können tatsächlich vier Bögen gezeichnet werden, sodass die beiden Flags einen davon auswählen. Ich vermute, Sie möchten wahrscheinlich einen kleinen Bogen (Bedeutunglarge-arc-flag
= 0) in Richtung des abnehmenden Winkels (Bedeutungsweep-flag
= 0) zeichnen . Insgesamt lautet der SVG-Pfad:Für das zweite Beispiel (vorausgesetzt, Sie meinen die gleiche Richtung und damit einen großen Bogen) lautet der SVG-Pfad:
Auch diese habe ich nicht getestet.
(Bearbeiten des 01.06.2016) Wenn Sie sich wie bei @clocksmith fragen, warum sie diese API gewählt haben, lesen Sie die Implementierungshinweise . Sie beschreiben zwei mögliche Bogenparametrisierungen, "Endpunktparametrisierung" (die von ihnen gewählte) und "Mittelparametrisierung" (wie in der Frage verwendet). In der Beschreibung der "Endpunktparametrisierung" heißt es:
Im Grunde ist es ein Nebeneffekt, wenn Bögen als Teil eines größeren Pfades betrachtet werden und nicht als eigenständiges Objekt. Ich nehme an, wenn Ihr SVG-Renderer unvollständig ist, kann er einfach alle Pfadkomponenten überspringen, die er nicht rendern kann, solange er weiß, wie viele Argumente er benötigt. Oder es ermöglicht das parallele Rendern verschiedener Abschnitte eines Pfads mit vielen Komponenten. Oder vielleicht haben sie es getan, um sicherzustellen, dass sich auf der Länge eines komplexen Pfades keine Rundungsfehler gebildet haben.
Die Implementierungshinweise sind auch für die ursprüngliche Frage nützlich, da sie mehr mathematischen Pseudocode für die Konvertierung zwischen den beiden Parametrisierungen enthalten (was mir beim ersten Schreiben dieser Antwort nicht klar war).
quelle
large-arc-flag
von 0 auf 1 umgeschaltet werden muss, könnte ein Fehler auftreten.Ich habe die Antwort von opsb leicht modifiziert und zur Unterstützung des Kreissektors ausgefüllt . http://codepen.io/anon/pen/AkoGx
JS
HTML
quelle
centerX
,centerY
bis 100 zum Beispiel.viewBox="0 0 500 500"
Dies ist eine alte Frage, aber ich fand den Code nützlich und ersparte mir drei Minuten Nachdenken :) Also füge ich der Antwort von @opsb eine kleine Erweiterung hinzu .
Wenn Sie diesen Bogen in ein Slice konvertieren möchten (um das Füllen zu ermöglichen), können Sie den Code geringfügig ändern:
und los geht's!
quelle
Die Antworten von @ opsb sind ordentlich, aber der Mittelpunkt ist nicht genau, außerdem, wie @Jithin feststellte, wenn der Winkel 360 ist, wird überhaupt nichts gezeichnet.
@Jithin hat das 360-Problem behoben. Wenn Sie jedoch weniger als 360 Grad ausgewählt haben, wird eine Linie angezeigt, die die Bogenschleife schließt, was nicht erforderlich ist.
Ich habe das behoben und im folgenden Code einige Animationen hinzugefügt:
quelle
Ich wollte die Antwort von @Ahtenus kommentieren, insbesondere den Kommentar von Ray Hulha, wonach der Codepen keinen Bogen zeigt, aber mein Ruf ist nicht hoch genug.
Der Grund dafür, dass dieser Codepen nicht funktioniert, ist, dass sein HTML-Code mit einer Strichbreite von Null fehlerhaft ist.
Ich habe es behoben und hier ein zweites Beispiel hinzugefügt: http://codepen.io/AnotherLinuxUser/pen/QEJmkN .
Das HTML:
Das relevante CSS:
Das Javascript:
quelle
Ein Bild und etwas Python
Nur um besser zu klären und eine andere Lösung anzubieten.
Arc
DerA
Befehl [ ] verwendet die aktuelle Position als Ausgangspunkt, daher müssen SieMoveto
zuerst den Befehl [M] verwenden.Dann sind die Parameter von
Arc
den folgenden:Wenn wir zum Beispiel die folgende SVG-Datei definieren:
Sie setzen den Startpunkt mit
M
dem Endpunkt mit den Parameternxf
undyf
vonA
.Wir suchen Kreise so setzten wir
rx
gleichry
so im Grunde jetzt tut es wird versuchen , alle Kreis mit dem Radius zu finden ,rx
dass sie schneiden den Anfangs- und Endpunkt.Eine ausführlichere Erklärung finden Sie in diesem Beitrag , den ich geschrieben habe.
quelle
Hinweis für die Antwortsuchenden (die ich auch war): Wenn die Verwendung von arc nicht obligatorisch ist , ist die Verwendung
stroke-dasharray
von SVG eine weitaus einfachere Lösung zum Zeichnen eines Teilkreises<circle>
.Teilen Sie das Stricharray in zwei Elemente und skalieren Sie deren Bereich auf den gewünschten Winkel. Der Startwinkel kann mit eingestellt werden
stroke-dashoffset
.Kein einziger Kosinus in Sicht.
Vollständiges Beispiel mit Erläuterungen: https://codepen.io/mjurczyk/pen/wvBKOvP
quelle
Die ursprüngliche polarToCartesian-Funktion von wdebeaum ist korrekt:
Umkehren von Start- und Endpunkten mit:
Ist (für mich) verwirrend, weil dies die Sweep-Flagge umkehren wird. Verwenden von:
mit dem Sweep-Flag = "0" zeichnet "normale" Bögen gegen den Uhrzeigersinn, was ich für einfacher halte. Siehe https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
quelle
Eine leichte Änderung an der Antwort von @ opsb. Mit dieser Methode können wir keinen vollen Kreis zeichnen. dh wenn wir (0, 360) geben, wird überhaupt nichts gezeichnet. Also eine kleine Modifikation, um dies zu beheben. Es kann nützlich sein, Werte anzuzeigen, die manchmal 100% erreichen.
quelle
ES6-Version:
quelle
const d = `M ${start.x} ${start.y} A ${radius} ${radius} 0 ${largeArc} 0 ${end.x} ${end.y}`
ReactJS-Komponente basierend auf der ausgewählten Antwort:
quelle
Sie können den JSFiddle-Code verwenden, den ich oben für die Antwort erstellt habe:
https://jsfiddle.net/tyw6nfee/
Alles, was Sie tun müssen, ist, den Code der Konsole in der letzten Zeile zu ändern und ihm Ihren eigenen Parameter zu geben:
quelle