swift の話題です。
今回は、SpriteKit で SKShapeNode に円弧を描いて追加してみました。
CGPathAddArcToPoint を使います。
Apple のデザインには必須の角丸です。

世間一般にも知られた話で言えば、iMac や MacBook の外観デザインや、iPod や iPhone の筐体デザイン、またアイコンをはじめ GUI の至るところに角丸が採用されています。swift を使うにあたり、この角丸を描くために必要な、描画方法を復習してみました。

自分でも普段から使う頻度が高いはずですが、一度使ったコードをあまり考えずに使い回しますので、あらためて思い返すと、「あれ、どうだったかな?」ってことになります。


さて、仕組みです。
SpriteKit では SKShapeNode に CoreGraphics を利用したパスを追加することで、円弧を描画することができます。CGPathAddArcToPoint では、次のようです。
CGPathAddArcToPoint(path: CGMutablePath!, m: UnsafePointer<CGAffineTransform>, x1: CGFloat, y1: CGFloat, x2: CGFloat, y2: CGFloat, radius: CGFloat)

始点o をもとに、点p1(x1, y1) と、終点p2(x2, y2) を基準として、半径r の弧を描いてくれます。
このときに、接線o_p1がベースで、接線p1_p2に対して、半径r の弧になります。
2本の接線と半径を指定して円弧が決まります。

実際の例を見て、イメージを深めるのが吉です。

まず、画面の中央を座標(0,0)として、p1(0, 100)、p2(100, 100)としつつ、半径100の円弧を描いたイメージ図です。


CGPathAddArcToPoint図r100


コードです。

CGPathAddArcToPointコードr100



全く同じ各点を基準に、半径を変えて50とした円弧を描くイメージ図です。
角丸が主役なので、円弧の中心が移動します。

CGPathAddArcToPoint図r50


蛇足ですが、この先を上下対象になるように左側へ、同じ円弧を描けば、漫画やイラストの吹き出しのようになりそうです。


コードです。
半径の指定(50)のみが異なっています。

CGPathAddArcToPointコードr50


大きめも試してみます。
イメージ図です。

CGPathAddArcToPoint図r200


やはり主役は角丸ですね。
脇役は接線です。

工学や工芸の世界では、角に曲線をデザインをつけること「アールをつける」といいます。
「加工をしやすい」とか「加工時にトラブルを少なくするため」というのが理由のようです。


さて、コードです。

CGPathAddArcToPointコードr200



※ 上記のイメージ図では、実際は「CGPathAddArcToPoint(path, nil, 0, 100, 0, 0, 50)」といったようなコードを加えて、始点へ折り返しています。




今回は、Apple 向けソフトウェアデザインに必須の角丸を描く、円弧の描き方を復習してみました。