ひさびさのコーディングです。
Xcodeが無事立ち上がるか心配でしたが、なんとか起動しました。

以前と比べると、コード自体がとってもスッキリしている印象です。
部品を持ってきて、配置を決めて、見た目を装飾する。直感的になりましたね。

キャンバスエディタとコードエディタの連携もめちゃめちゃスムーズです。
キャンバス側でビューを配置して、コード側で調整する。良い役割分担ができそう。

ほほーう。これはすごい。

「完。とか言わないよニャ?」

おっと、バレましたか。では、あらためまして……六角形を作ってみましょう。

まずは、六角形の部品になる、三角形作りです。
予め用意されている「ビュー」一覧の中に三角形があれば楽だったのですが、残念ながら見つからなかったので、「パス」で三角形を描くことにします。

// 始点設定
path.move(to: CGPoint(x: radius, y: 0))
// 辺描画
path.addLine(to: CGPoint(x: radius * 2, y: radius * sqrt(3)))
path.addLine(to: CGPoint(x: 0, y: radius * sqrt(3)))
path.addLine(to: CGPoint(x: radius, y: 0))

こんな感じ。

固定値を埋め込んでしまうと三角形の数分コードが必要になってしまいますので、「一辺の半分の長さ」を与えると、「高さ」を計算して、「正三角形」を描くようなビューに切り出してみました。

「1:2:√3」なんて、最後に使ったのいつかしら。四半世紀前?

できた三角形を、「水平配置」「垂直配置」を使って3つ並べて。
その後、「ひっくり返した三角形」を、「立体配置」を使って同じく3つ並べると。

// 三角形配置
ZStack {
VStack(alignment: .center, spacing: 1) {
HStack(alignment: .center, spacing: 2){
Triangle1(radius: 30.0)
Triangle1(radius: 30.0)
}
Triangle1(radius: 30.0)
}…以下続く

六角形の完成です。
うんうん、とりあえず矩形を並べることはできました。ホッと一安心。

このままビッシリと画面中に並べてもいいのですが、見た目がとっても暑苦しくなりそうですので、一旦このままにしておいて、次は「三角形を押したら、何かが反応する」という仕組みを作ってみることにしましょう。


Apple Developer Documentation
Structure > Path
The outline of a 2D shape.
外部リンクを開く