Wie zeichnet man einen radialsymmetrischen 5-Punkt-Stern?

7

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.

androidguy
quelle
1
Sie können Adobe Illustrator Star Tool
iamcastelli
2
Ob dies "schwierig" ist oder nicht, ist ziemlich meinungsbasiert und hängt von einer Erfahrung ab. Was ist Ihre eigentliche Frage, die Sie stellen? Auf welche Software haben Sie Zugriff? Was kostet "Low Cost"?
Zach Saucier
Wenn Sie nun Ihre Bildgröße minimieren möchten und sie aus irgendeinem Grund quadratisch sein muss (ein Rechteck ist kleiner), berührt das kleinstmögliche Rechteck Ihren Stern in 2 Punkten. Nur Ihr Stern wurde um 9 Grad gedreht.
Jojajaa

Antworten:

12

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.

Geben Sie hier die Bildbeschreibung ein

  1. 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.

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

Geben Sie hier die Bildbeschreibung ein

  1. 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.

Geben Sie hier die Bildbeschreibung ein

  1. Gruppieren Sie sowohl Quadrat als auch Stern.

  2. 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.

Geben Sie hier die Bildbeschreibung ein

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

Billy Kerr
quelle
Ich mag den Sound dieser Methode, obwohl ich sie nicht verwenden musste, weil ich zum Glück etwas mit Sketch gefunden habe, einer App, von der ich zuvor gehört hatte und die ich untersuchen wollte. Ich würde das definitiv tun, wenn ich ein Problem mit Sketch hätte.
AndroidGy
18

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.

Geben Sie hier die Bildbeschreibung ein

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!

Digital Lightcraft
quelle
Dies zeigt definitiv, wie man es konstruiert. Ich wusste nicht, dass das Zeichnen der Linie vom äußeren Scheitelpunkt zurück durch die Mitte den Punkt entlang des inneren Kreises auf der anderen Seite identifiziert. Der letzte schwierige Teil über die manuelle Konstruktion für ein Grafikprogramm, das wie ich ignoramus war, wäre gewesen, einen geschlossenen Pfad mit den Segmenten zu bilden, damit ich die Poly mit einer Farbe füllen konnte.
AndroidGy
Wenn Sie den Pfad wieder schließen (in AI), wird er zu einem geschlossenen Pfad, sobald Sie die letzte Verbindung hergestellt haben. Schade, dass Sie nicht das Gefühl hatten, dass dies die Antwort war :-(
Digital Lightcraft
12

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

Geben Sie hier die Bildbeschreibung ein

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.

joojaa
quelle
1
+1, um die "kostengünstige Software" zu einem beliebigen Texteditor zu machen. Das SVG-Beispiel ist genau das, was OP benötigt.
JollyJoker
Das Live-Beispiel scheint jedoch radialsymmetrisch zu sein. Ich bin mir nicht sicher, wie Sie auf die Punkte für seinen Weg gekommen sind. Ich sicherlich könnte haben die def dort verwendet, wenn ich mit Sketch nicht Glück tat heraus.
AndroidGy
@androidguy Es ist radialsymmetrisch, siehe: codepen.io/anon/pen/zzPJoX?editors=1100 Zwischen den Punkten befindet sich ein Winkel von 36 Grad. Verwenden Sie auf jeden Fall die parametrische Funktion für einen Kreis.
Joojaa
Sie scheinen eine andere Definition von "Bounding" als OP zu verwenden. Beachten Sie diesen Satz aus der ursprünglichen Frage: "Es ist wichtig zu beachten, dass höchstens (glaube ich) 1 Punkt des Sterns das Quadrat berührt." Dies zeigt an, dass das Begrenzungsquadrat nicht der Standard- "Begrenzungsrahmen" ist, dh das Rechteck mit minimaler Größe, das den Stern enthält.
Kyle Strand
@KyleStrand Aber das ist nicht minimal, die minimale Box hat 3 Punkte in der Box, obwohl sie sich eine Mitte teilen. Die Form einer Bitmap kann ein beliebiger rechteckiger Bereich sein und muss nicht quadratisch sein. Aber ja, ein minimales Rechteck in einer senkrechten Ausrichtung berührt 1 Punkt. Oder möglicherweise berührt kein Punkt, wenn es gedreht wird. Ich minimiere die Funktion. Ist aber für die Rendering-Engine nicht vernünftig.
Jojajaa
1

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.

Pete Kirkham
quelle
1
Kann dies dann bei Bedarf als Ganzes um den Mittelpunkt des Kreises gedreht werden?
Digital Lightcraft
Ja, der Stern ist auf dem Kreis zentriert.
Pete Kirkham
0

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.

user97437
quelle
0

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.

androidguy
quelle