2016-07-01 4 views
0

Als ich mich in SVG vertiefe, versuche ich, Ecken in <path> s zu runden.SVG - Mathe hinter abgerundeten Ecken mit A/A oder C/C

Wenn ich Webbeispiele betrachte und mir die Antworten auf ähnliche, aber spezifischere Fragen ansehe, sehe ich, dass die gebräuchlichsten Methoden die Verwendung von Kurven oder Bögen sind.

Die Idee hinter Bögen (A/a) scheint ziemlich geradlinig, aber ein Blog-Beitrag, wie man die Mathematik herausfinden könnte, war nirgends leicht zu finden oder in nicht gut organisierten Websites.

Nachdem ich examples that use C/c gesehen hatte, war ich ziemlich verloren, und ich konnte keinen gut formatierten und vereinigten Blogbeitrag finden.

wäre die Welt greatful, wenn es eine SO mit wenigen Ressourcen an schönen Stellen für Kanten gerundet oder Erläuterung der Mathematik und Implementierung direkt

Die Antwort sollte beantworten war übernehmen: keine Bibliotheken

  • (vielleicht als zusätzliche Referenzen, aber nicht bibliotheks nur Antworten)
  • Pfade mit Ecken bei nicht orthogonalen Winkel (nicht 90 Grad)
  • , wie es bei bestimmten Winkeln leichter wäre/Längen
  • generische Beispiele (bestimmte, aber nicht schwer zu visualisierende Werte, von 100 zum Beispiel) , sind in Ordnung)

die Antwort kann nur Liste gut präsentiert und Ressourcen eingeführt und müssen erklären, was erwartet wird, zusammen mit einer kurzen Beschreibung und Zusammenfassung in den Link zu finden

Antwort

2

welche Mathematik Sie versuchen, herausfinden?

Angenommen, Sie möchten "runde" Ecken, also kreisförmig, dann sind Bögen in den meisten Fällen das, was Sie verwenden möchten. Und es hat den Vorteil, dass es normalerweise keine Mathematik gibt, um das herauszufinden. Sie haben den Startpunkt des Bogens (wo das eingehende Pfadsegment gestoppt wurde). Dann einen Bogen hinzufügen möchten, müssen Sie nur es bieten:

  1. den Radius der Kurve Sie
  2. die Rotation des Lichtbogens in Bezug auf die X-Achse soll. Dies ist 0 für Kreisbögen und damit auch für Ihren Fall.
  3. die große Bogenflagge. Für jeden Lichtbogen gibt es zwei mögliche Lichtbögen: den kürzesten Lichtbogen zwischen den beiden Punkten oder den "langen Weg" um den Kreis herum
  4. die Sweep-Flagge. Das ist die Richtung: im Uhrzeigersinn oder gegen den Uhrzeigersinn
  5. der Endpunkt des Bogens

    enter image description here

Alle wirklich ziemlich einfach. Sie brauchen vielleicht etwas Mathematik, um herauszufinden, wo das Ende des Bogens sein wird, aber das ist es ziemlich viel.

Die vollständige Erklärung aller dieser Parameter für den Befehl A finden Sie im Abschnitt Pfade der SVG-Spezifikation.

https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands

Verwandte Themen