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

【问题标题】：SwiftUI: How to overlay an image with multiple shapes and dependent positioningSwiftUI：如何覆盖具有多种形状和依赖定位的图像
【发布时间】：2020-05-22 19:35:21
【问题描述】：

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

我的 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()
}

导致以下结果：

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

【问题讨论】：

这是简单的数学运算，只需在原始图像上预先计算矩形的相对位置/大小，然后在运行时正确调整大小因子（放置在图像背景中的 GeometryReader 可以为您提供运行时图像大小）。
@Asperi 这是真的，但我对 SwiftUI 完全陌生，所以我还不知道如何存储图像的大小。我已经尝试过 GeometryReader 但显然我没有不正确的方式..
以this one 为例。
@Asperi 好的，我想出了几何阅读器部分。但是 ZStack 中的位置并没有真正起作用。我发布了我的问题的更新。如果有任何进一步的提示，我会很高兴

标签： image swiftui overlay zstack

【解决方案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)
                }
            )
    }
}

【讨论】：

【解决方案2】：

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

【讨论】：