使用 Apple Pencil 时，带有手势识别器的 WKWebView 变得不负责任

Question

我有一个包含 WKWebView 的 SwiftUI ContentView，并且我已向 WKWebView 添加了一个自定义 UIGestureRecognizer。这是我的代码的简化版本：

struct ContentView: View {
    var body: some View {
        WebView(urlString: "http://localhost")
    }
}

struct WebView: UIViewRepresentable {
    let urlString: String

    func makeUIView(context: Context) -> WKWebView {
        let webView = WKWebView()
        
        let recognizer = BaseGesture()
        
        webView.addGestureRecognizer(recognizer)
        
        return webView
    }

    func updateUIView(_ uiView: WKWebView, context: Context) {
        if let url = URL(string: urlString) {
            let request = URLRequest(url: url)
            uiView.load(request)
        }
    }
}

class BaseGesture: UIGestureRecognizer {
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent) {
        print(touches)
    }
    
    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent) {
        print(touches)
    }
        
    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent) {
        print(touches)
    }
    
    override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent) {
        print(touches)
    }
}

WebView 包含一个简单的 React 应用程序。

function App() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>{count}</p>
            <button onClick={() => setCount(count + 1)}>hello world</button>
        </div>
    );
}

当用手指使用触摸手势时，识别器工作正常。但是，当使用 Apple Pencil 时，WebView 变得无响应。只需用 Apple Pencil 敲击即可，但是当在屏幕上移动铅笔时，抬起铅笔后页面会变得无响应。

React 应用程序应用了以下样式来防止过度滚动：

html {
  overscroll-behavior: none;
}

当使用以下内容而不是

overscroll-behavior

时，问题仍然存在：

body {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
}

终端偶尔打印故障：

Touch event gesture recognizer failed to reset after ending gesture deferral: ( "<WKDeferringGestureRecognizer: 0x135e0e320 (Deferrer for touch start (immediate reset)); baseClass = UIGestureRecognizer; state = Ended; view = <WKContentView: 0x13980b200>>"

我无法始终如一地重现该错误，并且我不确定导致该错误的原因。

任何帮助或见解将不胜感激。谢谢！

Answer 1

// 创建 UIPencilInteraction 的局部变量

var applePencil: UIPencilInteraction!
var tapGuesture: UITapGestureRecognizer!

// 在 uiview 上初始化它并添加 applePencil 委托

applePencil = UIPencilInteraction()
applePencil.delegate = self
view.addInteraction(applePencil)

// 现在在您的网页视图上添加点击手势

yourwebview.addGuestureRecorgnizer(tapGuesture)
yourwebview.isUserInteractionEnabled = true

//然后在您的bview上添加点击图形。

 @objc func tapGuesture(_ guesture: UITapGestureRecognizer) {
        let touchEvent = guesture.location(in: webView) // get touchPoint on 
        
        // if you want to trigger touch event using apple pencil then you need to check  forceTouchCapability
        if traitCollection.forceTouchCapability == .available && guesture.force > 0 {
            // it means this is pencil event
            yourwebview.evaluateJavaScript("document.elementFromPoint(\(touchEvent.x), \(touchEvent.y))?.click()")
        }
        else
        {
            // regular touch point
        }
    }
    
    // WKNavigationDelegate methods if needed

// traitCollection 是 UIView 的属性，它定义了视图显示的特征集，forceTouch Capability 是指示哪些地方支持或不支持 3d touch 的属性。开发者链接（https://developer.apple.com/documentation/uikit/uitraitcollection/1623515-forcetouchcapability）

func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
        return true
    }

请检查此答案，如果您的问题已解决请告诉我