如何在 ZStack SwiftUI 中将文本放置在图像的精确点上

Question

下图是我写的代码的输出。将文本与我的图像放在 ZStack 中时，文本会自动居中。但我希望将文本放置在 y 轴上的 100 数字上方。我怎样才能做到这一点？ Image

免责声明：我正在使用 Swift 游乐场

这是我的代码

import SwiftUI
import PlaygroundSupport


struct ContentView : View {
    var body: some View {
        ZStack {
            Image(uiImage: UIImage(named: "Screenshot 2020-05-12 at 14.14.22")!).resizable()
                .frame(width: 700.0, height: 700.0)
            Text("Hello")
            .foregroundColor(Color.black)
        }

    }
}
PlaygroundPage.current.setLiveView(ContentView())

Answer 1

这是可能的方法

ZStack {
    Image(uiImage: UIImage(named: "large_image")!).resizable()
        .frame(width: 700.0, height: 700.0)
        .overlay(GeometryReader { gp in
            Text("Hello")
               .foregroundColor(Color.black)
               .position(x: gp.size.width / 2, y: gp.size.height / 4)
            }
        )
}

当然，如果您生成图像，那么您应该知道更准确的 y：定位文本的坐标。在这种情况下，GeometryReader 给出图像的局部坐标 space.

如何在 ZStack SwiftUI 中将文本放置在图像的精确点上

How to place Text on exact point of an Image in a ZStack SwiftUI

arrays

image

swift

swift-playground