zoom Method


Zooms or changes the size mode of the view.


JavaScript Syntax
ImageViewer.prototype.zoom = function(sizeMode, zoomValue, origin) 
TypeScript Syntax
zoom(sizeMode: ControlSizeMode, zoomValue: number, origin: LeadPointD): void; 



The size mode to use.


The desired zoom value. This must be a value greater than 0. A value of 1.0 equals 100 percent zoom, a value of 0.5 equals to 50 percent, a value of 1.5 equals 150 percent zoom and so on.

The value must be greater than or equal to the current MinimumScaleFactor value and less than or equal to the current MaximumScaleFactor value.


The origin of the zoom operation.


The "view" size is calculated by UpdateTransform and stored in ViewSize. It is controlled by the current ViewLayout as follows:

View layout Description
ImageViewerSingleViewLayout The view size is the size of the current ActiveItem, a fit page operation will fit the active item inside the viewer, a fit width operation will fit the width of the active item inside the viewer and so on.
ImageViewerVerticalViewLayout The view size is dependant on the value of Columns, for example, if the column count is 0, then the view layout will try to fit as much items in the viewer horizontally as possible before moving to the next row. If the column count is any other number, then the view will fill the columns with that exact number of items before moving to the next row. The width of the view is maximum total width of the items in any column, the height of the view is the total height of all the rows.
ImageViewerHorizontalViewLayout The view size is dependant on the value of Rows, for example, if the row count is 0, then the view layout will try to fit as much items in the viewer vertically as possible before moving to the next row. If the column count is any other number, then the view will fill the rows with that exact number of items before moving to the next column. The height of the view is maximum total height of the items in any row, the width of the view is the total width of all the columns.

The following factors affect the current zoom value of the view:

  • The size mode (SizeMode), (whether it is none, fit, fit width, fit height or stretch).

  • The current scale factor (ScaleFactor). A value of 1 means no scaling 100 percent), a value of 0.5 means 50 percent, 1.5 means 150 percent, 2 means 200 percent and so forth

  • The aspect ratio correction (AspectRatioCorrection). Use this value to manually stretch the view vertically.

A combination of the above will result in an actual x and y zoom value (they will be different if the size mode is ControlSizeMode.Stretch for example). These values can always be obtained by reading the value of the read-only XScaleFactor and YScaleFactor. If stretch size mode is not used in your application, then Use ScaleFactor which is a helper property that returns the maximum of x, y scale factors (which are equal in all cases but stretch).

For example, to fit the view in the current viewer area, use the following: sizeMode = ControlSizeMode.Fit and zoomValue = 1. The viewer might zoom the view out to make it fit if the size is greater than the control size. Hence, the actual scale factor (will be stored in ScaleFactor after the method returns ) is not 1, but a value less than 1. Since the viewer has to zoom the total image out.


To zoom the viewer in and out, obtain the current scale factor and multiply it by the increment or decrement value. For example, to zoom the viewer in by 200% (makes it twice as big), use:

// Multiply the current scale factor by two 
viewer.Zoom(ControlSizeMode.None, viewer.ScaleFactor * 2.0, viewer.DefaultZoomOrigin); 

The following zooms the viewer out by 50% (makes it half as big)

// Multiply the current scale factor by half 
viewer.Zoom(ControlSizeMode.None, viewer.ScaleFactor * 0.5, viewer.DefaultZoomOrigin); 

To zoom the viewer in by 50% (makes it one and half times bigger), use:

// Multiply the current scale factor by one and a half 
viewer.Zoom(ControlSizeMode.None, viewer.ScaleFactor * 1.5, viewer.DefaultZoomOrigin); 

And to zoom the viewer out by 25% (make it quarter of the size)

// Multiply the current scale factor by quarter 
viewer.Zoom(ControlSizeMode.None, viewer.ScaleFactor * 0.25, viewer.DefaultZoomOrigin); 

You can also use a different size mode. For example, to fit the whole view into the current viewer use:

viewer.Zoom(ControlSizeMode.Fit, 1.0, viewer.DefaultZoomOrigin);

As you can see, we passed 1.0 (or 100%) as the scale factor because the viewer will calculate the actual scaling values needed to perform "Fit". Similarly the following will fit the view width to take the whole viewer horizontal space while maintaining the aspect ratio:

viewer.Zoom(ControlSizeMode.FitWidth, 1.0, viewer.DefaultZoomOrigin);

