使用C#GDI+绘制多重黄金矩形

  前段时间翻译的文章《&＃xff08;翻译&＃xff09;布局和矩形中的应用黄金分割比率》中介绍了如何绘制黄金矩形&＃xff0c;并给出了1到5重黄金分割矩形的绘制图形&＃xff0c;如下图所示。于是想在C#中用GDI&＃43;程序绘制黄金矩形。

  从左往右看上述黄金矩形&＃xff0c;从中发现绘制规律。首先看到绘制的矩形的大小&＃xff0c;按数列排列的话为1、1、2、3、5&＃xff0c;可以看到这符合 斐波那契数列的排列&＃xff0c;也就是下一重矩形的边长为前两重矩形边长之和。
  再看绘制矩形时的左上角坐标&＃xff0c;从上图可以看出&＃xff0c;从第二个图到第五个图是一个循环&＃xff1a;以左边第一个图为基准&＃xff0c;先右边画一个矩形&＃xff0c;再在整个图形下方画一个矩形&＃xff0c;再在整个图形左侧画一个矩形&＃xff0c;再在整个图形上方画一个图。后续就是重复这个循环了。
  主要的绘图代码如下&＃xff1a;

//pGoldenRect为绘图控件//记录待绘制的下个图矩形的左上角坐标m_startX &＃61; pGoldenRect.Width / 2;m_startY &＃61; pGoldenRect.Height / 2;//保留整个图形的左上角坐标及高宽int originX &＃61; 0;int originY &＃61; 0;int totalHeight &＃61; 0;int totalWidth &＃61; 0;//计算斐波那契数列int n1 &＃61; 1;int n2 &＃61; 1;int n3 &＃61; 0;//记录上上轮、上轮和本轮的int n1Length &＃61; baseUnit;int n2Length &＃61; baseUnit;int n3Length &＃61; baseUnit;GraphicsPath gp &＃61; new GraphicsPath();gp.AddRectangle(new Rectangle(m_startX, m_startY, n1Length, n1Length));originX &＃61; m_startX;originY &＃61; m_startY;totalHeight &＃61; n1Length;totalWidth &＃61; n1Length;m_startX &＃61; m_startX &＃43; n1Length;gp.AddRectangle(new Rectangle(m_startX, m_startY, n2Length, n2Length));totalWidth &＃61; n1Length &＃43; n2Length;for (int i &＃61; 2; i < drawLoop; i&＃43;&＃43;){n3 &＃61; n1 &＃43; n2;switch (i%4){case 1:m_startX &＃61; m_startX &＃43; n2Length;n3Length &＃61; n3 * baseUnit;totalWidth &＃43;&＃61; n3Length;break;case 2:m_startX &＃61; m_startX - n1Length; m_startY &＃43;&＃61; n2Length;n3Length &＃61; n3 * baseUnit;totalWidth &＃61; n3Length;totalHeight &＃43;&＃61; n3Length;break;case 3: m_startY -&＃61; n1Length;n3Length &＃61; n3 * baseUnit;m_startX &＃61; m_startX - n3Length;originX &＃61; m_startX;originY &＃61; m_startY;totalWidth &＃61; n3Length &＃43; n2Length;totalHeight &＃61; n3Length;break;case 0:n3Length &＃61; n3 * baseUnit;m_startY -&＃61; n3Length;originY &＃61; m_startY;totalHeight &＃43;&＃61; n3Length;break;}gp.AddRectangle(new Rectangle(m_startX, m_startY, n3Length, n3Length));n1 &＃61; n2;n2 &＃61; n3;n1Length &＃61; n2Length;n2Length &＃61; n3Length;}g.DrawPath(new Pen(m_goldenColor, 1), gp);


  程序执行效果如下&＃xff1a;

  能绘制单个的黄金矩形&＃xff0c;就可以接着绘制水平黄金矩形网格和垂直黄金矩形网格&＃xff0c;各位朋友可以试试。

参考文献&＃xff1a;
[1]https://uxmovement.com/content/applying-the-golden-ratio-to-layouts-and-rectangles/
[2]https://baike.baidu.com/item/%E6%96%90%E6%B3%A2%E9%82%A3%E5%A5%91%E6%95%B0%E5%88%97