移动端Edit2D polygonEditTool触摸无响应问题求助

问题分析 #

当前使用Edit2D的polygonTool在PC端正常工作，但移动端触摸屏幕无反应、仅鼠标操作有效，核心原因是默认polygonTool未绑定触摸事件处理逻辑，仅监听了鼠标事件。

解决方案 #

1. 确保Viewer启用触摸支持 #

初始化Viewer时明确开启触摸交互（部分场景默认可能未启用）：

const viewer = new Autodesk.Viewing.GuiViewer3D(container, {
    touchEnabled: true, // 强制开启触摸支持
    disableTwoFingerZoom: false, // 按需配置双指缩放
    // 其他原有配置项
});

2. 扩展polygonTool的触摸事件处理 #

通过给polygonTool添加触摸事件处理方法，将触摸事件模拟为鼠标事件，复用工具原有的鼠标逻辑：

export const startTool = (tool) => {
    const viewer = window.VIEWER;
    const controller = viewer.toolController;

    const activeTool = controller.getActiveTool();
    const isEdit2D = activeTool && activeTool.getName().startsWith("Edit2");

    if (isEdit2D) {
        controller.deactivateTool(activeTool.getName());
    }

    if (!tool) {
        return;
    }

    // 为工具添加触摸事件处理
    tool.handleTouchStart = function (event) {
        event.preventDefault(); // 阻止页面默认滚动干扰
        const touch = event.touches[0];
        const mouseDownEvent = new MouseEvent('mousedown', {
            clientX: touch.clientX,
            clientY: touch.clientY,
            button: 0 // 模拟鼠标左键点击
        });
        this.handleMouseDown(mouseDownEvent);
    };

    tool.handleTouchMove = function (event) {
        event.preventDefault();
        const touch = event.touches[0];
        const mouseMoveEvent = new MouseEvent('mousemove', {
            clientX: touch.clientX,
            clientY: touch.clientY
        });
        this.handleMouseMove(mouseMoveEvent);
    };

    tool.handleTouchEnd = function (event) {
        event.preventDefault();
        const touch = event.changedTouches[0];
        const mouseUpEvent = new MouseEvent('mouseup', {
            clientX: touch.clientX,
            clientY: touch.clientY,
            button: 0
        });
        this.handleMouseUp(mouseUpEvent);

        // 模拟click事件完成多边形顶点添加
        const clickEvent = new MouseEvent('click', {
            clientX: touch.clientX,
            clientY: touch.clientY
        });
        this.handleClick(clickEvent);
    };

    controller.activateTool(tool.getName());
};

window.VIEWER.loadExtension('Autodesk.Edit2D').then(edit2d => {
    const polyTool = edit2d.defaultTools.polygonTool;
    startTool(polyTool);
});

3. 排除工具拦截问题 #

启动polygonTool前，除了关闭Edit2D系列工具，还可以检查并关闭其他可能抢占触摸事件的工具（如测量工具、导航工具等），确保触摸事件能正常传递到polygonTool。

内容的提问来源于stack exchange，提问作者黃衍齊