主页 / coding / 问题 / 79207719
Accepted
swiftPunk
Asked: 2024-11-20 22:49:52 +0800 CST

当只有部分路径位于视图内时，如何使手势在路径上起作用？

  • 772

在下面的代码中，我正在读取预定义路径并将轴系统从 SwiftUI 转换为数学轴。到目前为止一切顺利。当我向此路径添加拖动手势时，问题出现了。该手势仅适用于形状的特定部分（如照片所示），而不适用于路径的其余部分。如何在不改变预定义路径的情况下解决此问题？

import SwiftUI

struct ContentView: View {
    
    @State private var pathCurrentOffset: CGSize = CGSize()
    @State private var pathLastOffset: CGSize = CGSize()
    
    var body: some View {
        
        GeometryReader { geometryValue in
            
            Color.white
            
            myCustomPathTest
                .scale(x: 1.0, y: -1.0)
                .stroke(Color.black, lineWidth: 5.0)
                .offset(x: pathCurrentOffset.width + geometryValue.size.width/2.0,
                        y: -pathCurrentOffset.height - geometryValue.size.height/2.0)
                .gesture(pathDragGesture)

        }
        .padding()
    }
    
    private var pathDragGesture: some Gesture {
        
        return DragGesture(minimumDistance: 0.0, coordinateSpace: .local)
            .onChanged() { gestureValue in
                
                pathCurrentOffset = CGSize(width: gestureValue.translation.width + pathLastOffset.width,
                                           height: -gestureValue.translation.height + pathLastOffset.height)
            }
            .onEnded() { gestureValue in
                pathLastOffset = pathCurrentOffset

            }
        
    }
}

let myCustomPathTest: Path = {
    return Path { path in
        path.move(to: .zero)
        path.addLine(to: CGPoint(x: 50.0, y: 50.0))
        path.addEllipse(in: CGRect(origin: CGPoint(x: -50.0, y: -50.0), size: CGSize(width: 100.0, height: 100.0)))
    }
}()

路径上的工作部分是：

在此处输入图片描述

swift

2 个回答

  1. Best Answer

    我认为主要问题是路径部分超出了内容框架。

    解决此问题的一种方法是在描边之前偏移路径。这不会像您想要的那样完全保持不变，但无论如何这可能是可以接受的：

    GeometryReader { geometryValue in
    myCustomPathTest
        .offsetBy(dx: geometryValue.size.width/2.0, dy: geometryValue.size.height/2.0)
        .scale(x: 1.0, y: -1.0)
        .stroke(Color.black, lineWidth: 5.0)
        .offset(x: pathCurrentOffset.width, y: -pathCurrentOffset.height)
        .gesture(pathDragGesture)

}
.background(.white)
.padding()

    除了使用 之外GeometryReader，您还可以使用Shape作为路径的包装器：

    struct ShapeForPath: Shape {
    let customPath: Path
    func path(in rect: CGRect) -> Path {
        customPath
            .offsetBy(dx: rect.size.width / 2, dy: rect.size.height / 2)
    }
}

    按照这种方式执行，body您的示例现在简化为以下内容：

    var body: some View {
    ShapeForPath(customPath: myCustomPathTest)
        .scale(x: 1.0, y: -1.0)
        .stroke(Color.black, lineWidth: 5.0)
        .offset(x: pathCurrentOffset.width, y: -pathCurrentOffset.height)
        .gesture(pathDragGesture)
        .background(.white)
        .padding()
}
    • 1

  2. 尝试扩展按钮的框架和/或使用.contentShape(Rectangle())

    您可能需要计算路径的边界矩形并将其用于框架。

    • 0

相关问题