【SwiftUI】Pathを利用した背景表現について

今回は、SwiftUIでPathを取り上げます。pathの基本については、下記のサイトにて、詳しく記載されている方がいらっしゃいますので、そちら掲載します。

ここでは、Pathを使った背景画面の表現をいくつか掲載してみます。

■サイト

・高橋政明さんのサイト

・AnswerTopiaさんのサイト

■Pathを利用した背景

いくつか表示を試してみたので以下に掲載します。

・画面

・コード

	import SwiftUI
	struct CustomShape: Shape {
	var offset: CGFloat = 0.5

	func path(in rect: CGRect) -> Path {
	var path = Path()
	path.move(to:.zero)
	path.addLine(to:CGPoint(x: rect.maxX,y:0))
	path.addLine(to:CGPoint(x: rect.maxX,y: rect.maxY))
	path.addLine(to:CGPoint(x: 0,y:rect.maxY * offset))

	path.closeSubpath()
	return path
	}
	}

	struct ShapeViewTwo: View {

	var body: some View {
	ZStack{
	Color.black.ignoresSafeArea(.all)
	GeometryReader { geo in
	VStack(){

	Image("swim")
	.resizable()
	.aspectRatio(contentMode: .fill)
	.frame(width: geo.size.width,height:300)
	.clipShape(CustomShape())
	.shadow(radius: 16)
	.overlay(CustomShape()
	.stroke(Color.white,lineWidth: 10.0))
	Spacer()
	}.ignoresSafeArea(edges: .top)
	}
	}
	}
	}

view raw Path背景 hosted with ❤ by GitHub

上記のようなPathを利用したコードを用いてい下記のような表現ができます。

・表現１

・表現2

※引用画像について

以下になります。上記のサンプル表示のため画像を利用させて頂きました。ありがとうございました。

Oz-Tech-Blog