Merge pull request #47 from elemoine/pinchzoom

fix bug where center of fingers is not preserved on pinch zoom
openlayers · Nov 14, 2011 · 29256bd · 29256bd
2 parents b5d41fa + 629e14d
commit 29256bd
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 16 deletions.
diff --git a/lib/OpenLayers/Control/PinchZoom.js b/lib/OpenLayers/Control/PinchZoom.js
@@ -22,10 +22,10 @@ OpenLayers.Control.PinchZoom = OpenLayers.Class(OpenLayers.Control, {
     type: OpenLayers.Control.TYPE_TOOL,
 
     /**
-     * Property: containerOrigin
-     * {Object} Cached object representing the layer container origin (in pixels).
+     * Property: containerCenter
+     * {Object} Cached object representing the layer container center (in pixels).
      */
-    containerOrigin: null,
+    containerCenter: null,
 
     /**
      * Property: pinchOrigin
@@ -76,10 +76,10 @@ OpenLayers.Control.PinchZoom = OpenLayers.Class(OpenLayers.Control, {
         var activated = OpenLayers.Control.prototype.activate.apply(this,arguments);
         if (activated) {
             this.map.events.on({
-                moveend: this.updateContainerOrigin,
+                moveend: this.updateContainerCenter,
                 scope: this
             });
-            this.updateContainerOrigin();
+            this.updateContainerCenter();
         }
         return activated;
     },
@@ -95,22 +95,23 @@ OpenLayers.Control.PinchZoom = OpenLayers.Class(OpenLayers.Control, {
         var deactivated = OpenLayers.Control.prototype.deactivate.apply(this,arguments);
         if (this.map && this.map.events) {
             this.map.events.un({
-                moveend: this.updateContainerOrigin,
+                moveend: this.updateContainerCenter,
                 scope: this
             });
         }
         return deactivated;
     },
 
     /**
-     * Method: updateContainerOrigin
-     * Must be called each time the layer container origin changes.
+     * Method: updateContainerCenter
+     * Must be called each time the layer container moves.
      */
-    updateContainerOrigin: function() {
+    updateContainerCenter: function() {
         var container = this.map.layerContainerDiv;
-        this.containerOrigin = {
-            x: parseInt(container.style.left, 10),
-            y: parseInt(container.style.top, 10)
+        // the layer container div is a square of 100px/100px
+        this.containerCenter = {
+            x: parseInt(container.style.left, 10) + 50,
+            y: parseInt(container.style.top, 10) + 50
         };
     },
 
@@ -137,12 +138,12 @@ OpenLayers.Control.PinchZoom = OpenLayers.Class(OpenLayers.Control, {
      */
     pinchMove: function(evt, pinchData) {
         var scale = pinchData.scale;
-        var containerOrigin = this.containerOrigin;
+        var containerCenter = this.containerCenter;
         var pinchOrigin = this.pinchOrigin;
         var current = evt.xy;
 
-        var dx = Math.round((current.x - pinchOrigin.x) + (scale - 1) * (containerOrigin.x - pinchOrigin.x));
-        var dy = Math.round((current.y - pinchOrigin.y) + (scale - 1) * (containerOrigin.y - pinchOrigin.y));
+        var dx = Math.round((current.x - pinchOrigin.x) + (scale - 1) * (containerCenter.x - pinchOrigin.x));
+        var dy = Math.round((current.y - pinchOrigin.y) + (scale - 1) * (containerCenter.y - pinchOrigin.y));
 
         this.applyTransform(
             "translate(" + dx + "px, " + dy + "px) scale(" + scale + ")"

diff --git a/tests/Control/PinchZoom.html b/tests/Control/PinchZoom.html
@@ -49,7 +49,7 @@
             log.push(transform);
         }
 
-        control.containerOrigin = {
+        control.containerCenter = {
             x: 0, y: 0
         };