我正在寻找一个可以作为用户界面的一部分旋转的 5 角星。因此，恒星的中心不应该移动——否则，它看起来很奇怪。
但是，无论我从哪里得到一颗 5 角星，星的中心都不在图像的中心。
我相信存在这样的形状，因为：
如果我想做这样的造型，我可以用什么低成本的软件，基本的流程是什么？由于我正在寻找径向对称，我想从一个完美的五边形开始是关键。我希望这个过程中最难的部分是确保恒星的所有 10 个边缘都具有相同的长度。
一个 5 角星是径向对称的 - 这里的问题是旋转中心被顶部和底部 2 个点的垂直距离（在本例中）倾斜。
好的，如何解决您的问题...我不知道您正在处理哪种 UI，或者其中可以使用哪些资产类型 - 但假设您可以使用具有透明背景的方形 .PNG。
我会简单地保存PNG，星的径向中心与背景的对角线中心对齐，然后当你旋转时，它会保持居中。
为了制作这个形状，我使用了 Illustrator，它并不便宜，但有免费/便宜的 Vector 包可用。我画了两个圆圈，一个是外径，一个是内径。然后我设置了 5 条与中心相交的线，每条线彼此旋转 72 度。
然后我画线将外部点连接到与圆圈相交的内部点。简单！
这是一个使用免费和开源的 Inkscape(dot)org 的简单方法。
主要问题是恒星的旋转中心与其边界框的旋转中心不同。所以要让所有东西对称旋转，你需要把星星放在一个正方形内，并匹配两个旋转中心。
在应用程序窗口右边缘的捕捉工具栏上，启用捕捉、捕捉节点、捕捉尖点节点、捕捉项目的旋转中心。
从标尺单击并拖动水平和垂直参考线，并确保节点相交。
使用多边形工具设置为星形选项和5个角，绘制一个五角星形。应用描边且不填充以使其易于查看。
在您创建的原点上单击并拖动星形，使其捕捉到旋转中心。
将方形和星形组合在一起。
完成后，您可以删除正方形的笔触，对星形应用填充，然后使用“隐藏除选定内容之外的所有内容”选项导出为 PNG。结果是具有透明方形背景的PNG，方形和星形的旋转中心位于同一位置。
如果你想要 Inkscape SVG，它就在这里
事实上，正如你所注意到的，不存在满足在恒星边界框中心所在的中心的要求的等边对称五边星。图像系统倾向于裁剪掉多余的部分。
物体的中心是一件复杂的事情。边界框的中心很少等同于对象的中心。不幸的是，中心是一个分散的概念，所以无论选择什么作为中心指标，您都会不时出错。（可以在这里找到更多讨论。）
现在几乎普遍的系统都采用简单的方法并将边界框中心定义为对象中心。没关系，如果您想要另一个中心，只需用一个不可见的框或圆圈围绕您的对象，它足够大并且位于您想要的中心。如果您愿意，它可以触及一个边缘，但这不是必需的（也不一定是最紧凑或无问题的表示）。
图 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) 创建五个副本。