Для отображения рейтинга я пытаюсь разделить изображение на две части: черную и красную, и я хотел бы, чтобы красная часть занимала определенный процент от всего изображения. Проблема, с которой я столкнулся, заключается в том, что прямоугольник выравнивается по центру другого изображения, и при изменении выравнивания ZStack на .leading
прямоугольник перемещается, но, к сожалению, замаскированная область изображения не изменяется.
ZStack {
Image("Car")
Rectangle()
.foregroundColor(ColorManager.brand)
.frame(width: 20.0, height: 20.0)
.mask(Image("Car"))
}
ZStack(alignment: Alignment(horizontal: .leading, vertical: .center)) {
Image("Car")
Rectangle()
.foregroundColor(ColorManager.brand)
.frame(width: 20.0, height: 20.0)
.mask(Image("Car"))
}
Как я могу изменить выравнивание прямоугольника на .leading
, а также замаскировать переднюю часть изображения?
редактировать: Желаемый эффект
Я добавил еще одно изображение, чтобы показать желаемый эффект.
Вам нужно просто сделать отсечение в нужном месте. Вот полная демонстрация возможного подхода (на пользовательском CarView, поскольку у меня нет такого изображения автомобиля, как у вас).
Подготовлено с помощью 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))
)
}
}
}
чтобы ваш код мог выглядеть (конечно, размеры маски вы можете настроить для своих нужд)
Image("Car")
.overlay(
Rectangle()
.foregroundColor(ColorManager.brand)
.mask(Image("Car"))
.clipShape(MaskShape(alignment: .leading))
)
Я не мог понять вопрос, чего именно вы пытаетесь достичь?