HTML5 canvas touch panning/scrolling?

Question

Я работаю над своим первым проектом холста HTML5. Он представляет сетку, для простоты говорят, что размер 4x4. Он должен быть масштабируемым, так как время масштабирования не требуется, достаточно использовать кнопки увеличения/уменьшения масштаба. У меня он работает так, что первый зум удваивает видимый размер до 2x2, а следующий показывает область в 1 квадрат, для пользователя кажется, что центр сетки не перемещается во время масштабирования, дальнейшее масштабирование невозможно. Поэтому у меня есть scale() и translate() под контролем.

Первоначального вид

 
1 2 3 4 
5 6 7 8 
9 10 11 12 
13 14 15 16 

После первого увеличения

 

    6  7 

    10 11 

Я создал кнопки для перемещения видимого области фиксированного количества пикселей с использованием перевода(), так что в основном мне нужно только слушать, чтобы исправить сенсорное событие и сделать немного больше, не так ли? Но независимо от того, что я пытаюсь, я не могу понять, как это сделать, используя сенсорный экран (я разрабатываю Android). Я видел много примеров, включая хорошо известные http://phrogz.net/tmp/canvas_zoom_to_cursor.html

Я был бы признателен, если бы кто-нибудь мог указать мне в правильном направлении?

Кроме того, в настоящее время моя «прокрутка по шагу» может проходить через границы холста, что было бы правильным свойством контролировать, чтобы знать, что граница находится рядом?

Я использую чистый Javascript, jQuery используется для других частей проекта. Я бы предпочел придерживаться этих двух, это тоже учебный проект для меня. Но если ничего не работает, я могу включить другую библиотеку.

Answer 1

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

Во всяком случае, основная идея была бы это:

var touching; 
setInterval(function(){ 
    if (not user-touching-screen){ 
    touching=0; 
    } else { 
    if (touching == 0){ 
     touching = 1; 
     ix = where-user-put-finger-down-x-coord; // find x-coord of finger position 
     iy = where-user-put-finger-down-x-coord; // find y-coord of finger position 
    } else { 
     mx = where-finger-is-now-x;    // find x-coord of finger position 
     my = where-finger-is-now-y;    // find y-coord of finger position 
     translate(mx-ix,my-iy); /*translate entire canvas right mx-ix units, 
           *      left my-iy units 
           */ 
    } 
    } 
}, 5); 

Я предполагаю, что вы можете просто использовать мышь х/у репортеров, чтобы получить положение пальца пользователя.