六角形ができたので、本日はそれをクリックできるようにしてみましょう。

自然な流れで考えると……

① 三角形ビューをクリックする
② クリックを検知して、アクションを起動する
③ アクションが実行される

こんな感じに動けば良い気がします。

「ふむふむ、で、どうやって検知するのかニャ?」

検索してみましょう。教えてグーグル先生。
……をやってみたのですが、それっぽいものが見つからず。

とりあえず、「ボタン」にしてみることにしました。
「押して」「アクションを動かす」と言えば、ボタンよね。

幸い、SwiftUIのボタンの構造は「アクション」と「見た目」で分かれていて、
見た目部分に三角形の描画のコードを埋め込めば、三角形のボタンが作れそうです。

Button(action: {
// こっちがアクション
let num = Int.random(in: 0…100)
print(num)
}) {
// こっちが見た目
Path { path in
// 始点設定
path.move(to: CGPoint(x: radius, y: 0))
…以下三角形の描画が続く

動作確認用のアクションは、
「ランダムな数字を作って、デバッグコンソールに出力する」を設置。

三角形の色を変えて、ボタンであることをわかりやすくして、と。

さあ、どうだ!

「……デバッグコンソールがウンともスンとも言わないのニャが」

おやぁ?

検索してみると、
「xcode12のバグで、ライブプレビューだと表示されない」との情報が。

試しにシミュレーターを起動してみると、ちゃんとボタン(三角形)のクリックに合わせて、ランダムな数字がデバッグコンソールに表示されました。いやっほー。

……と、喜んでいたのですが。

よーく見ると、このボタン。「三角形の外」でも反応していました。
どうやら「フレーム(四角い透明の枠)」に反応しているようです。

これはどうしたものでしょう。
フレームを三角形にすることなどできるのかしら。
それとも、三角形のパスだけを反応させることができるのか。

さらなる深堀りが必要そうです。では次は、そこをやってみましょう。


Apple Developer Documentation
Structure > Button
A control that initiates an action.
外部リンクを開く