Рисование указателя (координат мыши) для холста HTML5 - PullRequest
Новая
       4

Рисование указателя (координат мыши) для холста HTML5

0 голосов
/ 24 ноября 2011

У меня проблемы с координатами мыши, когда рисует на холсте HTML5. Я использую JavaScript для рисования @ canvas.

Вот мой текущий код расположения указателя мыши внутри холста: 

$('#canvasID').mousedown(function(e) {   
    // Mouse down location
    var mouseX = e.pageX - this.offsetLeft;   
    var mouseY = e.pageY -
    this.offsetTop;
});

Конечно, на моих страницах много включений, как, например, заголовок и поле .

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

Ответы [ 2 ]

1 голос
/ 24 ноября 2011

Это должно всегда возвращать правильное место на холсте. 

$("#canvasID").mouseup(function(e) {
  var offset = $(this).offset();
  var mouseX = e.pageX - offset.left;
  var mouseY = e.pageY - offset.top;
});
0 голосов
/ 11 марта 2012

Правильно, поехали: https://stackoverflow.com/a/4430498/126584
event.offsetX / Y не поддерживаются в firefox>. <</p>

Внутри $('#canvasID').mousedown(function(e) { e.offsetX и e.offsetY должны иметькоординаты относительно верхнего левого угла холста.Для быстрого и грязного способа увидеть все в e (vent), поместите содержимое в <div id='debug'> с 

$('#canvasID').mousedown(function(e) {
    debug(dump(e));
});

// debug (msg)
function debug (msg) {
    $('#debug').prepend(msg+'<br>\n');
}

// dump(ob)
function dump(ob) {
  var out;
  out = 'Properties:<br>\n';
  for (prop in ob) {
    out = out + prop + ': ' + ob[prop] + '<br>\n';
  }
  return out;
}

Длинным и поздним ответом, только что нашел это, как я сейчас играю с canvas:-) Надеюсь, это кому-то еще поможет.

...