AntV X6 在移动端强制横屏后拖动方向是反的处理方式/仅横向|纵向拖动方式

157 阅读1分钟

首先,不启用X6默认的拖动。

fixedTouch(graph, container);
function fixedTouch(graph: Graph, touchArea: HTMLDivElement) {
  let startPoint: any = null;
  let isLandscape = true;

  touchArea.addEventListener('touchstart', (e: any) => {
    # 节点上不拖动
    if (e.target.className.baseVal !== 'x6-graph-svg') {return false;}
    startPoint = { x: e.touches[0].clientX, y: e.touches[0].clientY };
    isLandscape = window.innerHeight < window.innerWidth;
  });

  touchArea.addEventListener('touchmove', (e) => {
    if (startPoint) {
      /**
       * 处理 强制横屏后拖动方向是反的 ———— START
      */
      const dx = isLandscape
        ? e.touches[0].clientX - startPoint.x
        : e.touches[0].clientY - startPoint.y;
      const dy = !isLandscape
      ? e.touches[0].clientX - startPoint.x
      : e.touches[0].clientY - startPoint.y;
      /**
       * 处理 强制横屏后拖动方向是反的 ———— END
      */
      
      /**
       * 仅横向 ———— START
      */
      const dx = isLandscape
        ? e.touches[0].clientX - startPoint.x
        : e.touches[0].clientY - startPoint.y;
      const dy = 0;
      /**
       * 仅横向 ———— END
      */
      
      /**
       * 仅纵向 ———— START
      */
      const dx = 0;
      const dy = !isLandscape
      ? e.touches[0].clientX - startPoint.x
      : e.touches[0].clientY - startPoint.y;
      /**
       * 仅纵向 ———— END
      */
      
      graph.translateBy(dx, dy);
      startPoint = { x: e.touches[0].clientX, y: e.touches[0].clientY };
    }
  });
  touchArea.addEventListener('touchend', (e) => {
    startPoint = null;
  });
}

www.yuque.com/sxd_panda/a…