Wie zeichnet man einen radialsymmetrischen 5-Punkt-Stern?

Ich suche einen 5-Punkt-Stern, den ich als Teil einer Benutzeroberfläche drehen kann. Daher sollte sich die Mitte des Sterns nicht bewegen - ansonsten sieht es seltsam aus.

Unabhängig davon, woher ich einen 5-Punkt-Stern bekomme, befindet sich die Mitte des Sterns nicht in der Bildmitte.

Ich bin zuversichtlich, dass eine solche Form existiert, weil:

• Es ist möglich, ein radialsymmetrisches Fünfeck herzustellen. Jeder Scheitelpunkt ist auf dem umschriebenen Kreis 72 Grad voneinander entfernt.
• Ein solcher Stern kann durch ein Quadrat begrenzt werden, da der Kreis ein Quadrat umschreiben kann; höchstens (glaube ich) 1 Punkt des Sterns berührt das Quadrat. Es ist möglich, ein quadratisches Objekt mit einem radialsymmetrischen Stern zu haben, wobei die Mitte des Sterns in der Mitte des Quadrats liegt.

Wenn ich eine solche Form erstellen wollte, welche kostengünstige Software könnte ich verwenden und wie würde der grundlegende Prozess aussehen? Da ich nach radialer Symmetrie suche, stelle ich mir vor, mit einem perfekten Fünfeck zu beginnen, ist der Schlüssel. Ich erwarte, dass der schwierigste Teil des Prozesses darin besteht, sicherzustellen, dass alle 10 Kanten des Sterns gleich lang sind.

Hier ist eine einfache Methode mit Inkscape (dot) org, die kostenlos und Open Source ist.

Das Hauptproblem besteht darin, dass sich das Rotationszentrum eines Sterns vom Rotationszentrum seines Begrenzungsrahmens unterscheidet. Damit sich alles symmetrisch dreht, müssen Sie den Stern in ein Quadrat setzen und beide Rotationszentren anpassen.

1. Aktivieren Sie in der Fang-Symbolleiste am rechten Rand des Anwendungsfensters Fang, Fangknoten, Höckerknoten fangen und Rotationszentren des Fangobjekts.

2. Klicken und ziehen Sie eine horizontale und vertikale Hilfslinie aus den Linealen und stellen Sie sicher, dass sich die Knoten schneiden.

3. Zeichnen Sie mit dem auf die Sternoption eingestellten Polygonwerkzeug und 5 Ecken einen fünfzackigen Stern. Wenden Sie einen Strich und keine Füllung an, um die Sichtbarkeit zu verbessern.

4. Klicken und ziehen Sie die Sternform über den von Ihnen erstellten Ursprung und lassen Sie sie am Rotationszentrum einrasten.

5. Wählen Sie das Rechteck-Werkzeug, bewegen Sie den Mauszeiger über den Ursprung, bis er angezeigt wird, halten Sie die Umschalttaste + STRG gedrückt, während Sie klicken und ziehen, um ein Quadrat zu erstellen, das um den Ursprung zentriert ist.

6. Gruppieren Sie sowohl Quadrat als auch Stern.

7. Wenn Sie fertig sind, können Sie den Strich des Quadrats entfernen, eine Füllung auf den Stern anwenden und dann mit der Option "Alle außer ausgewählten ausblenden" als PNG exportieren. Das Ergebnis ist ein PNG mit transparentem quadratischem Hintergrund, bei dem sich beide Rotationszentren des Quadrats und des Sterns an derselben Stelle befinden.

Wenn Sie das Inkscape SVG möchten, ist es hier

Ein 5- Punkt- Stern ist radialsymmetrisch - Das Problem hierbei ist, dass das Rotationszentrum um den vertikalen Abstand (in diesem Beispiel) zwischen dem oberen Punkt und den unteren 2 Punkten verzerrt ist.

OK, wie Sie IHR Problem lösen können ... Ich weiß nicht, an welcher Art von Benutzeroberfläche Sie arbeiten oder welche Asset-Typen darin verwendet werden können. Nehmen wir jedoch an, Sie können ein quadratisches PNG mit transparentem Hintergrund verwenden.

Ich würde das PNG einfach so speichern, dass die radiale Mitte des Sterns mit der diagonalen Mitte des Hintergrunds ausgerichtet ist. Wenn Sie sich dann drehen, bleibt es zentriert.

Um diese Form zu erstellen, habe ich Illustrator verwendet, das keineswegs billig ist, aber es gibt kostenlose / billige Vector-Pakete. Ich habe 2 Kreise gezeichnet, einen für den Außendurchmesser des Sterns, einen für den Innendurchmesser. Ich habe dann 5 Linien festgelegt, die die Mitte schneiden und jeweils um 72 Grad voneinander gedreht sind.