All the ControlSizeMode's support fitting to the desired size and then applying a zoom, so:

viewer.Zoom(ControlSizeMode.Fit, 2.0, viewer.DefaultZoomOrigin);

Will fit the view into the available viewer space and then zooms it by 2.

All the size modes listed above maintain the aspect ratio of the view. And hence, the values of XScaleFactor and YScaleFactor will be the same. However, when you want to fit the view into the control area extending to fill each direction, you use:

viewer.Zoom(ControlSizeMode.Stretch, 1.0, viewer.DefaultZoomOrigin);

And this will almost always result in different values for XScaleFactor and YScaleFactor.

zoomValue must be a value between MinimumScaleFactor and MaximumScaleFactor. The default values can be changed to support smaller or larger legal scale factor values. However, since Zoom is called by other parts of the framework (for example, the ImageViewerPanZoomInteractiveMode), a default cut-off value is needed so the viewer does not zoom outside user-controlled values. Passing a zoomValue value outside the minimum and maximum range will have no affect and will be ignored.

Anytime you change ScaleFactor or SizeMode by calling Zoom, the control will re-calculate the transformation matrices and view layout required to place and render the view and items as requested on the viewer by internally calling UpdateTransform. The view transformation matrix will be stored in ViewTransform while the matrices for the items and their images can be updated using GetItemTransform or GetItemImageTransform.

The value of sizeMode will be stored in by the viewer internally (in SizeMode) and the viewer will automatically re-calculates the desired view size when the size of the viewer changes.

Generally, you might use the ImageViewer control to display images in two ways:

  • An application that sets the size mode to a value and leave it, such as ControlSizeMode.None, ControlSizeMode.Fit or ControlSizeMode.Stretch. An example of this would be an application that displays thumbnails or a static image. In other words, the application will not have zoom in/out functionality for the viewer.

  • An application that requires zooming as well as optionally changing the size mode. An example of this would be a document viewer application.

For the first types of applications, call Zoom once with the desired size mode and a zoom value of 1.0. The size mode is stored by the viewer and will be applied whenever the viewer control size changes. For the second type of applications, call Zoom as many times as desired with the necessary information. These application typically has a zoom in/out button as well as optionally a way to set the size mode. As well as taking care of the update issue, the Zoom method also allows you to specify the zoom operation origin. The DefaultZoomOrigin can be used for most cases. This is defined by the values of ViewHorizontalAlignment and ViewVerticalAlignment. For example, when ViewHorizontalAlignment is ControlAlignment.Near, the X value of the zoom origin is the left edge of the view. With ControlAlignment.Center it is at the center of the view width. Finally with ControlAlignment.Near it is at the right edge of the view. The zoom origin works similarly with ViewVerticalAlignment and using the view top, middle and bottom edges. The ImageViewerPanZoomInteractiveMode and ImageViewerZoomAtInteractiveMode modes use this method to perform their actions. For more information refer to Image Viewer Appearance, Image Viewer Transformation, Image Viewer Bounds and Transform, Image Viewer Layouts and Image Viewer Rendering.


This example will implement a zoom operation similar to popular document viewers such as Adobe Acrobat Reader.

