SwiftUIでは、シェイプと呼ばれる図形描画用に用意された組み込みのビューがある。
今回はこのシェイプを使って、長方形や円など簡単な図形の描画をおこなう例を紹介する。
Contents
短形(四角形)を描画する
四角形の描画にはRectangleビューを使用する。
SwiftUIのシェイプはViewプロトコルを採用しているため、通常のビューで使えるfillやframeなどのモディファイアを利用することができる。
Rectangle() .fill(Color.red) .frame(width: 200, height: 100)

線だけを描画する
塗りつぶしをおこなわず、図形の線(パス部分)だけを描画したい場合はstrokeモディファイアを使用すれば良い。
Rectangle() .stroke(lineWidth: 3) .fill(Color.red) .frame(width: 200, height: 100)

角丸四角形を描画する
角丸の四角形を描画する場合はRoundedRectangleビューを使う。
RoundedRectangle(cornerRadius: 20, style: .continuous) .fill(Color.red) .frame(width: 200, height: 100)

cornerRadius引数には角丸の半径を、style引数にはコーナータイプを指定する。
コーナータイプは、.circular(デフォルト)と.continuousより選べるがその違いは小さく、角丸の半径が大きい場合でないと違いが分かりづらい。
楕円形の角丸にする
RoundedRectangleビューの角丸は正円だが、cornerSize引数を利用することで楕円形の角丸にすることもできる。
RoundedRectangle(cornerSize: .init(width: 20, height: 40)) .fill(Color.green) .frame(width: 200, height: 100)
なお、cornerSize引数はCGSizeで指定する必要がある。

円を描画する
円を描画する場合はCircleビューを使う。
frameでモディファイアでサイズを指定するが、縦横で指定サイズが違う場合は小さい方が採用される。
Circle() .fill(Color.black) .frame(width: 200, height: 100)

楕円を描画する
楕円を描画する場合はEllipseビューを使う。
Ellipse() .fill(Color.red) .frame(width: 200, height: 100)
