How to fill Path with Image?

Question

Given the following GeometryReader(...):

GeometryReader { geo in
            Path  { path in
                let width = geo.size.width
                let height = geo.size.height * 0.40
                let litheight = geo.size.height * 0.24
                path.addLines([
                    CGPoint(x: 0, y: litheight),
                    CGPoint(x: width, y: height ),
                    CGPoint(x: width, y: 0),
                    CGPoint(x: 0, y: 0)
                ])
            }
        }.edgesIgnoringSafeArea(.top)

I want to set the top area with a background image.

I tried the following except it's not exactly what I'm after:

        GeometryReader { geo in
            Path  { path in
                let width = geo.size.width
                let height = geo.size.height * 0.40
                let litheight = geo.size.height * 0.24
                path.addLines([
                    CGPoint(x: 0, y: litheight),
                    CGPoint(x: width, y: height ),
                    CGPoint(x: width, y: 0),
                    CGPoint(x: 0, y: 0)
                ])
            }

            Image(systemName: "faceid")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: geo.size.width, height: geo.size.height, alignment: .bottomTrailing)
        }
        .edgesIgnoringSafeArea(.top)

This is the result:

And this what I want to achieve:

Answer 1

Make sure your image is in your Assets.xcassets.

Then you can achieve the result you're looking for by using : fill(ImagePaint(...)).

I would look at the documentation for other ImagePaint options here.

GeometryReader { geo in 
    Path { path in
        let width = geo.size.width
        let height = geo.size.height * 0.40
        let litheight = geo.size.height * 0.24
        path.addLines([
            CGPoint(x: 0, y: litheight),
            CGPoint(x: width, y: height ),
            CGPoint(x: width, y: 0),
            CGPoint(x: 0, y: 0)
        ])

    }
    .fill(ImagePaint(image:
        Image("background")
            .resizable()
        )
    )
}
.edgesIgnoringSafeArea(.top)