反转触摸设备上的手势 [Autodesk forge 查看器]

Posted 2023-03-16

【中文标题】反转触摸设备上的手势 [Autodesk forge 查看器]

【英文标题】：invert the gestures on touch devices [Autodesk forge viewer]

【发布时间】：2021-02-22 14:21:08

【问题描述】：

我在我的 Web 应用程序中使用 Forge Autodesk v7。我希望 iPhone 体验更直观，以便我能以最佳状态浏览查看器。为此，我想反转触摸设备上的手势：

拖动 1 个手指 = 平移

2 指拖动 = 旋转

我试图编写自己的方法来响应 touchstart 和 touchmove，修改 setView(position, target) 失败

document.addEventListener('touchmove', this.touchEvent);


touchEvent(ev): void 
if (ev.touches.length === 1) 
  const target = this.viewer.navigation.getTarget();
  const position = this.viewer.navigation.getPosition();
  position.x += ev.changedTouches[0].clientX;
  position.y += ev.changedTouches[0].clientY;
  target.x += (ev.changedTouches[0].clientX;
  target.y += ev.changedTouches[0].clientY;
  this.viewer.navigation.setView(position, target);
 else 
  console.log('Two finger');

【参考方案1】：

恐怕还没有配置可以让您简单地更改触摸手势的解释。我相信这是可以做到的，但需要更多的努力。如果您有兴趣，请继续阅读：

查看器使用工具栈的概念（更多信息请参考https://forge.autodesk.com/blog/custom-tools-forge-viewer），查看器使用的官方工具之一是工具栈中名为“gestures”的GestureHandler ”。此工具生成事件，然后堆栈中的其他工具可以使用这些事件。您感兴趣的事件称为handleGesture，默认的相机工具 - OrbitDollyPanTool - 使用以下代码处理事件：

this.handleGesture = function (event) 
    switch (event.type) 
        case "dragstart":
            _touchType = "drag";
            // Single touch, fake the mouse for now...
            return this.handleButtonDown(event, 0);

        case "dragmove":
            if (_touchType !== "drag") 
                this.handleButtonDown(event, 0);
                _touchType = "drag";
            
            return this.handleMouseMove(event);

        case "dragend":
            // We seem to often get a lone dragend after a multi-touch.
            if (_touchType === "drag") 
                this.handleButtonUp(event, 0);
                _touchType = null;
                return true;
            
            return false;


        case "panstart":
            _touchType = "pan";
            this.handlePanStart(event);
            this.handleDollyPan(event);
            return true;

        case "panmove":
            if (_touchType !== "pan") 
                _touchType = "pan";
                this.handlePanStart(event);
            
            return this.handleDollyPan(event);

        case "panend":
            if (_touchType === "pan") 
                this.isDragging = false;
                this.handleDollyPan(event);
                this.interactionEnd(kTouch);
                return true;
            
            return false;


        case "pinchstart":
            this.isDragging = true;
            _touchType = "pinch";

            _startXYZ.x = (event.normalizedX + 1.0) * 0.5;
            _startXYZ.y = 1.0 - (event.normalizedY + 1.0) * 0.5;

            _touchStartXY.set(event.canvasX, event.canvasY);
            _startXY.set(event.canvasX, event.canvasY);

            _activeModeLocked = false;
            this.interactionStart(kTouch);
            this.handleDollyPan(event);
            return true;

        case "pinchmove":
            return (_touchType === "pinch") ? this.handleDollyPan(event) : false;

        case "pinchend":
            if (_touchType === "pinch") 
                this.isDragging = false;
                this.handleDollyPan(event);
                this.interactionEnd(kTouch);
                return true;
            
            return false;
    
    return false
;

那么，你可以做的是重写OrbitDollyPanTool的handleGesture方法来触发不同的鼠标事件。

【参考方案2】：

无法评论@Petr Broz 的答案，但它有效！我们可以通过此实现锁定所有导航操作。

按照建议，我们使用触摸事件实现了自己的平移、缩放和环绕，以跟踪屏幕上的用户手指