0

Mouse wheel-zooming effect in svg - how to zoom to the center point of the work area , and how to stop the zoom level when it reaches the minimum and maximum zoom level. Where to set this min and max zoom values ?

Below is my code, I had reset the zoom level in the zoomChangedfunction of svgedit.compiled.js

           if (zoomlevel < 0.4) {                   
                 //changeZoom({value: 0.4});
                 var zoomlevel = 0.4;
                return;
            }

             if (zoomlevel > 9.5) {                 
                // changeZoom({value: 9.5});    
                var zoomlevel = 9.5;                    
                return;
            }

and in ext-grid.js i had place the below code 

zoomChanged: function(zoom) {
        if (showGrid)
        {           
            if(zoom > 0.4 & zoom < 9.5)
            {
                updateGrid(zoom);
            }           
        }
    },

When the mouse wheel is scrolled and when it reaches 0.4 or 9.5 the grid stop scaling but the zooming level still changes, and it zooms to the point where mouse is placed.

I need the work area should be zoomed to the center wherever the mouse is placed, and when it reaches minimum 0.4 or maximum 9.5 zooming should be stopped.

Can any one guide me, where have i had gone wrong?

Roobena
  • 259
  • 4
  • 15

2 Answers2

2

In the svg-editor.js file there is this function:

var zoomChanged = svgCanvas.zoomChanged = function(win, bbox, autoCenter)

If you set the autoCenter variable to true you can impose to zoom to the center of the working area. So:

var zoomChanged = svgCanvas.zoomChanged = function(win, bbox, autoCenter) {
    autoCenter = true;
    var scrbar = 15,
    ....

To limit the zoom level, open svgcanvas.js and search for:

this.setZoom = function(zoomlevel)

Here you can set the min/max zoom level. For example, if you want to allow the 100% as minimum and a maximum of 400% you can write:

this.setZoom = function(zoomlevel) {
    if (zoomlevel<1) zoomlevel=1;
    if (zoomlevel>4) zoomlevel=4;
...
Mauro Mascia
  • 401
  • 5
  • 15
1

Notice that you are using Local Variable

 if (zoomlevel < 0.4) {                   
     //changeZoom({value: 0.4});
     var zoomlevel = 0.4;
     return;
 }

correct var zoomlevel = 0.4; to zoomlevel = 0.4;

then it may work

James Jou
  • 271
  • 1
  • 3
  • maybe the value zoomlevel doesn't really control to your zooming. How do you use zoomlevel for zooming? scale of css? – James Jou Jul 07 '14 at 13:24