どうしようかなーと思いつつ、本日を迎えております。

オープニング画面を作ろうかな、それともやっぱりコアデータを深堀りしようかな。

あれこれ考えていたのですが、ふと気がつくと私の両手は「三角形の角を丸くする」方法をググっておりました。

ニャンコ先生「前回の整理は一体何だったのかニャ」

何だったんでしょうねえ……。

まあ、トゲトゲの三角形に少しだけ飽きていましたし、きっと角なんてカンタンにオプション的な設定で丸くなるでしょうし、ササッとやって気分を切り替えましょう。

……と、軽い気持ちで着手したのですが。

結論から言うと、オプション的な設定では、私の三角形の角を丸くすることはできませんでした。

四角形などの角を取るために、「cornerRadius」なるメソッドは用意されているのですが、それはあくまでプリセットとして用意されているシェイプに適用するためのもので、好き勝手にパスで描いた三角形の角を取るようなものではなさそうなのです。

『ないのなら 作るしかないじゃない ホトトギス』

ということで、今回はパスの応用機能、「addArc」メソッドを使って、角を丸く削っていくことにします。

「addArc」メソッドには「中心の座標」「半径」「線の開始の角度」「線の終了の角度」「線の方向(時計回り/反時計回り)」と、円弧を描くためのオプションが含まれています。

これで、三角形の頂点に当たる部分に120度分くらいの円弧を描き、それを3つ作ってパスで繋げば、角丸三角形になるわけです。理屈の上では。理屈の上では、ね。

実際にやってみると、中学時代の三角形の図形問題のようなややこしさがありました。中学生のみなさま、「1:2:√3」は覚えておきましょう。意外なタイミングで役に立つ日が来たりします。

あーでもないこーでもないと試行錯誤を繰り返すこと○時間、なんとかパッと見、角丸三角形に見える形になりました。うんうん、だいぶ可愛らしくなりましたね。

なんとなくアプリのテーマになりそうな特徴的な形ができましたので、これはもう次はオープニング画面に着手することにしましょう。そうしましょう。


Apple Developer Documentation
Instance Method > addArc
Adds an arc of a circle to the path, specified with a radius and angles.
外部リンクを開く