Неправильные смещения событий касания для прокручиваемой страницы в iOS и Android - PullRequest
Новая
       2

Неправильные смещения событий касания для прокручиваемой страницы в iOS и Android

2 голосов
/ 08 марта 2012

У нас есть веб-страница, которая содержит несколько тегов div / canvas, позволяющих пользователю рисовать: 

 <div id="Drawing" class="FormField" style="position: absolute; top: 444px; left: 121px;
      width: 302px; height: 185px; font-size: 10pt;">
      <canvas id="DrawingCanvas" class="InkFormField" width="302" height="185" style=""></canvas>
 </div>
 <div id="Picture" class="FormField" style="position: absolute; top: 915px; left: 121px;
      width: 302px; height: 167px; font-size: 10pt;">
      <canvas id="PictureCanvas" class="InkFormField" width="302" height="167" style=""></canvas>
 </div>

Второй div / canvas (с верхом: 915px) изначально не виден, но его можно прокрутить и подписать.

Рисунок довольно простой код, который корректно работает для настольных браузеров (с использованием соответствующих событий мыши). Для iPad нам нужно использовать сенсорные события, чтобы определить точки для рисования: 

        var touchX = e.changedTouches[0].screenX - canvasLeft;
        var touchY = e.changedTouches[0].screenY - canvasTop;

(где canvasLeft и canvasTop - относительные смещения страницы к холсту).

Все работает правильно, даже после прокрутки до второго div / canvas.

Однако после добавления внешнего кода к вышеуказанному коду (с переполнением: авто ) значения touchX и touchY перестают быть правильными после прокрутки div 

  <div style="overflow: auto">
     <div id="Drawing" class="FormField" style="position: absolute; top: 444px; left: 121px;
          width: 302px; height: 185px; font-size: 10pt;">
          <canvas id="DrawingCanvas" class="InkFormField" width="302" height="185" style=""></canvas>
     </div>
     <div id="Picture" class="FormField" style="position: absolute; top: 915px; left: 121px;
          width: 302px; height: 167px; font-size: 10pt;">
          <canvas id="PictureCanvas" class="InkFormField" width="302" height="167" style=""></canvas>
     </div>
  </div>

На самом деле они, похоже, отключены именно на эту сумму! Согласно документации, свойство screenY должно учитывать прокрутку (но, возможно, это относится к прокрутке страницы, а не к прокрутке внешнего div).

Есть ли другое свойство события касания, которое сообщает о смещениях x и y относительно прокрученного div , так что точки могут быть нарисованы правильно?

В качестве альтернативы, есть ли способ отслеживать количество прокрутки , чтобы можно было применить соответствующее смещение к вычислениям touchX и touchY?

1 Ответ

0 голосов
/ 08 марта 2012

Вот мой код мыши / касания.Попробуйте.Это должно работать для вас:

С сенсорными событиями вы можете сделать что-то вроде: '

if (e.targetTouches) e = e.targetTouches[0];

перед вызовом. 

function getMouse(e, canvas) {
  var element = 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 += _stylePaddingLeft + _styleBorderLeft + _htmlLeft;
  offsetY += _stylePaddingTop + _styleBorderTop + _htmlTop;

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

  return {x: mx, y: my};
}

Эти смещения следующиепри условии, что ваш холст называется «холст»: 

_stylePaddingLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingLeft'], 10)      || 0;
_stylePaddingTop  = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingTop'], 10)       || 0;
_styleBorderLeft  = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderLeftWidth'], 10)  || 0;
_styleBorderTop   = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderTopWidth'], 10)   || 0;
// <html> can have a margin (typically seen with position:fixed bars)
var html = document.body.parentNode;
_htmlTop = html.offsetTop;
_htmlLeft = html.offsetLeft;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...