SwiftUI：检测 Mac 触控板上的手指位置

Posted 2023-02-24

【中文标题】SwiftUI：检测 Mac 触控板上的手指位置

【英文标题】：SwiftUI: Detect finger position on Mac trackpad

【发布时间】：2020-05-16 09:52:22

【问题描述】：

我正在为 macOS 制作一个 SwiftUI 应用程序，我想通过检测用户手指的位置将触控板用作 (x, y) 输入。我希望能够检测到在触控板上搁置的多个手指（而不是拖动）。我该怎么做？

A similar question 以前曾被问过，但我再次问，因为那是近 10 年前的事了，答案都在 Obj-C 中（一个在 Swift 3 中），我想知道是否有更新方法。最重要的是，我不知道如何在我的 SwiftUI 应用程序中实现 Obj-C 代码，所以如果没有任何更新的方法，如果有人能解释如何实现旧的 Obj-C 代码，我将不胜感激。

为了说明我的意思，Audioswift 应用程序的 video demo 完全符合我的要求。 macOS 本身也将其用于hand-writing Chinese（虽然我不需要识别字符）。

【问题讨论】：

我是个新手，我知道这是一项复杂的任务，所以如果有人能简单地用示例代码解释一下，我将不胜感激。非常感谢！

欢迎您！这是一个相当广泛的问题 - 涉及很多主题（如何混合 Objective-C 和 Swift，如何在 SwiftUI 中使用 AppKit，......）。首先，请访问Help Center 并阅读如何提问以及您可以要求什么。至少包含一些代码 (MRE) 以向其他人展示您确实试图解决它也很重要。我确实为您发布了答案，只是为了证明这个问题的广泛性和复杂性。

@zrzka 非常感谢您的详细回复！抱歉这个问题，下次我会小心的。

不客气。如果有任何不清楚并需要更多解释，请随时询问（在答案下）。 （有趣，我不能提你，嗯）。

【参考方案1】：

始终将您的任务拆分为较小的任务，并一项一项地完成。以同样的方式提问，避免涉及大量主题的广泛问题。

目标

触控板视图（灰色矩形） 顶部的圆圈显示手指的物理位置

第 1 步 - AppKit

SwiftUI 未提供所有必需的信息 AppKit 和 NSTouch 可以 - normalizedPosition。

第一步是创建一个简单的AppKitTouchesView 通过委托转发所需的触摸。

import SwiftUI
import AppKit

protocol AppKitTouchesViewDelegate: AnyObject 
    // Provides `.touching` touches only.
    func touchesView(_ view: AppKitTouchesView, didUpdateTouchingTouches touches: Set<NSTouch>)


final class AppKitTouchesView: NSView 
    weak var delegate: AppKitTouchesViewDelegate?

    override init(frame frameRect: NSRect) 
        super.init(frame: frameRect)
        // We're interested in `.indirect` touches only.
        allowedTouchTypes = [.indirect]
        // We'd like to receive resting touches as well.
        wantsRestingTouches = true
    

    required init?(coder: NSCoder) 
        fatalError("init(coder:) has not been implemented")
    

    private func handleTouches(with event: NSEvent) 
        // Get all `.touching` touches only (includes `.began`, `.moved` & `.stationary`).
        let touches = event.touches(matching: .touching, in: self)
        // Forward them via delegate.
        delegate?.touchesView(self, didUpdateTouchingTouches: touches)
    

    override func touchesBegan(with event: NSEvent) 
        handleTouches(with: event)
    

    override func touchesEnded(with event: NSEvent) 
        handleTouches(with: event)
    

    override func touchesMoved(with event: NSEvent) 
        handleTouches(with: event)
    

    override func touchesCancelled(with event: NSEvent) 
        handleTouches(with: event)
    

第 2 步 - 简化的触控结构

第二步是创建一个简单的自定义 Touch 结构，该结构仅包含所有必需的信息并且与 SwiftUI 兼容（未翻转 y）。

