Смещение сенсорного события HTML5 Canvas в Ipad или мобильном браузере Safari

Question

У меня проблема, я не смог выйти из Google, и это мой первый пост на stackoverlow.У меня есть два элемента холста, которые накладываются друг на друга, чтобы создать функцию скретчера типа лотереи на веб-сайте моей компании.Проблема в том, что на Ipad, если я прокручиваю страницу вниз хотя бы на один пиксель, сенсорные позиции отключены, равные высоте прокрутки.Я пробовал несколько разных маршрутов, чтобы попытаться исправить эту проблему, но безрезультатно.

Используемые библиотеки JS: Jquery1.6.4 и kinetic2d1.0.2 http://www.kineticjs.com/ для обнаружения событий касания на мобильном устройстве.

Я не очень много работал с Safari Mobile, так что я думаю,это какое-то свойство или метод для определения смещения, о котором я не знаю.

Я бы хотел JS-решение этой проблемы, но любой взлом, который доставит меня к финишу, побеждает.

Заранее спасибо.

Answer 1

У вас нет iPad для тестирования, но вы смотрели на jQuery Offset ? Вы можете использовать его, чтобы получить координаты элемента canvas относительно окна браузера, а затем компенсировать это в своих вычислениях следующим образом:

offset = $('#myCanvas').offset();
left = pageX - offset.left;
top = pageY - offset.top;

Answer 2

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

function touchMove_event(event){
    var canvas = document.getElementById("yourCanvas");
    var coors = {
      x: event.targetTouches[0].pageX - canvas.clientLeft,
      y: event.targetTouches[0].pageY- canvas.clientTop
    };
    touchHandler(coors);
}

затем передайте это любой функции, которая у вас есть в данный момент для обработки событий касания - используйтеordin.x иordin.y

Answer 3

Я обнаружил, что при загрузке холста в iframe проблема смещения стала немой.Так что независимо от свитка, ориентации, гравитации луны скребок работает.

Вы можете увидеть живую версию через Интернет, ipad или смартфон на Front Flip .Скачайте приложение тоже.Это качается!