JavaScript Example
var myImageViewer = this._imageViewer; 
// Ratio to use when the user zooms in or out. Change this if another value is needed, 
// for example, 2.0 will zoom the viewer in by 200% and out by 50% each time 
var _zoomRatio = 1.2; 
var updateZoomValueFromView = function () { 
   // Get the current scale factor from the viewer and set it in the zoom combo box 
   var percentage = myImageViewer.scaleFactor * 100.0; 
   var zoomComboBox = document.getElementById("zoomComboBox"); 
   zoomComboBox.selectedItem = percentage + "%"; 
var initZoom = function (zoomComboBox, zoomInButton, zoomOutButton) { 
   // Add support for user typing the zoom value in the combo box directly 
   zoomComboBox.onfocusout = function () { 
      // When the user moves away from the combo box, make sure it has a valid value 
   zoomComboBox.onkeydown = function (e) { 
      // Check if the finished editing by pressing Enter 
      if (e.keyCode == 13) { 
         // Yes, get the new value 
         var value = zoomComboBox.textContent.trim(); 
         if (value != null && value.length > 0) { 
            // Remove the % sign if present 
            if (value.endsWith("%")) 
               value = value.remove(value.length - 1, 1).Trim(); 
            // Try to parse the new zoom value 
            var percentage = value; 
            //if (double.TryParse(value, out percentage)) { 
            if (percentage != undefined) 
               // Valid value, zoom the viewer 
               myImageViewer.zoom(lt.Controls.ControlSizeMode.none, percentage / 100.0, myImageViewer.defaultZoomOrigin); 
         // And update the combo box from this value (in case we set a value not in the min/max range) 
   zoomComboBox.addEventListener("change", function () { 
      // Get the value from the combo box 
      var value = zoomComboBox.value.trim(); 
      switch (value) { 
         case "Actual Size": 
            myImageViewer.zoom(lt.Controls.ControlSizeMode.actualSize, 1, myImageViewer.defaultZoomOrigin); 
         case "Fit Page": 
            myImageViewer.zoom(lt.Controls.ControlSizeMode.fitAlways, 1, myImageViewer.defaultZoomOrigin); 
         case "Fit Width": 
            myImageViewer.zoom(lt.Controls.ControlSizeMode.fitWidth, 1, myImageViewer.defaultZoomOrigin); 
         case "Fit Height": 
            myImageViewer.zoom(lt.Controls.ControlSizeMode.fitHeight, 1, myImageViewer.defaultZoomOrigin); 
            if (value != null && value.length > 0) { 
               // A percentage, use it 
               var percentage = value.substring(0, value.length - 1); 
               myImageViewer.zoom(lt.Controls.ControlSizeMode.none, percentage / 100.0, myImageViewer.defaultZoomOrigin); 
   // For zoom in button, use current ScaleFactor multiplied by the ratio 
   zoomInButton.addEventListener("click", function () { 
      myImageViewer.zoom(lt.Controls.ControlSizeMode.none, myImageViewer.scaleFactor * _zoomRatio, myImageViewer.defaultZoomOrigin); 
   // For zoom out button, use current ScaleFactor divided by the ratio 
   zoomOutButton.addEventListener("click", function () { 
      myImageViewer.zoom(lt.Controls.ControlSizeMode.none, myImageViewer.scaleFactor / _zoomRatio, myImageViewer.defaultZoomOrigin); 
   // Also update the value from the viewer when the transform changed, this happens if the user selects a fit mode, 
   // such as fit width or fit page. The viewer will change the scale factor accordingly and we need to update it 
   // in our combo box 
   // This also takes care of Pan/Zoom interactive mode updating the scale fatcor 
   myImageViewer.transformChanged.add(function (sender, e) { 
   // Get the value from the viewer into the combo box 
// Create a panel to the top 
var panel = document.createElement("div"); 
panel.style.width = "800"; 
panel.style.height = "800"; 
// Add a combo box for the zoom values 
var zoomComboBox = document.createElement("select"); 
zoomComboBox.id = "zoomComboBox"; 
zoomComboBox.offsetTop = 8; 
zoomComboBox.offsetLeft = 8; 
var itemsArray = ["10%", "25%", "50%", "75%", "100%", "125%", "200%", "400%", "800%", 
   "1600%", "2400%", "3200%", "6400%", "Actual Size", "Fit Page", "Fit Width", "Fit Height"]; 
// Add default zoom values 
for (var i = 0; i < itemsArray.length; i++) { 
   var option = document.createElement("option"); 
   option.textContent = itemsArray[i]; 
// Add zoom in and out buttons 
var zoomInButton = document.createElement("button"); 
zoomInButton.textContent = "+"; 
zoomInButton.offsetTop = zoomComboBox.offsetTop - 1; 
zoomInButton.offsetLeft = zoomComboBox.offsetWidth + 8; 
var zoomOutButton = document.createElement("button"); 
zoomOutButton.textContent = "-"; 
zoomOutButton.offsetTop = zoomComboBox.offsetTop - 1; 
zoomOutButton.offsetLeft = zoomComboBox.offsetWidth + 2; 
// Set UseDpi to true to view the image at its original resolution 
this._imageViewer.useDpi = true; 
// Add Pan/Zoom interactive mode 
// Click and drag to pan, CTRL-Click and drag to zoom in and out 
this._imageViewer.defaultInteractiveMode = new lt.Controls.ImageViewerPanZoomInteractiveMode(); 
// Initialize the zoom system 
initZoom(zoomComboBox, zoomInButton, zoomOutButton); 


Target Platforms

Help Version 19.0.2017.10.27
Products | Support | Contact Us | Copyright Notices
© 1991-2017 LEAD Technologies, Inc. All Rights Reserved.

Leadtools.Controls Assembly