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

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如果我们将缩小的画布缩放到原始大小的画布，现在鼠标指针在原始画布中的位置？

这第四步是计算，我不知道如何？

请帮我。

标签： pointershtml5-canvascoordinatesmousefabricjs

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>