如何画五角星先以位置端正的大五角星为例位置？

2022-08-09

1、了解国旗的设计

#

如果要想把国旗画得漂亮和准确，就要知道国旗的设计是怎么样的，比如长宽比例、星星的大小和位置等等。五星红旗的设计并不复杂。我们只需研究下面这张图就能完全足够了。

首先花点眼力和时间数一下格子就能发现国旗的比例为宽:高=3:2。还发现有许多同样大小的正方形小格子，其边长都等于宽的1/30，也等于高的1/20（因为宽:高=3:2嘛）。

还有一个不能忽略的细节，就是小五角星可由大五角星缩小和一定角度的旋转得到。

2、如何画五角星 #

先以位置端正的大五角星为例。我用的方法是把一个五角星分成五个部分来画，每个部分都是一个四边形。事实上只需要画出其中的一个四边形就足够了，因为其余四边形都可以看作由该四边形旋转得到。如下：

#

下面是最硬核的部分：通过中心点c的坐标以及长度角度的关系五角星的角度，得到另外p、m、n三点的坐标。有这四个点五角星的角度，我们就能确定一个四边形了。剩余的四个四边形可以旋转得到。 #

c点是中心，是我们决定的，认为已知。p0相对于c的位置是确定的。于是： #

p0的x=c的x+d*cos(∠base)，p0的y=c的y+d*sin(∠base)

p1坐标的计算方法类似，但角度变为∠base+72°。p2变为∠base+72°+72°。p3和p4如此类推。如下，这样就得到了p的坐标。 #

现在求剩下两个点m、n的坐标。这里使用向量的方法。c、p是已知的，向量cp可知，只需再乘上一个系数就可得向量ch。该系数通过|hm|和|ch|和|ph|的长度关系推出。

向量hm和向量ch相互垂直，且有模长关系|mh|=|ch|*tan(36°)，可推出向量hm，再可由c、向量ch、向量hm得m、n。如下： #

得到c、p、m、n之后，直接调用的绘制四边形的函数即可。

#

以上部分写成代码如下（vec2是2维的容器，有2个数据，可表示平面点和向量）： #

（画1个星星） #

（画1个四边形） #

3、五角星的位置和大小 #

画星星的部分已经解决，现在就剩下五角星的布局啦。布局要考虑的是五角星的中心点c、半径d、∠base（调整∠base就能旋转五角星了，前面我们也是用调整角度的方式旋转四边形的）。这里我们再来看看开头的那张图：

中心点c和半径d都不难得到，因为数格子就知道是多少了。重点看∠base。在画大五角星的时候我们令∠base为18°。看从上往下数的第三个小五角星，似乎发现了什么？这个小五角星的∠base和大五角星的∠base是一样的，也是18°。和画大五角星相比，只需要改变参数c、d，∠base保持不变，就能画出来了。

对于剩下的小五角星，我们用反三角函数求角度。以从上往下第一个小五角星为例：数其中心点和大五角星中心点的横纵方向相差多少个格子，用反正切求出角度，再加上M_PI(180°)，就得到了小三角形的∠base。如下。剩余小五角星也用同样方法。

#

现在剩下最后一个问题了：比例。通过数格子我们知道宽:高=3:2。在的布局，中心左右长度各为1，中心上下长度也各为1，即横向长度为2、纵向长度也为2。

#

设置宽=1.8，高=1.2就能画出较大且符合比例的五星红旗了。写成代码如下： #

剩下的代码是的通用套路，在此不讨论了。

#

成品如下： #

4、需要注意的坑： #

1、角度制和弧度制的转换一定要清楚！我第一次画的时候总把tan(36)和tan(36°)搞混，差了个°可是完全不一样了啊。

#

2、不要直接把主窗口设成宽:高=3:2。主窗口要设成正方形，在主窗口内再画3:2的五星红旗。如果主窗口设成3:2（调整参数让红旗铺满主窗口也能画出3:2的红旗），会导致横纵坐标的单位长度不一样。

#

3、ctrl+c再ctrl+v真的特别容易出错。

#

转自公众号「小z的笔记本」 每周更新各种各种内容 包括但不限于、爬虫 欢迎关注

? #

分类：

#

技术点：

相关文章：