Align masked Rectangle in a ZStack while also changing masked area [SwiftUI] - swiftui

Question

For a rating display I am trying to split an Image up into two parts, a black and a red one and I would like the red part to take up a specific percentage of the whole image. The problem I am having is that the Rectangle is aligned to the centre of the other image and when changing the alignment of the ZStack to .leading, the Rectangle does move but unfortunately the masked area of the image does not change.
ZStack {
Image("Car")
Rectangle()
.foregroundColor(ColorManager.brand)
.frame(width: 20.0, height: 20.0)
.mask(Image("Car"))
}
Without alignment
ZStack(alignment: Alignment(horizontal: .leading, vertical: .center)) {
Image("Car")
Rectangle()
.foregroundColor(ColorManager.brand)
.frame(width: 20.0, height: 20.0)
.mask(Image("Car"))
}
With alignment
How could I change the alignment of the Rectangle to .leading, while also masking the leading part of the image?
edit: Desired effect

Answer 1

You need just make clipping at needed location. Here is a complete demo of possible approach (on custom CarView as I don't have car image like your).
Prepared with Xcode 12.1 / iOS 14.1
struct CarView: View {
var body: some View {
Image(systemName: "car").resizable()
.frame(width: 200, height: 80)
}
}
struct MaskShape: Shape {
var alignment: HorizontalAlignment = .center
func path(in rect: CGRect) -> Path {
switch alignment {
case .leading:
return Rectangle().path(in: rect.divided(atDistance: rect.width / 3, from: .minXEdge).slice)
case .center:
return Rectangle().path(in: rect.insetBy(dx: rect.width / 3, dy: 0))
case .trailing:
return Rectangle().path(in: rect.divided(atDistance: rect.width / 3, from: .maxXEdge).slice)
default:
return Rectangle().path(in: rect)
}
}
}
struct TestCarMaskView: View {
var body: some View {
VStack {
CarView()
.overlay(
Rectangle()
.foregroundColor(.red)
.mask(CarView())
.clipShape(MaskShape())
)
CarView()
.overlay(
Rectangle()
.foregroundColor(.red)
.mask(CarView())
.clipShape(MaskShape(alignment: .leading))
)
CarView()
.overlay(
Rectangle()
.foregroundColor(.red)
.mask(CarView())
.clipShape(MaskShape(alignment: .trailing))
)
}
}
}
so your code could look like (of course sizes of mask you can tune for your needs)
Image("Car")
.overlay(
Rectangle()
.foregroundColor(ColorManager.brand)
.mask(Image("Car"))
.clipShape(MaskShape(alignment: .leading))
)