Simpler zoom steps, should help with pinch zoom. Fixes #33.

ivmartel · Sep 3, 2013 · f97a182 · f97a182
1 parent dca3f12
commit f97a182
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 17 deletions.
diff --git a/src/html/layer.js b/src/html/layer.js
@@ -30,17 +30,28 @@ dwv.html.Layer = function(name)
     var originY = 0;
     var width = 0;
     var height = 0;
+    var oldZoomX = 1;
+    var oldZoomY = 1;
 
     // set the zoom
-    this.setZoom = function(zx,zy,cx,cy)
+    this.setZoom = function(stepX,stepY,centerX,centerY)
     {
+        var zoomX = oldZoomX + stepX;
+        var zoomY = oldZoomY + stepY;
+        // check zoom value
+        if( zoomX <= 0.1 || zoomX >= 10 ||
+            zoomY <= 0.1 || zoomY >= 10 ) return;
         // The zoom is the ratio between the differences from the center
         // to the origins:
-        originX = cx - ((cx - originX) * zx);
-        originY = cy - ((cy - originY) * zy);
+        // centerX - originX = ( centerX - originX0 ) * zoomX
+        originX = centerX - (centerX - originX) * (zoomX / oldZoomX);
+        originY = centerY - (centerY - originY) * (zoomY / oldZoomY);
+        // save zoom
+        oldZoomX = zoomX;
+        oldZoomY = zoomY;
         // calculate new width/height
-        width *= zx;
-        height *= zy;
+        width = canvas.width * zoomX;
+        height = canvas.height * zoomY;
         // draw 
         this.draw();
     };
@@ -84,6 +95,8 @@ dwv.html.Layer = function(name)
     {
         originX = 0;
         originY = 0;
+        oldZoomX = 1;
+        oldZoomY = 1;
         width = canvas.width;
         height = canvas.height;
     };

diff --git a/src/tools/zoom.js b/src/tools/zoom.js
@@ -21,8 +21,6 @@ dwv.tool.Zoom = function(app)
 {
     var self = this;
     this.started = false;
-    this.zoomX = 1;
-    this.zoomY = 1;
 
     // This is called when you start holding down the mouse button.
     this.mousedown = function(ev){
@@ -68,10 +66,11 @@ dwv.tool.Zoom = function(app)
        var point0 = new dwv.math.Point2D(ev._x, ev._y);
        var point1 = new dwv.math.Point2D(ev._x1, ev._y1);
        var newLine = new dwv.math.Line(point0, point1);
-       var lineDiff = ( newLine.getLength() - self.line0.getLength() ) / 1000;
+       var lineRatio = newLine.getLength() / self.line0.getLength();
 
-       if( lineDiff !== 0 )
-           zoom(lineDiff, self.midPoint.getX(), self.midPoint.getY());
+       var zoom = (lineRatio - 1) / 2;
+       if( Math.abs(zoom) % 0.1 <= 0.05 )
+           zoomLayers(zoom, self.midPoint.getX(), self.midPoint.getY());
     };
 
     // This is called when you release the mouse button.
@@ -112,13 +111,15 @@ dwv.tool.Zoom = function(app)
     // This is called when you use the mouse wheel on Firefox.
     this.DOMMouseScroll = function(ev){
         // ev.detail on firefox is 3
-        zoom(ev.detail/30, ev._x, ev._y);
+        var step = ev.detail/30;
+        zoomLayers(step, ev._x, ev._y);
     };
 
     // This is called when you use the mouse wheel.
     this.mousewheel = function(ev){
         // ev.wheelDelta on chrome is 120
-        zoom(ev.wheelDelta/1200, ev._x, ev._y);
+        var step = ev.wheelDelta/1200;
+        zoomLayers(step, ev._x, ev._y);
     };
 
     // Enable method.
@@ -138,12 +139,10 @@ dwv.tool.Zoom = function(app)
 
     // Really do the zoom
     // A good step is of 0.1.
-    function zoom(step, cx, cy)
+    function zoomLayers(step, cx, cy)
     {
-        var zoomLevel = 1 + step;
-        // apply zoom
-        app.setLayersZoom(zoomLevel,zoomLevel,cx,cy);
-     }
+        app.setLayersZoom(step,step,cx,cy);
+    }
 
 }; // Zoom class