Как рассчитать положение указателя мыши на холсте?

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. отображать небольшой (zoomedOut) холст пользователю.
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>