Неправильные значения layerX / layerY?

Question

Я пытаюсь реализовать функцию как часть надстройки Firefox с Canvas, которая дает пользователю возможность рисовать., но, кажется, есть разница между результатом layerX / layerY и нарисованной линией.Рисовать можно только в левой верхней части элемента canvas.Когда указатель мыши достигает примерно половины элемента, линия не идет дальше.

Я уже проверил положение элементов в Firebug, и кажется, что все в порядке: холст находится внутри элемента divимеют определенную ширину 100%, в то время как рисунок заканчивается примерно на 50% элемента.Он также работает для установки значений вручную, так что линия также рисуется в правой части элемента canvas.У кого-нибудь есть идеи, что происходит не так?

Answer 1

Когда указатель мыши достигает примерно половины элемента, линия не идет дальше.

Это может случиться по многим причинам. Неверно переведенный контекст (от вращения / перевода / масштабирования) и несоответствующий размер холста (то, что вы написали как в html, и то, что вы рассматриваете в коде).

Вы уверены, что LayerX и LayerY дают вам правильные координаты мыши? Что именно вы подразумеваете под "разницей" между layerx / y и что нарисовано? Есть ли смещение? Я спрашиваю, потому что мой код мыши немного сложнее:

// Sets mx,my to the mouse position relative to the canvas
// unfortunately this can be tricky, we have to worry about padding and borders
function getMouse(e) {
      var element = canvas, offsetX = 0, offsetY = 0;

      if (element.offsetParent) {
        do {
          offsetX += element.offsetLeft;
          offsetY += element.offsetTop;
        } while ((element = element.offsetParent));
      }

      // Add padding and border style widths to offset
      offsetX += stylePaddingLeft;
      offsetY += stylePaddingTop;

      offsetX += styleBorderLeft;
      offsetY += styleBorderTop;

      mx = e.pageX - offsetX;
      my = e.pageY - offsetY
}