HTML5 / Canvas Mouse Положение выключено при размещении на реальном сайте - PullRequest
Новая
       30

HTML5 / Canvas Mouse Положение выключено при размещении на реальном сайте

3 голосов
/ 27 августа 2011

Я фиксирую положение мыши, как это 

    mouse_move: function(e)
    {
        mousePos.x = e.pageX - vr.o.context.canvas.offsetLeft;
        mousePos.y = e.pageY - vr.o.context.canvas.offsetTop;
    },

, и оно работало, как мечта, во всех современных браузерах в процессе разработки, даже протестировал Wrapping <canvas/> в базовой структуре dom, чтобыположение мыши отрегулировано ...

очевидно, теперь я помещаю его на реальный сайт, он не работает ...

Вы можете увидеть здесь http://jondavidjohn.com/projects/

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

РЕШЕНИЕ 

mouse_move: function(e)
{
    mousePos.x = e.offsetX;
    mousePos.y = e.offsetY;
},

Ответы [ 2 ]

4 голосов
/ 01 апреля 2012

COPIED FROM: http://simonsarris.com/blog/510-making-html5-canvas-useful

Получение координат мыши на Canvas

Получение хороших координат мыши немного сложно на Canvas.Вы можете использовать offsetX / Y и LayerX / Y, но LayerX / Y не рекомендуется использовать в веб-наборе (Chrome и Safari), а Firefox не имеет offsetX / Y.

Самый пуленепробиваемый способ получить правильную позицию мыши - этопоказано ниже.Вы должны идти вверх по дереву, складывая смещения вместе.Затем вы должны добавить любой отступ или границу к смещению.Наконец, чтобы исправить проблемы с координатами, когда у вас есть элементы с фиксированным положением на странице (например, админ-панель wordpress или панель stumbleupon), вы должны добавить значения offsetTop и offsetLeft.

Затем вы просто вычитаете это смещение иззначения e.pageX / Y, и вы получите идеальные координаты практически во всех возможных ситуациях. 

// Creates an object with x and y defined,
// set to the mouse position relative to the state's canvas
// If you wanna be super-correct this can be tricky,
// we have to worry about padding and borders
CanvasState.prototype.getMouse = function(e) {
  var element = this.canvas, offsetX = 0, offsetY = 0, mx, my;

  // Compute the total offset
  if (element.offsetParent !== undefined) {
    do {
      offsetX += element.offsetLeft;
      offsetY += element.offsetTop;
    } while ((element = element.offsetParent));
  }

  // Add padding and border style widths to offset
  // Also add the <html> offsets in case there's a position:fixed bar
  offsetX += this.stylePaddingLeft + this.styleBorderLeft + this.htmlLeft;
  offsetY += this.stylePaddingTop + this.styleBorderTop + this.htmlTop;

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

  // We return a simple javascript object (a hash) with x and y defined
  return {x: mx, y: my};
}
2 голосов
/ 27 августа 2011

Вместо этого используйте e.offsetX и e.offsetY.

На самом деле все усложняется, когда вы вводите некоторые другие вещи, такие как поля и отступы, но offsetX и offsetY будут гораздо более точными, чем вы, мягко говоря, говорите.

У меня сейчас нет моего нового кода мыши "пуленепробиваемые работы в любой ситуации", я могу получить его позже для вас, если вы думаете, что он вам понадобится.

редактировать: сумасшедший! Спасибо chopperdave за предоставленный код, который я забыл добавить!

...