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

您也可以使用相对宽度/高度，它在一段时间前已经存在，并在此处显示为https://vmanot.com/reimplementing-swiftui-s-deprecated-relative-view-sizing-functions作为重新实现