SwiftUIでは、シェイプと呼ばれる図形描画用に用意された組み込みのビューがある。
今回はこのシェイプを使って、長方形や円など簡単な図形の描画をおこなう例を紹介する。
コンテンツ
短形（四角形）を描画する
四角形の描画にはRectangleビューを使用する。
SwiftUIのシェイプはViewプロトコルを採用しているため、通常のビューで使えるfillやframeなどのモディファイアを利用することができる。
1 2 3 | Rectangle() .fill(Color.red) .frame(width: 200, height: 100) |
線だけを描画する
塗りつぶしをおこなわず、図形の線（パス部分）だけを描画したい場合はstrokeモディファイアを使用すれば良い。
1 2 3 4 | Rectangle() .stroke(lineWidth: 3) .fill(Color.red) .frame(width: 200, height: 100) |
角丸四角形を描画する
角丸の四角形を描画する場合はRoundedRectangleビューを使う。
1 2 3 | RoundedRectangle(cornerRadius: 20, style: .continuous) .fill(Color.red) .frame(width: 200, height: 100) |
cornerRadius引数には角丸の半径を、style引数にはコーナータイプを指定する。
コーナータイプは、.circular（デフォルト）と.continuousより選べるがその違いは小さく、角丸の半径が大きい場合でないと違いが分かりづらい。
楕円形の角丸にする
RoundedRectangleビューの角丸は正円だが、cornerSize引数を利用することで楕円形の角丸にすることもできる。
1 2 3 | RoundedRectangle(cornerSize: .init(width: 20, height: 40)) .fill(Color.green) .frame(width: 200, height: 100) |
なお、cornerSize引数はCGSizeで指定する必要がある。
円を描画する
円を描画する場合はCircleビューを使う。
frameでモディファイアでサイズを指定するが、縦横で指定サイズが違う場合は小さい方が採用される。
1 2 3 | Circle() .fill(Color.black) .frame(width: 200, height: 100) |
楕円を描画する
楕円を描画する場合はEllipseビューを使う。
1 2 3 | Ellipse() .fill(Color.red) .frame(width: 200, height: 100) |
