如何在 MacOS 上的 SwiftUI 中正确收集 CanvasView 的单击、拖动和释放鼠标事件

Question

对于 MacOS 上使用 SwiftUI 的绘图应用程序，我遇到了一个有趣的问题。当我在画布内单击时，DragGesture 不会触发。如果我单击工具栏或右侧面板中的某个项目，它会触发。我已经禁用了每个视图（工具栏、右面板、标尺、RulerGrid 等），但问题仍然存在。

简化的 CanvasView 看起来像这样：

GeometryReader { geometry in
    Path { path in
        for curObj in dm.objects {
            DrawingHelper.draw( curObj, in: geometry.size)
        }
    }
    .stroke(lineWidth: 2)
    .foregroundColor(.black)
    .allowsHitTesting(true)
    .gesture(
        DragGesture(minimumDistance: 0)
            .onChanged { value in
                currentPoints.append(value.location)
                print( "in onChanged")
            }
            .onEnded { _ in
                print( "in onEnded")
                if currentPoints.count > 1 {
                    let newObject = DrawingObject(
                        tool: dm.curTool,
                        points: currentPoints,
                        ...
                )
                dm.drawingObjects.append(newObject)
            }
            currentPoints.removeAll()
        }
    )

Edit-1 - CanvasView 是如何被调用的

GeometryReader { geometry in
    HStack (spacing: 0) {   // Remove space on right 
        Rulers( dm ) {
            ZStack {        // Draw rulerGrid on top
                CanvasView( dm ).background( .white )

                if( dm.showRulerGrid == true ) {
                    RulerGrid( dm ).background( .clear )
                }
            }
        } onRulerDoubleClick: { isShowingRulerSettings.toggle( )}
            .popover(isPresented: $isShowingRulerSettings, arrowEdge: .trailing) {
                RulerSettingsView( dm )
            }
            .background( .clear )
        
        if( dm.showPanel ) {
            RightPanelView( dm )
                .background( .black )
                .animation(.easeInOut( duration: 0.5) ) // TODO: Update this
                .transition(.move(edge: .trailing))
        }   // End of Side Panel
        
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background( .clear )
}

Answer 1

默认情况下，

A

Path

的可点击测试区域是其描边或填充区域。对于描边路径，这通常不是一个很大的区域 - 在您的情况下，只是一条 2 点宽的线。

您可能希望它是路径周围的整个矩形：

Path { path in
        for curObj in dm.objects {
            DrawingHelper.draw( curObj, in: geometry.size)
        }
    }
    .stroke(lineWidth: 2)
    .foregroundColor(.black)
    .contentShape(Rectangle())        // <—- ADD THIS
    .gesture(
        ... etc