标签: geometryreader

我目前正在尝试在图像顶部绘制 Firebase ML Kit 识别的文本框。目前，我还没有成功，我根本看不到任何框，因为它们都显示在屏幕外。我正在查看这篇文章以供参考：https://medium.com/swlh/how-to-draw-bounding-boxes-with-swiftui-d93d1414eb00以及该项目： https: //github.com/firebase /quickstart-ios/blob/master/mlvision/MLVisionExample/ViewController.swift

这是应显示框的视图：

struct ImageScanned: View {
var image: UIImage
@Binding var rectangles: [CGRect]
@State var viewSize: CGSize = .zero

var body: some View {
    // TODO: fix scaling
       ZStack {
           Image(uiImage: image)
               .resizable()
               .scaledToFit()
               .overlay(
                   GeometryReader { geometry in
                    ZStack {
                        ForEach(self.transformRectangles(geometry: geometry)) { rect in
                            Rectangle()
                            .path(in: CGRect(
                                x: rect.x,
                                y: rect.y,
                                width: rect.width,
                                height: rect.height))
                            .stroke(Color.red, lineWidth: 2.0)
                        }
                    }
                }
           )
       }
}
private func transformRectangles(geometry: GeometryProxy) -> …

我有可以拖放到其他视图（比如说类别）之上的视图。为了检测我位于哪个类别视图之上，我将它们的帧存储在帧数组中，这发生在它们不可见覆盖层的 onAppear 中。（这是基于本教程中 Paul Hudson 的实现）。

这一切都很好，除非这些视图的位置发生变化，例如在设备方向或 iPad 上调整窗口大小时。这当然不会触发 onAppear，因此帧不再匹配。

HStack() {
ForEach(categories) { category in
    ZStack {
        Circle()
        Rectangle()
            .foregroundColor(.clear)
            .overlay(
                GeometryReader { geo in
                    Color.clear
                        .onAppear {
                            categoryFrames[index(for: category)] = geo.frame(in: .global)
                        }
                }
            )
        }
    }
}

因此，任何关于如何在这些情况下更新帧或如何以不同方式观察它们的想法都将受到欢迎。

基于这个问题：SwiftUI - Drawing (curved) paths between view

我使用 绘制所需的视图和路径GeometryReader。问题是，现在屏幕变得太长而无法显示全部内容（有 15 个这样的视图，但您在这里只能看到 6 个）：

所以...我ScrollView在整个事情上添加了一个。之外，GeometryReader因为否则所有观点都是错误的。这是代码：

var body: some View {
        if (challengeViewModel.challengeAmount != 0) {
            ScrollView {
                GeometryReader { geometry in
                    let points = calculatePoints(geometry: geometry)
                    drawPaths(geometry: geometry, points: points)
                            .stroke(lineWidth: 3).foregroundColor(.yellow)
                    drawCircles(geometry: geometry, points: points)
                }
            }
                 .background(Color.black)
                 .navigationBarTitle("Journey")

        } else {
            Text("Loading...")
        }
    }

（内容基本上就是1.根据屏幕尺寸计算点，2.沿着点绘制路径，3.在点上放置圆圈）

问题：
现在我明白需要从父级和子级GeometryReader获取其高度，这成为一个“先有鸡还是先有蛋的问题”。ScrollView所以我想手动计算高度GeometryReader。

我的尝试

第一次尝试

最简单的方法是采用一些固定值并计算出一个非常粗略的值。我只是将其添加到GeometryReader：

GeometryReader { geometry in …

我有一个这样的图像

我想使用 SwiftUI 将其分成中心的两部分。给我留下了两张可以访问的独立图像。但是我不知道如何将原件分成顶部和底部。这两块必须对齐才能创建原始图像。

顶部图片：

底部图片：

我尝试使用几何读取器读取高度和宽度并返回高度一半的图像，但是这两个图像不喜欢这样。

GeometryReader { geo in
    image
       .frame(width: geo.width, height: geo.height / 2, alignment: .center)
       .clipped()
}

用非常基本的术语来说，在我的 Android 应用程序中，我有一个屏幕可以绘制圆圈，然后用曲线将它们连接起来。

我正在尝试在 SwiftUI 中重新创建它。

我发现这个问题看起来与我正在寻找的问题非常相似，但不幸的是答案非常简短，即使在阅读了大约 10 个不同的博客和 5 个视频之后，我仍然没有完全理解它。
我可以在 SwiftUI 中布局后获取“View”的位置吗？

所以基本逻辑是我以某种方式GeometryReader用来获取我创建的每个元素的.midX和.midY坐标Circle，然后Paths在它们之间进行绘制。我唯一的问题是在创建圆之后获取这些坐标。

如何将路径添加到屏幕上，在ZStack前面Circles，路径作为一个自定义形状在后面？

更多信息：
在 Android 上，最终结果如下所示：

基本上我有一个Challenge具有名称和一些详细文本的对象，我将它们像这样布局，以便它在视觉上代表用户的“旅程”。

所以我真正需要的是知道如何布置一些圆圈/图像（上面有文字），然后绘制连接它们的线。每个这样的挑战圈都需要可点击才能打开详细视图。

如何从另一个视图访问一个视图的大小？

为了获得“ Hello world！ ”文本的高度，我在其上附加了.background()一个GeometryReader。现在，我只是使用 打印高度let _ = print(proxy.size.height)。

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello world!")
                .background(
                    GeometryReader { proxy in
                        Color.clear /// placeholder
                        let _ = print(proxy.size.height) /// 20.333333333333332
                    }
                )
            
            Text("Height of first text is ???")
        }
    }
}

结果：

我现在想替换为“ Hello world!??? ”的高度。我怎样才能做到这一点？