【SwiftUI】角丸長方形や円・楕円などの図形を描画する | プログラマーになった「中卒」男のブログ

SwiftUIでは、シェイプと呼ばれる図形描画用に用意された組み込みのビューがある。

今回はこのシェイプを使って、長方形や円など簡単な図形の描画をおこなう例を紹介する。

コンテンツ

短形（四角形）を描画する

四角形の描画には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)