Dann habe ich Linien gezeichnet, um die äußeren Punkte mit den inneren Punkten zu verbinden, an denen diese die Kreise schneiden. Simples!

Wie Sie bemerkt haben, gibt es tatsächlich keinen gleichseitigen symmetrischen fünfseitigen Stern, der die Anforderung erfüllt, ein Zentrum dort zu haben, wo sich das Begrenzungsrahmenzentrum des Sterns befindet. Bildsysteme neigen dazu, den Überschuss wegzuschneiden.

Die Mitte eines Objekts ist eine komplizierte Sache. Die Mitte eines Begrenzungsrahmens entspricht selten der Mitte eines Objekts. Leider ist Center ein diffuses Konzept. Unabhängig davon, was Sie als Center-Metrik wählen, wird es von Zeit zu Zeit falsch verstanden. (Weitere Diskussionen dazu finden Sie hier .)

Fast universelle Systeme nehmen jetzt den einfachen Ausweg und definieren das Begrenzungsrahmenzentrum als Objektzentrum. Das ist in Ordnung, wenn Sie ein anderes Zentrum wünschen, umgeben Sie Ihr Objekt einfach mit einer unsichtbaren Box oder einem unsichtbaren Kreis, der ausreichend groß und zentriert ist, wo Sie es möchten. Es kann eine Kante berühren, wenn Sie möchten, aber das ist nicht unbedingt erforderlich (und auch nicht unbedingt die kompakteste oder problemloseste Darstellung).

Bild 1 : Drehen Sie sich um die BB-Mitte.

Alternativ können Sie Gruppen verwenden, um das Zentrum zu finden. Im Wesentlichen wird die Position des Zentrums gespeichert, sodass es jetzt nicht mehr darauf ankommt, welche Form das Bild hat. Und hier ist ein Live- SVG-Beispiel für die Verwendung der Gruppierungsmethode.

Was Ihnen einfacher erscheint, ist die spätere Methode in komplizierten Fällen oder in Fällen, in denen Sie die Mitte als Bildrand betrachten, kompakter, da Sie nur 2 Floats speichern müssen. Wenn Sie dagegen eine Bitmap mit viel leerem Speicherplatz haben, verschwenden Sie viel mehr Speicher.

Mit dieser grundlegenden SVG-Datei können Sie eine in Ihrem Browser erstellen. Es sind keine weiteren Tools erforderlich:

<svg  xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 0 100 100">
    <defs> 
        <!-- change the two 20 values to make rays thicker or thinner -->
        <path id="ray" d="M-20,0 L0,-50 L20,0 Z"/>
    </defs>

    <g style="stroke:none; fill: black" transform="translate(50,50)">
        <!-- five points of star -->
        <use xlink:href="#ray"/>
        <use transform="rotate(72)" xlink:href="#ray"/>
        <use transform="rotate(144)" xlink:href="#ray"/>
        <use transform="rotate(216)" xlink:href="#ray"/>
        <use transform="rotate(288)" xlink:href="#ray"/>
        <!-- star will be centred on this circle in the green bounding box -->
        <circle r="1" fill="red" stroke="none"/>
        <rect x="-50" y="-50" width="100" height="100" fill="none" stroke="green"/>
    </g>

</svg>

Es definiert ein Dreieck, das als Strahl verwendet werden soll. Es erstellt fünf Kopien davon bei 72-Grad-Umdrehungen (360/5) um den Mittelpunkt eines Quadrats.

Zeichnen Sie einen Kreis und dann einen Akkord, der nicht durch die Mitte verläuft. Gruppieren Sie sie dann und drehen Sie die Gruppe viermal um 72 Grad, wobei Sie sie jedes Mal kopieren. Voila, ein Star. Sie können jetzt die Gruppierung aller Gruppen aufheben, die Linien an jedem Punkt vergrößern und verbinden und die überschüssigen Linien löschen.

Das Problem, das Sie beim Drehen haben, ist, dass das Begrenzungsquadrat nicht in der Mitte des Sterns zentriert ist. Um dies zu beheben, müssen Sie lediglich einen der ursprünglichen Kreise beibehalten, ihn unsichtbar machen, indem Sie ihm keinen Strich geben und ihn füllen, und ihn mit dem Stern gruppieren. Der Begrenzungsrahmen um diesen Kreis ist jetzt konzentrisch zu Ihrem Stern und Sie können ihn nach Herzenslust drehen.

Mit der Mac-App Sketch scheint die Aktion 'Form einfügen -> Stern' genau das zu tun, was ich beim ersten Ziehen verlange. Stellen Sie nur sicher, dass Sie die Größe nicht ändern! Sie können sogar den Innenradius einstellen. Ich habe 38% verwendet.