Dies ist nur eine Spielwiese.
Das echte SELFHTML-Wiki gibt es unter https://wiki.selfhtml.org.

SVG und JavaScript/Polygone und Sterne

SELFHTML e.V.
Wechseln zu: Navigation, Suche

Dieser Beitrag demonstriert, wie man mit JavaScript geometrische Grundformen wie Polygone und Sterne berechnen und erzeugen kann. SVG bietet bereits einige Grundformen wie Kreise und Ellipsen, aber keine Quadrate oder Polygone an. Das rect-Element (ein viereckiges Polygon) unterscheidet sich von den vorher erwähnten, dass es nicht um einen Mittelpunkt herum gezeichnet wird, sondern von der linken, oberen Ecke ausgeht, was z.B. eine Rotation um sich selbst erschwert.

In den Vorarbeiten zu SVG 2.0 wurde ein <star>-Element vorgeschlagen[1], das sich aber nicht durchsetzen konnte. Doug Schepers zeigte in einem Artikel 2005, wie man regelmäßige Vielecke erzeugt.[2]

Ein Einsatz von Custom Elements ist in SVG (noch) nicht möglich, sodass sich dieses Tutorial darauf beschränkt, ein Polygon-Element mit den entsprechenden Koordinaten als points-Attribut zu erzeugen. Radius und Anzahl der Seiten werden in data-Attributen gespeichert.

https://www.mathematische-basteleien.de/stars.htm

https://stackoverflow.com/questions/12813573/position-icons-into-circle

Mathematik

Regelmäßiges Polygon

Sterne

In der Geometrie versteht man unter einem regelmäßigen Stern ein normalerweise nichtkonvexes regelmäßiges Polygon, dessen Kanten alle gleich lang sind.

Regelmäßige Sterne sind spiegelsymmetrisch und rotationssymmetrisch. Symmetriezentrum ist der Mittelpunkt von Umkreis und Inkreis. Die Winkel, Längen und Flächeninhalte, die die gleiche Lage zum Symmetriezentrum haben, sind daher gleich. Unter anderem sind alle Seitenlängen und alle Innenwinkel gleich.[3]

http://www.mywebsolution.de/tutorials/8/page_2/show_Stern-mit-PHP-erstellen-Geometrische-Grundlagen-eines-Sterns.html#up

https://dillieodigital.wordpress.com/2013/01/16/quick-tip-how-to-draw-a-star-with-svg-and-javascript/

Wenn man n Arme hat, hat man am Ende 2n Scheitelpunkte, wobei die geraden auf dem äußeren Kreis und die ungeraden auf dem inneren Kreis liegen. Von der Mitte aus gesehen sind die Scheitelpunkte in gleichmäßigen Winkeln angeordnet (der Winkel beträgt 2*PI/2*n = Pi/n). Auf einem Einheitskreis (r=1) sind die x,y-Koordinaten der Punkte i=0..n cos(x),sin(x).

Multiplizieren Sie diese Koordinaten mit dem jeweiligen Radius (rOuter oder rInner, je nachdem, ob i ungerade oder gerade ist), und addieren Sie diesen Vektor zum Mittelpunkt des Sterns, um die Koordinaten für jeden Scheitelpunkt in der Sternbahn zu erhalten.

Hier ist die Funktion zur Erzeugung einer Sternform mit gegebener Anzahl von Armen, Mittelpunktskoordinate und äußerem, innerem Radius: 

public static Shape createStar(int arms, Point center, double rOuter, double rInner) {
    double angle = Math.PI / arms;

    GeneralPath path = new GeneralPath();

    for (int i = 0; i < 2 * arms; i++) {
        double r = (i & 1) == 0 ? rOuter : rInner;
        Point2D.Double p = new Point2D.Double(
            center.x + Math.cos(i * angle) * r, 
            center.y + Math.sin(i * angle) * r);
        if (i == 0) {
            path.moveTo(p.getX(), p.getY());
        }
        else {
            path.lineTo(p.getX(), p.getY());
        }
    }
    path.closePath();
    return path;
}


https://stackoverflow.com/questions/2710065/drawing-star-shapes-with-variable-parameters

Spirographien


Weblinks

  1. ↑ W3C Mailing Lists: Proposal: <star> element von Paul LeBeau (12.03.2014)
  2. ↑ doug schepers: basicShapes polygon and stars
  3. ↑ Stern (Geometrie) (de.wikipedia.org)


Abgerufen am 27.03.2026
von "http://wiki-test.selfhtml.org/wiki/SVG_und_JavaScript/Polygone_und_Sterne"