HTML 5 Canvas Co-Ordinates и корреляция пикселей браузера?

Я пытаюсь получить холст HTML 5 для работы моего приложения в качестве доски для рисования. Проблема, с которой я столкнулся:

Рисование происходит с некоторым смещением относительно указателя мыши. Я использую метод JQuery .offset для вычисления смещения события на холсте. Еще одна странная вещь, которую я заметил, это то, что хотя ширина тега холста составляет 150 пикселей, линия, проведенная от (0,10) до (150,10), достигает середины области холста и даже линии как big as (0,10) - (250,10) также отображается. Разве «пиксели» не вычисляются из карты объекта события непосредственно в «координатах точки» тега Canvas? Что еще здесь может быть не так? Образец кода:

 if (event.pageX || event.pageY)
 {
    event._x = event.pageX;
    event._y = event.pageY;
}
else if (event.clientX || event.clientY)
{
    event._x = event.clientX + document.body.scrollLeft
                            + document.documentElement.scrollLeft;
    event._y = event.clientY + document.body.scrollTop
                            + document.documentElement.scrollTop;
}

var canvasElem = $('#' + canvasId);
canvasOffset = canvasElem.offset();

event._x -= Math.floor(canvasOffset.left);
event._y -= Math.floor(canvasOffset.top);

////////////// CODE STRIPPED //////////////////////////////


  this.mousedown = function (ev) { 
       context.beginPath(); 
       context.moveTo(ev._x, ev._y); 
       tool.started = true; 
  }; 

  // This function is called every time you move the mouse. Obviously, it only  
  // draws if the tool.started state is set to true (when you are holding down  
  // the mouse button). 
 this.mousemove = function (ev) { 
      if (tool.started) { 
         context.lineTo(ev._x, ev._y); 
         context.stroke(); 
       } 
 }; 

// This is called when you release the mouse button. 
this.mouseup = function (ev) { 
      if (tool.started) { 
         tool.mousemove(ev); 
         tool.started = false; 
      }
}

Решено

Нашел проблему:

Я использовал строку, чтобы установить высоту и ширину холста. Что-то вроде: canvas.height = "200px";

Но лучше мы всегда должны использовать числа, чтобы установить высоту / ширину для холста, например. canvas.height = 200;

Это решает проблему.


javascript html jquery dom-events html5-canvas
person user1989521    schedule 18.01.2013    source источник
comment
Не могли бы вы привести пример в jsFiddle?   -  person mornaner    schedule 18.01.2013

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете получить координаты левого верхнего угла холста с помощью jQuery .offset () функция. Вычтите их из координат, предоставленных событием мыши, и вы получите позицию на холсте.

Что касается проблем с масштабированием, с которыми вы сталкиваетесь, есть два возможных объяснения:

A: вы используете переводить, трансформировать или масштабировать, чтобы изменить систему координат холста (но когда вы это сделаете, вы обязательно об этом узнаете)

B: вы используете свойства стиля CSS, чтобы изменить размер холста. Разрешение холста определяется свойствами width и height HTML-тега <canvas>. Когда вы используете CSS для изменения ширины или высоты, с которой отображается холст, он сначала рисуется во внутреннем разрешении, а затем соответствующим образом масштабируется для отображения в браузере.

person Philipp    schedule 18.01.2013
comment
Сэкономил мне время на написание объяснений. +1 - person Ben; 18.01.2013
comment
@philipp Я использую точный механизм, как вы упомянули. Но здесь в моем коде не встречаются ни A, ни B, может быть какая-то другая причина? Я бы опубликовал весь код, но поскольку это общее решение для холста, которое я пишу, код составляет ›500 строк. Сообщите мне, если я могу предоставить какую-либо другую информацию, которая может помочь сузить проблему. Спасибо большое за вашу помощь. - person user1989521; 22.01.2013
comment
@ user1989521 Может быть много других причин, но, не глядя на ваш код, я думаю, что не хуже ваших. Попытайтесь сузить количество ошибок, сократив код до минимума, который все еще выполняется и показывает ошибку. Велика вероятность, что вы сами обнаружите ошибку во время этого процесса. Если вы все еще не уверены, что пошло не так, опубликуйте свернутый пример на jsfiddle.net и дайте нам ссылку. - person Philipp; 22.01.2013
comment
@Philipp Большое спасибо за вашу помощь. Вы подтолкнули меня к решению. Я использовал строку для установки высоты, но прочитал спецификацию Canvas, в которой явно упоминается, что мне следовало использовать число вместо строки :). Большое спасибо. - person user1989521; 25.01.2013