From 517c0099ce72299ffb350423332a9fccf60a8ab3 Mon Sep 17 00:00:00 2001 From: Robert Kaiser Date: Fri, 16 Aug 2013 06:38:30 +0200 Subject: [PATCH] try supporting pinch zoom in a simple way --- js/map.js | 44 +++++++++++++++++++++++++++++++++++++++++++- manifest.appcache | 2 +- 2 files changed, 44 insertions(+), 2 deletions(-) diff --git a/js/map.js b/js/map.js index 3cc00c5..2ecd3a4 100644 --- a/js/map.js +++ b/js/map.js @@ -61,7 +61,7 @@ var gLoadingTile; var gMapPrefsLoaded = false; var gDragging = false; -var gDragTouchID; +var gDragTouchID, gPinchStartWidth; var gGeoWatchID; var gTrack = []; @@ -482,6 +482,14 @@ var mapEvHandler = { case "mousedown": case "touchstart": if (touchEvent) { + if (aEvent.targetTouches.length == 2) { + gPinchStartWidth = Math.sqrt( + Math.pow(aEvent.targetTouches.item(1).clientX - + aEvent.targetTouches.item(0).clientX, 2) + + Math.pow(aEvent.targetTouches.item(1).clientY - + aEvent.targetTouches.item(0).clientY, 2) + ); + } gDragTouchID = aEvent.changedTouches.item(0).identifier; coordObj = aEvent.changedTouches.identifiedTouch(gDragTouchID); } @@ -497,6 +505,40 @@ var mapEvHandler = { break; case "mousemove": case "touchmove": + if (touchEvent && aEvent.targetTouches.length == 2) { + curPinchStartWidth = Math.sqrt( + Math.pow(aEvent.targetTouches.item(1).clientX - + aEvent.targetTouches.item(0).clientX, 2) + + Math.pow(aEvent.targetTouches.item(1).clientY - + aEvent.targetTouches.item(0).clientY, 2) + ); + if (gPinchStartWidth / curPinchStartWidth > 1.7 || + gPinchStartWidth / curPinchStartWidth < 0.6) { + var newZoomLevel = gPos.z + (gPinchStartWidth < curPinchStartWidth ? 1 : -1); + if ((newZoomLevel >= 0) && (newZoomLevel <= gMaxZoom)) { + // Calculate new center of the map - preserve middle of pinch. + // This means that pixel distance between old center and middle + // must equal pixel distance of new center and middle. + var x = (aEvent.targetTouches.item(1).clientX + + aEvent.targetTouches.item(0).clientX) / 2 - + gMapCanvas.offsetLeft; + var y = (aEvent.targetTouches.item(1).clientY + + aEvent.targetTouches.item(0).clientY) / 2 - + gMapCanvas.offsetTop; + + // Zoom factor after this action. + var newZoomFactor = Math.pow(2, gMaxZoom - newZoomLevel); + gPos.x -= (x - gMapCanvas.width / 2) * (newZoomFactor - gZoomFactor); + gPos.y -= (y - gMapCanvas.height / 2) * (newZoomFactor - gZoomFactor); + + if (gPinchStartWidth < curPinchStartWidth) + zoomIn(); + else + zoomOut(); + } + } + break; + } var x = coordObj.clientX - gMapCanvas.offsetLeft; var y = coordObj.clientY - gMapCanvas.offsetTop; if (gDragging === true) { diff --git a/manifest.appcache b/manifest.appcache index cdbbc5a..ef33d92 100644 --- a/manifest.appcache +++ b/manifest.appcache @@ -1,6 +1,6 @@ CACHE MANIFEST -# 2013-07-07 +# 2013-08-15 manifest.webapp js/map.js js/ui.js -- 2.35.3