【SwiftUI】図形の描画(2)

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

図形のパス部分を描画する

図形のパス部分を描画するには、strokeモディファイアを使用します。

strokeモディファイア

引数

lineWidth

線の太さを指定します。

サンプルソース

struct ContentView: View {
    var body: some View {
        Rectangle()
            .stroke(lineWidth: 5)
            .fill(.blue)
            .frame(width: 100, height: 100)
    }
}
stroke1

図形に枠線を描画する

図形に枠線を描画するには、borderモディファイアを使用します。

borderモディファイア

引数

_ content

色を指定します。

width

枠線の幅を指定します。

サンプルソース

struct ContentView: View {
    var body: some View {
        Rectangle()
            .fill(.blue)
            .frame(width: 100, height: 100)
            .border(.red, width: 5)
    }
}
border1

位置をずらして図形を描画する

位置をずらして図形を描画するには、offsetモディファイアを使用します。

offsetモディファイア

引数

x

X軸方向へずらす距離を指定します。

y

Y軸方向へずらす距離を指定します。

サンプルソース

struct ContentView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .fill(.red)
                .frame(width: 100, height: 100)
                .offset(x: 0, y: 0)
            Rectangle()
                .fill(.green)
                .frame(width: 100, height: 100)
                .offset(x: 20, y: 20)
            Rectangle()
                .fill(.blue)
                .frame(width: 100, height: 100)
                .offset(x: 40, y: 40)
        }
    }
}
offset1

親Viewの左上を中央に図形を描画する

親Viewの左上を中央に図形を描画するには、positionモディファイアを使用します。

positionモディファイア

引数

x

親Viewの左上からX軸方向への距離を指定します。

y

親Viewの左上からY軸方向への距離を指定します。

サンプルソース

struct ContentView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .fill(.red)
                .frame(width: 50, height: 50)
            Rectangle()
                .fill(.green)
                .frame(width: 50, height: 50)
                .position(x: 50, y: 50)
            Rectangle()
                .fill(.blue)
                .frame(width: 50, height: 50)
                .position(x: 100, y: 100)
        }
    }
}
position1

図形を重ねて描画する

図形を重ねて描画するには、overlayモディファイアを使用します。

overlayモディファイア

引数

alignment

図形の位置を指定します。

Alignment
topLeading
top
topTrailing
leading
center
trailing
bottomLeading
bottom
bottomTrailing

サンプルソース

struct ContentView: View {
    var body: some View {
            Rectangle()
                .fill(.black)
                .frame(width: 300, height: 300)
                .overlay(alignment: .topLeading) {
                    Circle()
                        .fill(.red)
                        .frame(width: 50, height: 50)
                }
                .overlay(alignment: .top) {
                    Circle()
                        .fill(.green)
                        .frame(width: 50, height: 50)
                }
                .overlay(alignment: .topTrailing) {
                    Circle()
                        .fill(.blue)
                        .frame(width: 50, height: 50)
                }
                .overlay(alignment: .leading) {
                    Circle()
                        .fill(.blue)
                        .frame(width: 50, height: 50)
                }
                .overlay(alignment: .center) {
                    Circle()
                        .fill(.red)
                        .frame(width: 50, height: 50)
                }
                .overlay(alignment: .trailing) {
                    Circle()
                        .fill(.green)
                        .frame(width: 50, height: 50)
                }
                .overlay(alignment: .bottomLeading) {
                    Circle()
                        .fill(.green)
                        .frame(width: 50, height: 50)
                }
                .overlay(alignment: .bottom) {
                    Circle()
                        .fill(.blue)
                        .frame(width: 50, height: 50)
                }
                .overlay(alignment: .bottomTrailing) {
                    Circle()
                        .fill(.red)
                        .frame(width: 50, height: 50)
                }
    }
}
overlay1

図形を回転する

図形を回転させるには、rotationEffectモディファイアを使用します。

rotationEffectモディファイア

引数

_ angle

回転する角度を指定します。

anchor

回転の中心位置を指定します。

UnitPoint
zero
topLeading
top
topTrailing
leading
center
trailing
bottomTrailing
bottom
bottomLeading

サンプルソース

struct ContentView: View {
    var body: some View {
        Rectangle()
            .fill(.green)
            .frame(width: 200, height: 50)
            .rotationEffect(.init(degrees: 45), anchor: .center)
    }
}
rotationEffect1
  • URLをコピーしました!
目次