在 SwiftUI 中绘制六边形网格

主要观点:上次构建了自定义 SwiftUI 中的六边形形状,此次要制作填充屏幕的六边形网格。介绍了规则六边形形状及其尺寸计算,通过viewport 高度和宽度可计算填充屏幕所需的列数和行数,定位每个形状需知道其列和行,六边形行与平铺正方形不同,行间距及 x、y 偏移计算方式不同,给出了计算 yOffset 和 xOffset 的函数,通过 ForEach 遍历列数和行数来渲染六边形,HexGridCell 用于渲染带有修饰的六边形,最终得到美观的六边形蜂窝图案,此内容约两年前开始撰写(2022 年夏天)。

关键信息:

  • 规则六边形顶平,高度小于宽度,尺寸为顶点半径即边长,高度为 2×size,宽度为√3×size。
  • 屏幕填充计算:列数 Int(ceil((width - offset.x) / (size 2.5))),行数 Int(ceil((height - offset.y) / size sqrt(3) * 2))。
  • 六边形行开始位置及间距:y 偏移为 row×√3×size,x 偏移偶数行为 size×column,奇数行为 size×2.5。
  • 渲染函数:HexGridCell 中通过 offset 定位六边形,Hexagon 进行绘制和修饰。

重要细节:

  • 给出了具体的代码示例,如计算列数和行数的代码、计算 yOffset 和 xOffset 的函数、ForEach 遍历渲染六边形的代码等。
  • 展示了 iPhone 15 Pro 竖屏显示六边形网格的 XCode 模拟器截图。
阅读 17
0 条评论