The pinch/zoom example on MDN using PointerEvents looks easy enough, yet looking a bit closer, I wonder about the following.
If two touching fingers are moved simultaneously with fixed distance, I assume the browser will generate interleaved pointer events for two different PointerEvent.pointerId values. When the software sequentially processes these events it looks as if the distance keeps flipping between two or three values, depending on how the events are delivered.
For example the x coordinates for the two pointers a and b could follow a sequence like a=0, b=100 for pointerdown and then pointermove events with a=3, b=103, b=106, a=6. If I compute the delta for each pointer move event, I get 97, 100, 103, 100 despite the user probably moving two fingers in parallel.
How is this done right? Do I need a minimal hold-off, like 10ms, for pointer events and batch them up before processing? Do I need a hysteresis of some kind?
This might be saner with touch events (didn't try), though I would really be interested in solutions based on pointer events. And I am interested in a plain Javascript algorithmic solution, though a pointer to a library that does it right accompanied by the gist of the solution would also be OK.
