I'm trying to handle the translation and scaling of a canvas through gestures, so far I've only been able to implement the translation because of the following: I've noticed that when I use two fingers or more , the event's trigger frequency (in In this case touchmove ) decreases considerably , but it only happens if the distance between the positions of the touches varies , that is, if I put two fingers on the screen and both move them the same (keeping the same distance between the fingers ) the event is fired correctly, but on the other hand, if at the same time that I move my fingers, I join them and move them away , that is when thatvariation in the trigger frequency of the event , the code is as follows:
(function( d ) {
var evts = {
start: 'touchstart',
move: 'touchmove',
end: 'touchend'
};
var old = {
tchs: [],
trans: {
x: 0,
y: 0
}
};
var tchs = [];
function start( e ) {
tchs = [];
old.tchs = e.touches;
old.trans.x = DRAWER.trans.x;
old.trans.y = DRAWER.trans.y;
}
var tOld; //esto lo estoy usando para comprobar
//el tiempo que tarda en dispararse cada evento "touchmove"
function move( e ) {
let tNow = Date.now();
console.log( tNow - tOld );
tchs = e.touches;
tOld = tNow;
}
function renderTchs() { //gestionar los toques
if (tchs.length == 1) {
let tx = old.trans.x + (tchs[0].clientX - old.tchs[0].clientX);
let ty = old.trans.y + (tchs[0].clientY - old.tchs[0].clientY);
DRAWER.setTrans( tx, ty );
}
//aquí trabajaría también la escala,
//pero al usar dos dedos me ocurre el retardo
//y antes de implementarlo quiero saber por qué ocurre
window.requestAnimationFrame( renderTchs );
}
renderTchs();
d.body.addEventListener(evts.start,( e ) => {
tOld = Date.now();
start( e );
},false);
d.body.addEventListener(evts.move,move,false);
//d.body.addEventListener(evts.end,end,false);
d.body.addEventListener('touchmove',( e ) => {
e.preventDefault();
});
})( document );
As shown in the console the event starts firing every 200ms or so, that's excessive and causes the supposed scaling (not yet implemented) to occur in fits and starts .
In <head>the page I have set this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
And from CSS these lines:
html, body {
position: absolute;
background: #333;
overflow: hidden; /* Evitar recargar la página deslizando hacia abajo en Android Chrome */
}
canvas {
position: fixed;
top: 0;
left: 0;
}
I hope I have expressed myself clearly enough, if someone could clarify what is happening I would appreciate it.
