在压缩缩放后获取正确的坐标，以便在HTML5 Canvas中绘制线条

Question

我正在开发一个应用程序，其中我粘贴图像，在画布上绘图和绘画。此应用程序还可以通过HammerJS进行缩放缩放缩放功能，画布可以将其拖动/平移到不同位置。我的问题是：在缩放或拖动画布后，我无法获得正确的画布坐标。我想在缩放或拖动画布后绘制手指画，但无法找到我触摸的正确位置.. :(我也是新的蜜蜂。这是捏放大和缩小的代码

var scaleFoctor = 1;
function hammerIt(elm) {  
  hammertime = new Hammer(elm, {});
  hammertime.get('pinch').set({
    enable: true
  });
  var posX = 0,
  posY = 0,
  scale = 1,
  last_scale = 1,
  last_posX = 0,
  last_posY = 0,
  max_pos_x = 0,
  max_pos_y = 0,
  transform = "",
  el = elm;

  if($('#pinchZoomInZoomOut').find('#pinchZoomInZoomOutBg').hasClass('btnIconHighLight')) {
    hammertime.on('doubletap pan pinch panend pinchend panleft panright tap press', function(ev) {
        //console.log("ev.type -- "+ev.type);
    if (ev.type == "doubletap") {
      transform =
      "translate3d(0, 0, 0) " +
      "scale3d(2, 2, 1) ";
      scale = 2;
      last_scale = 2;
      try {
        if (window.getComputedStyle(el, null).getPropertyValue('-webkit-transform').toString() != "matrix(1, 0, 0, 1, 0, 0)") {
          transform =
          "translate3d(0, 0, 0) " +
          "scale3d(1, 1, 1) ";
          scale = 1;
          last_scale = 1;
        }
      } catch (err) {}
      el.style.webkitTransform = transform;
      transform = "";
    }

  if($('#pinchZoomInZoomOut').find('#pinchZoomInZoomOutBg').hasClass('btnIconHighLight')) {
        //pan    
      if (scale != 1) {  
            //console.log("pan ev.type -- "+ev.type);
          posX = last_posX + ev.deltaX;
          posY = last_posY + ev.deltaY;
            //console.log("posX - "+posX);
            //console.log("posY - "+posY);
            max_pos_x = Math.ceil((scale - 1) * el.clientWidth / 2);
            max_pos_y = Math.ceil((scale - 1) * el.clientHeight / 2);
            //console.log("max_pos_x - "+max_pos_x);
            //console.log("max_pos_y - "+max_pos_y);
            if (posX > max_pos_x) {
              posX = max_pos_x;
            }
            if (posX < -max_pos_x) {
              posX = -max_pos_x;
            }
            if (posY > max_pos_y) {
              posY = max_pos_y;
            }
            if (posY < -max_pos_y) {
              posY = -max_pos_y;
            }
          }
        }else{

        }
    //pinch
    if (ev.type == "pinch") {
      startDrawing = false;
      scale = Math.max(.999, Math.min(last_scale * (ev.scale), 4));
      scaleFoctor = scale;
        //console.log("pinch scale -- "+scale);
      }
      if(ev.type == "pinchend"){
        //console.log("pinchend stopped 1 ")
        last_scale = scale;
        //console.log("pinchend last_scale -- "+last_scale);
        scaleFoctor = scale;
    }  
    //panend  
    if(ev.type == "panend"){
        //console.log("pinchend stopped 2 ")
      last_posX = posX < max_pos_x ? posX : max_pos_x;
      last_posY = posY < max_pos_y ? posY : max_pos_y;
    }  
    if (scale != 1) {
        ///console.log("pinchend stopped")
      transform =
      "translate3d(" + posX + "px," + posY + "px, 0) " +
      "scale3d(" + scale + ", " + scale + ", 1)";
    }
    if (transform) {
      el.style.webkitTransform = transform;
    }  
  });
}

以下代码用于获取触摸点并在画布上绘图

// listen for touch events
$("#wrapperCanvas").touchstart(function (e) {
 // var x = e.clientX;
   // var y = e.clientY;

   //alert("X coords: " + x + ", Y coords: " + y);
  if($('#pinchZoomInZoomOut').find('#pinchZoomInZoomOutBg').hasClass('btnIconHighLight')) {
    console.log("touchstart Zoom enabled startDrawing -- "+startDrawing);
    console.log("touchstart Zoom enabled startDrawing -- "+scaleFoctor);
    startDrawing = false;
    pinchZoomInZoomOutOn();
  }else{
    startDrawing = true;
    console.log("touchstart marker enabled startDrawing -- "+startDrawing);
    newCtx = document.getElementById('drawOnScreen').getContext("2d"); 

    e.preventDefault();
    var canvas = document.getElementById("drawOnScreen");
    var rect = canvas.getBoundingClientRect();
    //clipBounds_canvas = canvas.getClipBounds();
    var out = {x:0, y:0};
    if(e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel'){
      var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
      console.log("touch.pageX - "+touch.pageX);
      console.log("touch.pageY - "+touch.pageY);
      if(scaleFoctor != 1){
        out.x = touch.pageX/scaleFoctor;
        out.y = touch.pageY/scaleFoctor; 
      }else{
        out.x = touch.pageX/scaleFoctor - rect.left;
        out.y = touch.pageY/scaleFoctor - rect.top;  
      }
    }
    var startX = parseInt(out.x);
    var startY = parseInt(out.y);
    Draw(startX, startY, false);
  }
  //start drawing on canvas
});
$("#wrapperCanvas").touchmove(function (e) {
  //started drawing on canvas
  if (startDrawing) {
    e.preventDefault();
    var canvas = document.getElementById("drawOnScreen");
    //var ctx2 = canvas.getContext("2d");
    var rect = canvas.getBoundingClientRect();
    var out = {x:0, y:0};
    if(e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel'){
      var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
      //out.x = touch.pageX/scaleFoctor - rect.left;
      //out.y = touch.pageY/scaleFoctor - rect.top;
      if(scaleFoctor != 1){
        out.x = touch.pageX/scaleFoctor;
        out.y = touch.pageY/scaleFoctor; 
      }else{
        out.x = touch.pageX/scaleFoctor - rect.left;
        out.y = touch.pageY/scaleFoctor - rect.top;  
      }
    }
    var startX = parseInt(out.x);//parseInt(e.clientX - offsetX);
    var startY = parseInt(out.y);//parseInt(e.clientY - offsetY);
    Draw(startX, startY, true);
      }
});
$("#wrapperCanvas").touchend(function (e) {
   //handleMouseUp(e);
  startDrawing = false;
  cPush();
});

请在zoomin / zoomout后帮我画画。