Как исправить положение мыши относительно родительского холста? - PullRequest
Новая
       6

Как исправить положение мыши относительно родительского холста?

0 голосов
/ 23 июня 2019

Я пытаюсь использовать холст Vuejs Draw этого Codepen в качестве компонента. Все прекрасно работает, но я думаю, что положение мыши относительно окна. Поэтому при рисовании он отлично работает только в том случае, если холст имеет размер окна (ширину, высоту), если нет, то существует огромная разница в курсоре и позиции рисования.

Я попытался установить смещение ширины и высоты холста вместо окна, например 

setSize() {
   this.c.width = this.c.offsetWidth;
   this.c.height = this.c.offsetHeight - 60;
}

и позиции мыши с кодом ниже, как в этом SO answers 

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: (evt.clientX - rect.left) / (rect.right - rect.left) * canvas.width,
        y: (evt.clientY - rect.top) / (rect.bottom - rect.top) * canvas.height
    };
}

но это не изменило результат. Так что вернулся обратно и добавил в код песочницу. Если кто-нибудь может помочь мне выяснить, в чем здесь проблема? Я знаю, что это с позиции мыши, но не уверен, где именно.

Вот codesandbox ссылка на демонстрацию, которую я пытаюсь исправить.

Ответы [ 2 ]

0 голосов
/ 23 июня 2019

В примере, которым вы поделились, вы не учитываете смещение при перемещении курсора и вычитаете смещение в 60px, которое не нужно из-за фиксированного расположения элементов управления.

В строках есть только 2 различия: 234 и 239 

setSize() {
  this.c.width = this.c.offsetWidth;
  this.c.height = this.c.offsetHeight; // <--- HERE i removed the -60px offset
}

moveMouse(e) {
  let x = e.offsetX;
  let y = e.offsetY + 60; // <--- HERE i added the 60px offset
  // the ´e.offsetY´ is relative to the canvas but you have an offset
  // for the controls that is moving the cursor (the little dot) to the top

  var cursor = document.getElementById("cursor");

  cursor.style.transform = `translate(${x}px, ${y}px)`;
}

Вот пример, исправленный: Исправленные коды и поле

Примечание: я рекомендую изменить фиксированное расположение элементов управления и управлять всем с фиксированными значениями высоты и ширины или использовать flexbox для увеличения холста по мере необходимости.

0 голосов
/ 23 июня 2019

Я использую эти два метода (не знаю, не копаясь дальше, почему они не совпадают): 

canv = document.getElementById("id-of-canvas-object")

function mouseLocation(e)
{
 if (e.preventDefault)
    e.preventDefault();
 var x = e.PageX; var y = e.PageY;
// in one instance
 var relativeX = x - canv.offsetLeft;
 var relativeY = y - canv.offsetTop;
// in another instance
  var rect = canv.getBoundingClientRect();
  relativeX = x - rect.left;
  relativeY = y - rect.top;
}
...