image - SwiftUI：如何覆盖具有多种形状和依赖定位的图像

Question

我想在图像上放置几个形状（矩形），但矩形应该在图像上具有固定位置。因此，无论屏幕大小或屏幕方向如何，矩形都应始终覆盖图像的相同内容。所以在下图中，我想要一个矩形覆盖腿部，另一个覆盖手臂，第三个覆盖腹部和背部。

我的 ImageView 看起来像这样：

struct ImageView: View {
    @ObservedObject var imageName: ImageName
    var size: CGSize
    var body: some View {
        VStack {
            Image(self.imageName.name)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: size.width, height: size.width, alignment: .center)

        }
    }
}

连同矩形一起嵌入到我的主视图中：

struct MuscleGuy: View {
    @ObservedObject var imageName = ImageName()
    var body: some View {
        VStack(alignment: .center) {
            Spacer()
            ZStack(alignment: .center) {
                GeometryReader { geometry in
                    RectangleView( imageName: self.imageName).zIndex(10)
                    ImageView(imageName: self.imageName, size: geometry.size).zIndex(2)
                        .position(x: geometry.size.width/2, y: geometry.size.height/2)
                }
            }
        }
    }
}

目前，我正在硬编码矩形的大小和位置，例如腿：

Rectangle().foregroundColor(.blue)
    .frame(width: size.width, height: size.height/7)
    .position(x: size.width/2, y: size.height/2+80)

但显然，一旦屏幕尺寸/方向发生变化，这将不起作用。

将矩形的大小和位置调整为图像的最佳尝试是什么？

//更新

VStack {
    Spacer()
    ZStack {
        Rectangle()
         .frame(width:self.imageProperties.width, height:  self.imageProperties.height/2)
         .border(Color.pink, width: 3)
         .zIndex(20)
         .foregroundColor(Color.clear)
         .position(x: self.imageProperties.minX, y: self.imageProperties.maxY)

        ImageView(imageName: self.imageName, imageProps: self.imageProperties).zIndex(2)
       }
    Spacer()
}

导致以下结果：

所以我假设，定位是根据整个屏幕完成的，而不是图像位置本身。

Answer 1

相对于图像放置视图（示例中为宽度/高度的 90%）：

struct RelativePositionExampleView: View {
    var body: some View {
        Image("cookies")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .overlay(
                GeometryReader { geometry in
                    Text("Hello")
                        .background(Color.red)
                        .position(x: geometry.size.width * 0.9, y: geometry.size.height * 0.9)
                }
            )
    }
}

Answer 2

你也可以使用 relativeWidth/height，它在一段时间前就已经存在，这里显示了https://vmanot.com/reimplementing-swiftui-s-deprecated-relative-view-sizing-functions作为重新实现