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

Question

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

我在我的 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');
}

}

Answer 1

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

查看器使用工具栈的概念（更多信息请参考https://forge.autodesk.com/blog/custom-tools-forge-viewer ），查看器使用的官方工具之一是GestureHandler在工具堆栈中可用，名称为“ 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方法以触发不同的鼠标事件。

Answer 2

无法对@Petr Broz 的回答发表评论，但它奏效了！ 我们可以使用此实现锁定所有导航操作。

正如建议的那样，我们使用触摸事件来跟踪用户在屏幕上的手指，实现了我们自己的平移、缩放和轨道