моделирование поведения прокрутки в HTML5 canvas с сенсорными событиями - PullRequest
Новая
       27

моделирование поведения прокрутки в HTML5 canvas с сенсорными событиями

0 голосов
/ 10 февраля 2020

У меня есть анимация в HTML5 Canvas, которая имитирует прокрутку, когда пользователь щелкает и перетаскивает. Он движется вертикально, когда экран вертикальный, и горизонтально, когда горизонтальный. 


this.scroll = function(e) {
    // scroll behavior for canvas
    // feed x movements into horizontal (true) comic, y movments into (false) vertical
    // this number is zero or less, hence added to displacements
    comic.readShift += (comic.orientation ? e.movementX : e.movementY);
    // ... other code here
    comic.drawPanels();
};

Слушатели подключают это: 


    canvas.addEventListener("mousedown", function(e) {
        canvas.addEventListener("mousemove", comic.scroll);
    });

    canvas.addEventListener("mouseup", function(e) {
        canvas.removeEventListener("mousemove", comic.scroll);
    });

    canvas.addEventListener("mouseleave", function(e) {
        canvas.removeEventListener("mousemove", comic.scroll);
    });

Это работает , насколько я могу расскажите, на настольных браузерах. Но сейчас я пытаюсь заставить его работать на мобильном телефоне. Не имея эквивалента movement[X|Y] для событий касания, я попробовал это для поведения прокрутки ... 


this.drag = function(e) {
    // scroll behavior on touch screen
    var touch = e.changedTouches[0];
    var movementX = comic.touchstart.screenX - touch.screenX;
    var movementY = comic.touchstart.screenY - touch.screenY;
    // decrement in this case
    comic.readShift -= (comic.orientation ? movementX : movementY);
    // ... other code here
    comic.drawPanels();
};

comic.touchstart записывается слушателем touchstart: 

    canvas.addEventListener("touchstart", function(e) {
        comic.touchstart = e.changedTouches[0];
        canvas.addEventListener("touchmove", comic.drag);
    });

    canvas.addEventListener("touchend", function(e) {
        canvas.removeEventListener("touchmove", comic.drag);
    });

    canvas.addEventListener("touchcancel", function(e) {
        canvas.removeEventListener("touchmove", comic.drag);
    });

Что не очень хорошо. Он будет работать, если пользователь проводит очень медленно, но обычное перелистывание вызывает странное ускорение эффекта прокрутки и, в конце концов, мешает странице. Имеют ли Touch события movementX и movementY эквивалентов? Если нет, как правильно это настроить?

...