Javascript 画布触摸支持，定位触摸事件 有什么问题

我正在使用Vuejs构建一种绘图应用程序。在执行此操作时，我遇到了触摸事件定位问题。我的意思是，每次我尝试在浏览器中使用触摸模拟绘制某些东西时，线都会在触摸点下方绘制约300px。这段代码在没有触摸模拟的情况下工作得很好，但不幸的是我需要触摸支持。谢谢你的帮助

DOM中的画布 事件功能 划清界限

---

谢谢你的帮助 要获得画布位置，必须将所有画布父对象的offsetTop/offsetLeft相加

function touchPose(e){
    if (e.touches) {
      if (e.touches.length === 1) { // Only deal with one finger
          let touch = e.touches[0]; // Get the information for finger #1
          let offset = getOffsetSum(touch.target);
          return [touch.pageX - offset.x,
          touch.pageY - offset.y]
      }
    }
}

function getOffsetSum(element) {
    var curleft = 0, curtop = 0;

    if (element.offsetParent) {
        do {
            curleft += element.offsetLeft;
            curtop  += element.offsetTop;
            element = element.offsetParent;
        } while (element);
    }

    return { x: curleft, y: curtop };
}

---

谢谢，它与y轴完美配合，但与x轴不配合。我的意思是开始部分向左移动了100px。我通过硬编码'touch.pageX-offset.x+touch.target.width/2解决了这个问题`

const Canvas = ref('');

    
const state = reactive({
      canvas: '',
      isDrawing: false,
      X: '',
      Y: '',
    })

onMounted(() => {
      let canvas = document.querySelector('#canvas')
      let context = canvas.getContext('2d')
      state.canvas = context
      Canvas.value.addEventListener('touchstart', beginTouchDrawing, false);
      Canvas.value.addEventListener('touchmove', TouchDrawing, false);
    })

function beginTouchDrawing(event) {
      state.isDrawing = true
      let pos = touchPose(event)
      drawLine(pos[0], pos[1])
      state.X = pos[0];
      state.Y = pos[1];
      event.preventDefault();
    }

    
function touchPose(e){
        if (e.touches) {
          if (e.touches.length === 1) { // Only deal with one finger
              let touch = e.touches[0]; // Get the information for finger #1
              return [touch.pageX - touch.target.offsetLeft,
              touch.pageY - touch.target.offsetTop]
          }
        }
    }


    
function TouchDrawing(event) {
      if (state.isDrawing) {
        let pose = touchPose(event)
        drawLine(state.X, state.Y, pose[0], pose[1]);
        state.X = pose[0];
        state.Y = pose[1];
        event.preventDefault();
      }
    }

function drawLine(X, Y, newX, newY){
      let ctx = state.canvas
      ctx.lineWidth = 10;
      ctx.beginPath();
      ctx.moveTo(X, Y);
      ctx.lineTo(newX, newY);
      ctx.stroke();
      ctx.closePath();
      ctx.lineCap = 'round';
    }

function touchPose(e){
    if (e.touches) {
      if (e.touches.length === 1) { // Only deal with one finger
          let touch = e.touches[0]; // Get the information for finger #1
          let offset = getOffsetSum(touch.target);
          return [touch.pageX - offset.x,
          touch.pageY - offset.y]
      }
    }
}

function getOffsetSum(element) {
    var curleft = 0, curtop = 0;

    if (element.offsetParent) {
        do {
            curleft += element.offsetLeft;
            curtop  += element.offsetTop;
            element = element.offsetParent;
        } while (element);
    }

    return { x: curleft, y: curtop };
}