I've attached a very simple implementation of pinch-to-zoom. It's the most basic implementation I could think up.
Firstly, I added a change to the body CSS. Safari on iOS doesn't respect the viewport meta tag's scalable attribute, so it still pans and zooms the whole page when you do any touch interaction. When panning, this is a mild distraction. When zooming, it's a real problem.
Adding "touch-action: none;" fixes that:
body { font-size: 5mm ; color:red ; font-family: sans; background-color:black; touch-action: none; }
Then I hooked into the manualDown and manualMove functions and checked if there were two fingers being used. If so, I assume they're pinching and call through to two new zoomStart and zoomMove functions instead of the standard operations.
function manualDown(e)
{
if (e.touches.length == 2)
{
zoomStart(e);
return;
}
...
function manualMove(e)
{
if (e.touches.length == 2)
{
zoomMove(e);
return;
}
...
var global_scaling = false;
var global_dist1 = 0;
The first of these functions just saves the state ("we're scaling now"), and logs the initial distance between the fingers.
function zoomStart(e)
{
global_scaling = true;
global_dist1 = Math.hypot(
e.touches[0].pageX - e.touches[1].pageX,
e.touches[0].pageY - e.touches[1].pageY);
}
The second of these functions, called when a finger has moved, looks to see if we're scaling, and if so, it checks whether the distance between the fingers has increased or decreased, and adjusts the FOV accordingly.
function zoomMove(e)
{
if (global_scaling)
{
global_scaling = false;
var dist2 = Math.hypot(
e.touches[0].pageX - e.touches[1].pageX,
e.touches[0].pageY - e.touches[1].pageY);
if (dist2 < global_dist1)
{
incFOV();
}
if (dist2 > global_dist1)
{
decFOV();
}
}
}
I checked it on a couple of devices here, and it works as intended. Hopefully without breaking much!
I've attached the patch as a diff against the current skyhopper.py from master. You can just patch with patch skyhopper.py < skyhopper.diff.
Edited by AaronH, 09 September 2021 - 07:06 PM.
