如何计算画布中的鼠标指针位置？

Question

我正在实现图像处理工具，我想从鼠标点击画布的图像中删除背景。

我的画布自动设置为适合窗口。如果图像太大，则会自动缩小以适合视口。

现在，当我的画布缩小时，我的图像变得模糊。 我正在使用以下代码计算鼠标的位置：

mouse:move': (evt) => {
   var canvasOffset = $('#eraserCanvas').offset();
   var x = evt.e.pageX - canvasOffset.left;
   var y = evt.e.pageY - canvasOffset.top;
   var pixel = ctx.getImageData(x, y, 1, 1);
}

但这里的问题是我的context 也与画布大小相同（缩小），所以我的图像的像素数据是小图像，可能导致最终输出模糊。

经过大量搜索和思考，我找到了一种解决方案，如果我们将上下文缩放到原始图像大小。只有画布被调整大小然后我们的最终输出是清晰的。

现在的问题是我的鼠标位置是根据我的缩放画布。因此，有必要在画布的原始大小中计算鼠标位置，以便在缩放的画布中获得正确的像素。但我不知道如何计算缩放画布中指针的位置是原始尺寸画布或上下文中的位置。

请看下图了解更多：

此处原始大小的画布不会向用户显示。但删除像素的过程是在原始大小的画布上。

---

整个场景（上图）

1. 向用户显示小（缩小）画布。
2. 用户从该画布（图像）中选择像素。
3. 我们首先在缩放的画布（图像）上获取鼠标指针位置。
4. 现在what 将鼠标指针在原始画布中的位置，如果我们将缩放的画布缩放到原始大小的画布？

这第四步是计算，我不知道怎么做？

请帮帮我。

Answer 1

如果您打算使用 css 缩放画布，我会使用此函数来获取鼠标在画布上的位置。首先，您将比例计算为画布的初始大小和缩放的画布大小之间的关系。接下来重新计算鼠标在画布上的位置。

function oMousePosScaleCSS(canvas, evt) {
      let ClientRect = canvas.getBoundingClientRect(), 
          scaleX = canvas.width / ClientRect.width,
          scaleY = canvas.height / ClientRect.height; 
          return {
          x: (evt.clientX - ClientRect.left) * scaleX, 
          y: (evt.clientY - ClientRect.top) * scaleY 
      }
    }

请看一个工作示例：

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let cw = canvas.width = 150;
let ch = canvas.height = 150;


function oMousePosScaleCSS(canvas, evt) {
  let ClientRect = canvas.getBoundingClientRect(), 
      scaleX = canvas.width / ClientRect.width,
      scaleY = canvas.height / ClientRect.height; 
      return {
      x: (evt.clientX - ClientRect.left) * scaleX, 
      y: (evt.clientY - ClientRect.top) * scaleY 
  }
}


let last = {}

canvas.addEventListener("mousedown", (e)=>{
  m = oMousePosScaleCSS(canvas, e)
  
  ctx.clearRect(0,0,cw,ch);

  last.x = m.x;
  last.y = m.y;
  
  
 
});

canvas.addEventListener("mouseup", (e)=>{
last={}

});


canvas.addEventListener("mousemove", (e)=>{
  if(last.x){
   m = oMousePosScaleCSS(canvas, e)
   
    
    ctx.beginPath();
    ctx.moveTo(last.x,last.y);
    ctx.lineTo(m.x,m.y);
    ctx.stroke();
    
    
    last.x = m.x;
    last.y = m.y;
    
  }
  

})

canvas {
  border:1px solid #d9d9d9;
  display: block;
  position:absolute;
  margin:auto;
  left:0;
  right:0;
  top:0;
  bottom:0;
  /***********************/
  transform: scale(.75, .75);
  /***********************/
}

<canvas id="canvas"></canvas>