放射状に対称な5つ星の星を描く方法は？

ユーザーインターフェイスの一部として回転できる5角の星を探しています。したがって、星の中心は動かないはずです。そうでなければ、奇妙に見えます。

しかし、どこから5つ星の星を取得しても、星の中心は画像の中心にありません。

次の理由により、このような形状が存在すると確信しています。

• 放射状に対称な五角形を作ることができます。各頂点は、外接円上で72度離れています。
• 円は正方形を囲むことができるので、そのような星は正方形で囲まれている可能性があります。せいぜい（私は思う）星の1ポイントが正方形に接触します。正方形の中心に星の中心がある、放射状に対称的な星を含む正方形のアセットを持つことが可能です。

そのような形にしたいのであれば、どのような低コストのソフトウェアを使用でき、基本的なプロセスはどうなりますか？放射状の対称性を探しているので、完全な五角形から始めることが重要だと思います。プロセスの最も難しい部分は、星の10個のエッジすべてが同じ長さになるようにすることです。

これは無料でオープンソースのInkscape（dot）orgを使用した簡単な方法です。

主な問題は、星の回転の中心がバウンディングボックスの回転の中心とは異なることです。したがって、すべてを対称的に回転させるには、星を正方形の中に入れ、両方の回転中心を一致させる必要があります。

1. アプリケーションウィンドウの右端にあるスナップツールバーで、[スナップ]、[ノードのスナップ]、[カスプノードのスナップ]、[アイテムの回転中心のスナップ]を有効にします。

2. 定規から水平および垂直ガイドをクリックしてドラッグし、ノードが交差することを確認します。

3. 星型オプションに設定されたポリゴンツールと5つのコーナーを使用して、5つの尖った星を描きます。見やすくするために、ストロークと塗りなしを適用します。

4. 星の形をクリックして作成した原点の上にドラッグし、回転の中心にスナップできるようにします。

5. 長方形ツールを選択し、それが表示されるまで原点の上にマウスを置き、Shift + CTRLを押しながらクリックしてドラッグし、原点を中心とする正方形を作成します。

6. 正方形と星の両方をグループ化します。

7. 終了したら、正方形のストロークを削除し、星に塗りつぶしを適用してから、[選択したもの以外をすべて非表示]オプションを使用してPNGとしてエクスポートできます。結果は、正方形と星の両方の回転中心が同じ場所にある、透明な正方形の背景を持つPNGです。

Inkscape SVGが必要な場合は、ここにあります

5つの尖った星は放射状に対称です -ここでの問題は、回転の中心が上部の点と下部の2点の垂直距離（この例では）によって歪んでいることです。

OK、問題の解決方法...作業しているUIの種類や、その中で使用できるアセットの種類はわかりません。しかし、背景が透明な正方形の.PNGを使用できると仮定しましょう。

星の放射状の中心と背景の対角線の中心を揃えてPNGを保存するだけで、回転しても中心にとどまります。

この形を作るために私はIllustratorを使用しました。これは決して安価ではありませんが、無料/安価なVectorパッケージが利用可能です。星の外径用と内部用の2つの円を描きました。次に、中心と交差する5本の線を設定し、それぞれを互いに72度回転させます。

次に、外側の点と内側の点が円と交差する点を結ぶ線を描きました。シンプル！

実際、お気づきのように、星のバウンディングボックスの中心がある中心を持つという要件を満たす、同等の対称的な5面の星は存在しません。画像システムは、余分な部分を切り取る傾向があります。

オブジェクトの中心は複雑なものです。バウンディングボックスの中心は、オブジェクトの中心がある場所と同じになることはめったにありません。残念ながら、中心は拡散的な概念であるため、中心メトリックとして何を選択しても、時々間違ってしまいます。（これに関するより多くの議論はここで見つけることができます。）

現在、ほぼ普遍的なシステムでは、簡単な方法で境界ボックスの中心をオブジェクトの中心として定義しています。それは問題ありません。別の中心がオブジェクトを非表示のボックスまたは円で囲むだけの場合、それは十分に大きく、中心に配置します。必要に応じて1つのエッジに触れることができますが、これは必須ではありません（必ずしも最もコンパクトで問題のない表現です）。

画像1：bb中心を中心に回転。

または、グループを使用して中心を見つけることもできます。本質的には中心の位置を保存するので、画像の形状は問題ではなくなりました。そして、ここにグループ化メソッドを使用したライブSVGの例があります。

2つの浮動小数点数を格納するだけでよいので、どちらの方法でも簡単に思えるかもしれませんが、後者の方法は複雑な場合、または中心が画像の端にあると見なす場合によりコンパクトです。一方、空のスペースが多いビットマップがある場合は、メモリを大幅に浪費します。

この基本的なSVGをブラウザで作成できます。他のツールは必要ありません。

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

光線として使用する三角形を定義し、正方形の中心点を中心に72度回転（360/5）で5つのコピーを作成します。

円を描き、次に中心を通過しない弦を描きます。次に、それらをグループ化し、グループを72度回転させて4回以上、毎回コピーします。星、出来上がり。これで、すべてのグループのグループ化を解除し、ズームインして各ポイントでラインを結合し、余ったラインを削除できます。

あなたがそれを回転させている問題は、境界の正方形が星の中心を中心にしていないことです。これを修正するには、元の円の1つを保持し、ストロークと塗りつぶしを行わずに非表示にし、星とグループ化するだけです。この円の周囲のバウンディングボックスは、あなたの星と同心になり、あなたはそれをあなたの心の内容に回転させることができます。

MacアプリのSketchを使用すると、「シェイプの挿入->スター」というアクションは、最初のドラッグで要求するとおりの動作をするようです。サイズを変更しないでください。内側の半径を設定することもできます。38％使用しました。