【SwiftUI】図形の描画

図形
  • URLをコピーしました!
目次

円形を描画する

円形を描画するには、Circleを使用します。

Circleビュー

サンプルソース

struct ContentView: View {
    var body: some View {
        Circle()
            .frame(width: 100, height: 100)
    }
}
Circle1

四角形を描画する

四角形を描画するには、Rectangleを使用します。

Rectangleビュー

サンプルソース

struct ContentView: View {
    var body: some View {
        Rectangle()
            .frame(width: 100, height: 100)
    }
}
Rectangle1

角丸四角形を描画する

角丸四角形を描画するには、RoundedRectangleを使用します。

RoundeRectangleビュー

引数

cornerRadius

角の半径を指定します。

サンプルソース

struct ContentView: View {
    var body: some View {
        HStack {
            RoundedRectangle(cornerRadius: 10)
                .frame(width:100, height: 100)
            RoundedRectangle(cornerRadius: 30)
                .frame(width:100, height: 100)
        }
    }
}
RoundedRectangle1

カプセル形を描画する

カプセル形を描画するには、Capsuleを使用します。

Capsuleビュー

引数

style

矩形の角の形状を指定します。

RoundedCornerStyle
circular
continuous

サンプルソース

struct ContentView: View {
    var body: some View {
        VStack {
            Capsule(style: .circular)
                .frame(width: 200, height: 50)
            Capsule(style: .continuous)
                .frame(width: 200, height: 50)
        }
    }
}
Capsule1

楕円形を描画する

楕円形を描画するには、Ellipseを使用します。

Ellipseビュー

サンプルソース

struct ContentView: View {
    var body: some View {
        Ellipse()
            .frame(width: 200, height: 50)
    }
}
Ellipse1

図形のサイズを変更する

図形のサイズを変更するには、frameモディファイアを使用します。

frameモディファイア

引数

width

幅を指定します。

height

高さを指定します。

サンプルソース

struct ContentView: View {
    var body: some View {
        VStack {
            HStack {
                Circle()
                    .frame(width: 50, height: 50)
                    .padding()
                Circle()
                    .frame(width: 100, height: 100)
                    .padding()
            }
            HStack {
                Rectangle()
                    .frame(width: 50, height: 50)
                    .padding()
                Rectangle()
                    .frame(width: 100, height: 100)
                    .padding()
            }
        }
    }
}
frame1

図形の色を変更する

図形の色を変更するには、fillモディファイアを使用します。

fillモディファイア

引数

_ content

色を指定します。

Color
black
blue
brown
clear
cyan
gray
green
indigo
mint
orange
pink
purple
red
teal
white
yellow

サンプルソース

struct ContentView: View {
    var body: some View {
        VStack {
            HStack {
                Rectangle()
                    .fill(.black)
                    .frame(width: 50, height: 50)
                    .padding()
                Rectangle()
                    .fill(.blue)
                    .frame(width: 50, height: 50)
                    .padding()
                Rectangle()
                    .fill(.brown)
                    .frame(width: 50, height: 50)
                    .padding()
                Rectangle()
                    .fill(.clear)
                    .frame(width: 50, height: 50)
                    .padding()
            }
            HStack {
                Rectangle()
                    .fill(.cyan)
                    .frame(width: 50, height: 50)
                    .padding()
                Rectangle()
                    .fill(.gray)
                    .frame(width: 50, height: 50)
                    .padding()
                Rectangle()
                    .fill(.green)
                    .frame(width: 50, height: 50)
                    .padding()
                Rectangle()
                    .fill(.indigo)
                    .frame(width: 50, height: 50)
                    .padding()
            }
            HStack {
                Rectangle()
                    .fill(.mint)
                    .frame(width: 50, height: 50)
                    .padding()
                Rectangle()
                    .fill(.orange)
                    .frame(width: 50, height: 50)
                    .padding()
                Rectangle()
                    .fill(.pink)
                    .frame(width: 50, height: 50)
                    .padding()
                Rectangle()
                    .fill(.purple)
                    .frame(width: 50, height: 50)
                    .padding()
            }
            HStack {
                Rectangle()
                    .fill(.red)
                    .frame(width: 50, height: 50)
                    .padding()
                Rectangle()
                    .fill(.teal)
                    .frame(width: 50, height: 50)
                    .padding()
                Rectangle()
                    .fill(.white)
                    .frame(width: 50, height: 50)
                    .padding()
                Rectangle()
                    .fill(.yellow)
                    .frame(width: 50, height: 50)
                    .padding()
            }
        }
    }
}
fill1
  • URLをコピーしました!
目次