struct Touch: Identifiable 
    // `Identifiable` -> `id` is required for `ForEach` (see below).
    let id: Int
    // Normalized touch X position on a device (0.0 - 1.0).
    let normalizedX: CGFloat
    // Normalized touch Y position on a device (0.0 - 1.0).
    let normalizedY: CGFloat

    init(_ nsTouch: NSTouch) 
        self.normalizedX = nsTouch.normalizedPosition.x
        // `NSTouch.normalizedPosition.y` is flipped -> 0.0 means bottom. But the
        // `Touch` structure is meants to be used with the SwiftUI -> flip it.
        self.normalizedY = 1.0 - nsTouch.normalizedPosition.y
        self.id = nsTouch.hash
    

第 3 步 - 为 SwiftUI 包装它

NSViewRepresentable 文档 Binding 文档

第三步是创建一个 SwiftUI 视图来包装我们的 AppKit AppKitTouchesView 视图。

struct TouchesView: NSViewRepresentable 
    // Up to date list of touching touches.
    @Binding var touches: [Touch]

    func updateNSView(_ nsView: AppKitTouchesView, context: Context) 
    

    func makeNSView(context: Context) -> AppKitTouchesView 
        let view = AppKitTouchesView()
        view.delegate = context.coordinator
        return view
    

    func makeCoordinator() -> Coordinator 
        Coordinator(self)
    

    class Coordinator: NSObject, AppKitTouchesViewDelegate 
        let parent: TouchesView

        init(_ view: TouchesView) 
            self.parent = view
        

        func touchesView(_ view: AppKitTouchesView, didUpdateTouchingTouches touches: Set<NSTouch>) 
            parent.touches = touches.map(Touch.init)
        
    

第 4 步 - 创建一个TrackPadView

第四步是创建一个TrackPadView，它在内部确实使用了我们的 TouchesView 并在其上画圈代表手指的物理位置。

struct TrackPadView: View 
    private let touchViewSize: CGFloat = 20

    @State var touches: [Touch] = []

    var body: some View 
        ZStack 
            GeometryReader  proxy in
                TouchesView(touches: self.$touches)

                ForEach(self.touches)  touch in
                    Circle()
                        .foregroundColor(Color.green)
                        .frame(width: self.touchViewSize, height: self.touchViewSize)
                        .offset(
                            x: proxy.size.width * touch.normalizedX - self.touchViewSize / 2.0,
                            y: proxy.size.height * touch.normalizedY - self.touchViewSize / 2.0
                        )
                
            
        
    

第 5 步 - 在主库中使用它ContentView

第五步是在我们的主视图中以接近真实触控板纵横比的纵横比使用它。

struct ContentView: View 
    var body: some View 
        TrackPadView()
            .background(Color.gray)
            .aspectRatio(1.6, contentMode: .fit)
            .padding()
            .frame(maxWidth: .infinity, maxHeight: .infinity)
    

完成项目

打开 Xcode 新建项目（macOS App & Swift & SwiftUI） 从this gist复制并粘贴ContentView.swift

【讨论】：

再次感谢您的宝贵时间，您的解决方案效果很好。我想知道，是否有可能“接管”鼠标光标，从而禁用系统手势（如 4 指滑动）并且即使光标没有开始悬停在 TrackpadView 上，应用程序也可以接收触摸？如果有任何资源可以指点我，我将不胜感激！ （编辑：奇怪，我也不能提你）

@qitianshi 很抱歉，但我不知道 - 没有尝试接管触控板以仅在我的应用程序中使用它。我也不知道这是否可能。可能是另一个问题的好候选人。

我尝试了您的代码并对其进行了修改，因为我只需要一个触摸事件，然后将其放入我的 SwiftUI 代码中，我收到有关编译器无法在合理时间内键入检查表达式的错误。在我将 TouchView 放入我自己的 SwiftUI View 代码之后。