如何在浏览器中获取触控板绝对位置以实现SVG输入映射？

目前浏览器环境下无法直接获取触控板的绝对物理坐标。这是由于浏览器的安全与隐私限制：浏览器只会暴露与当前页面视口相关的相对输入信息（比如指针在页面内的位置、相对移动量），不会提供硬件设备本身的物理坐标数据，避免泄露用户的设备使用细节。

替代实现方案：校准式映射 #

既然无法直接获取触控板绝对坐标，你可以通过用户校准的方式实现触控板到SVG的精准映射，这是跨平台网页的可行方案：

• 校准流程：引导用户完成4个关键点位的校准：

  • 提示用户触摸触控板左上角，同时点击SVG的左上角，记录此时的指针页面位置与SVG坐标
  • 重复此操作，依次完成触控板右上、左下、右下与对应SVG角落的校准
  • 基于这4组校准数据，计算出触控板输入区域到SVG区域的比例映射关系

• 实时映射逻辑：

  • 监听pointermove事件获取指针的相对移动量（movementX/movementY）
  • 结合校准得到的比例，将相对移动量转换为SVG内的绝对坐标
  • 移动SVG内的指针元素到计算出的位置

示例代码片段 #

// SVG元素引用
const svgElement = document.getElementById('target-svg');
// 存储校准数据：触控板对应点的页面坐标与SVG坐标
const calibration = {
  topLeft: null,
  topRight: null,
  bottomLeft: null,
  bottomRight: null
};

// 校准：绑定点击事件记录对应点
function initCalibration() {
  const prompts = ['触摸触控板左上，点击SVG左上', '触摸触控板右上，点击SVG右上', '触摸触控板左下，点击SVG左下', '触摸触控板右下，点击SVG右下'];
  let step = 0;

  const handleCalibrate = (e) => {
    const svgPoint = getSVGPoint(e);
    const key = Object.keys(calibration)[step];
    calibration[key] = {
      clientX: e.clientX,
      clientY: e.clientY,
      svgX: svgPoint.x,
      svgY: svgPoint.y
    };

    step++;
    if (step < prompts.length) {
      alert(prompts[step]);
    } else {
      svgElement.removeEventListener('click', handleCalibrate);
      startMapping();
    }
  };

  alert(prompts[0]);
  svgElement.addEventListener('click', handleCalibrate);
}

// 将页面坐标转换为SVG内部坐标
function getSVGPoint(e) {
  const pt = svgElement.createSVGPoint();
  pt.x = e.clientX;
  pt.y = e.clientY;
  return pt.matrixTransform(svgElement.getScreenCTM().inverse());
}

// 启动触控板到SVG的映射
function startMapping() {
  let lastClientX, lastClientY;
  const svgPointer = document.getElementById('svg-pointer');

  svgElement.addEventListener('pointerdown', (e) => {
    lastClientX = e.clientX;
    lastClientY = e.clientY;
  });

  svgElement.addEventListener('pointermove', (e) => {
    if (!Object.values(calibration).every(pt => pt)) return;

    // 计算相对偏移
    const deltaX = e.clientX - lastClientX;
    const deltaY = e.clientY - lastClientY;

    // 计算映射比例
    const xScale = (calibration.topRight.svgX - calibration.topLeft.svgX) / 
                   (calibration.topRight.clientX - calibration.topLeft.clientX);
    const yScale = (calibration.bottomLeft.svgY - calibration.topLeft.svgY) / 
                   (calibration.bottomLeft.clientY - calibration.topLeft.clientY);

    // 计算SVG内的新位置
    const newX = parseFloat(svgPointer.getAttribute('cx')) + deltaX * xScale;
    const newY = parseFloat(svgPointer.getAttribute('cy')) + deltaY * yScale;

    // 更新指针位置
    svgPointer.setAttribute('cx', newX);
    svgPointer.setAttribute('cy', newY);

    lastClientX = e.clientX;
    lastClientY = e.clientY;
  });
}

// 初始化校准
initCalibration();

这种方案可以在所有支持标准指针事件的现代浏览器中运行，实现跨平台的触控板到SVG映射功能。

内容的提问来源于stack exchange，提问作者Hesper