zoom Method

Summary

Zooms or changes the size mode of the view.

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

Parameters

sizeMode

The size mode to use.

zoomValue

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.

origin

The origin of the zoom operation.

Remarks

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 dependent on the value of Columns. For example, if the column count is 0, then the view layout will try to fit as many 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 the maximum total width of the items in any column, and the height of the view is the total height of all the rows.

ImageViewerHorizontalViewLayout

The view size is dependent on the value of Rows. For example, if the row count is 0, then the view layout will try to fit as many 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 the maximum total height of the items in any row, and 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 the 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 equation: 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 (which 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.

Examples:

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% (make the image 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% (make the image 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 a quarter of the size)

// Multiply the current scale factor by one 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 calculation 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 zoom it by 2.

All the size modes listed above maintain the aspect ratio of the view. 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-calculate the desired view size when the size of the viewer changes.

Generally, you can 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 application, 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 applications typically have 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.

Example

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

Zoom.ts
ImageViewer.ts
Zoom.js
ImageViewer.js
Zoom.html
import { ImageViewer_Example } from "../ImageViewer"; 
 
export class ImageViewer_ZoomExample { 
   private viewerExample; 
   constructor() { 
      this.viewerExample = new ImageViewer_Example(this.run); 
   } 
 
   private run = (viewer: lt.Controls.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 
      const _zoomRatio: number = 1.2; 
 
      const updateZoomValueFromView = () => { 
         // Get the current scale factor from the viewer and set it in the zoom combo box 
         const percentage = viewer.scaleFactor * 100.0; 
         titleOption.innerHTML = percentage.toFixed(2) + "%"; 
         zoomSelect.selectedIndex = 0; 
      }; 
 
      const output = document.getElementById("output"); 
 
      // Add a combo box for the zoom values 
      const zoomSelect = document.createElement("select"); 
 
      const zoomValues: string[] = ["10%", "25%", "50%", "75%", "100%", "125%", "200%", "400%", "800%", 
         "1600%", "2400%", "3200%", "6400%", "Actual Size", "Fit Page", "Fit Width", "Fit Height"]; 
 
      // Add a title option to show the current zoom 
      const titleOption = document.createElement("option"); 
      titleOption.disabled = true; 
      titleOption.innerHTML = "N/A"; 
      zoomSelect.appendChild(titleOption); 
 
      // Add default zoom values 
      for (let i = 0; i < zoomValues.length; i++) { 
         const option = document.createElement("option"); 
         option.textContent = zoomValues[i]; 
         zoomSelect.appendChild(option); 
      } 
      zoomSelect.selectedIndex = 0; 
      output.appendChild(zoomSelect); 
 
      // For zoom in button, use current ScaleFactor multiplied by the ratio 
      const zoomInButton = document.createElement("button"); 
      zoomInButton.innerHTML = "+"; // + 
      zoomInButton.addEventListener("click", () => { 
         viewer.zoom(lt.Controls.ControlSizeMode.none, viewer.scaleFactor * _zoomRatio, viewer.defaultZoomOrigin); 
      }); 
      output.appendChild(zoomInButton); 
 
      // For zoom out button, use current ScaleFactor divided by the ratio 
      const zoomOutButton = document.createElement("button"); 
      zoomOutButton.innerHTML = "-"; // - 
      zoomOutButton.addEventListener("click", () => { 
         viewer.zoom(lt.Controls.ControlSizeMode.none, viewer.scaleFactor / _zoomRatio, viewer.defaultZoomOrigin); 
      }); 
      output.appendChild(zoomOutButton); 
 
      zoomSelect.addEventListener("change", () => { 
         // Get the value from the combo box 
         const value: string = zoomSelect.value.trim(); 
         let isPercentage: boolean; 
         let sizeMode: lt.Controls.ControlSizeMode; 
         switch (value) { 
            case "Actual Size": 
               sizeMode = lt.Controls.ControlSizeMode.actualSize; 
               isPercentage = false; 
               break; 
            case "Fit Page": 
               sizeMode = lt.Controls.ControlSizeMode.fitAlways; 
               isPercentage = false; 
               break; 
            case "Fit Width": 
               sizeMode = lt.Controls.ControlSizeMode.fitWidth; 
               isPercentage = false; 
               break; 
            case "Fit Height": 
               sizeMode = lt.Controls.ControlSizeMode.fitHeight; 
               isPercentage = false; 
               break; 
            default: 
               isPercentage = true; 
               break; 
         } 
 
         if (!isPercentage) { 
            viewer.zoom(sizeMode, 1, viewer.defaultZoomOrigin); 
         } 
         else if (value) { 
            // A percentage, use it 
            const percentage: string = value.substring(0, value.length - 1); 
            viewer.zoom(lt.Controls.ControlSizeMode.none, parseFloat(percentage) / 100.0, viewer.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. 
      // This also takes care of Pan/Zoom interactive mode updating the scale fatcor. 
      viewer.transformChanged.add((sender, e) => { 
         updateZoomValueFromView(); 
      }); 
 
      // Get the value from the viewer into the combo box 
      updateZoomValueFromView(); 
   } 
} 
export class ImageViewer_Example { 
   // LEADTOOLS ImageViewer to be used with this example 
   protected imageViewer: lt.Controls.ImageViewer = null; 
   // Generic state value used by the examples 
   public timesClicked: number = 0; 
 
   constructor(callback?: (viewer: lt.Controls.ImageViewer) => void) { 
      // Set the LEADTOOLS license. Replace this with your actual license file 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
 
      // Create an image viewer inside the imageViewerDiv element 
      const imageViewerDiv = document.getElementById("imageViewerDiv"); 
      const createOptions: lt.Controls.ImageViewerCreateOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
      this.imageViewer = new lt.Controls.ImageViewer(createOptions); 
      this.imageViewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.autoCreateCanvas = true; 
 
      // Add Pan/Zoom interactive mode 
      // Click and drag to pan, CTRL-Click and drag to zoom in and out 
      this.imageViewer.interactiveModes.add(new lt.Controls.ImageViewerPanZoomInteractiveMode()); 
 
      // Load an image 
      this.imageViewer.imageUrl = "https://demo.leadtools.com/images/jpeg/cannon.jpg"; 
 
      this.imageViewer.zoom(lt.Controls.ControlSizeMode.fit, .9, this.imageViewer.defaultZoomOrigin); 
 
      const exampleButton = document.getElementById("exampleButton"); 
      exampleButton.addEventListener("click", () => { 
         this.timesClicked++; 
         // Run the example 
         if (callback) 
            callback(this.imageViewer); 
      }); 
   } 
} 
import { ImageViewer_Example } from "../ImageViewer"; 
 
export class ImageViewer_ZoomExample { 
   viewerExample; 
   constructor() { 
      this.viewerExample = new ImageViewer_Example(this.run); 
   } 
 
   run = (viewer) => { 
      // 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 
      const _zoomRatio = 1.2; 
 
      const updateZoomValueFromView = () => { 
         // Get the current scale factor from the viewer and set it in the zoom combo box 
         const percentage = viewer.scaleFactor * 100.0; 
         titleOption.innerHTML = percentage.toFixed(2) + "%"; 
         zoomSelect.selectedIndex = 0; 
      }; 
 
      const output = document.getElementById("output"); 
 
      // Add a combo box for the zoom values 
      const zoomSelect = document.createElement("select"); 
 
      const zoomValues = ["10%", "25%", "50%", "75%", "100%", "125%", "200%", "400%", "800%", 
         "1600%", "2400%", "3200%", "6400%", "Actual Size", "Fit Page", "Fit Width", "Fit Height"]; 
 
      // Add a title option to show the current zoom 
      const titleOption = document.createElement("option"); 
      titleOption.disabled = true; 
      titleOption.innerHTML = "N/A"; 
      zoomSelect.appendChild(titleOption); 
 
      // Add default zoom values 
      for (let i = 0; i < zoomValues.length; i++) { 
         const option = document.createElement("option"); 
         option.textContent = zoomValues[i]; 
         zoomSelect.appendChild(option); 
      } 
      zoomSelect.selectedIndex = 0; 
      output.appendChild(zoomSelect); 
 
      // For zoom in button, use current ScaleFactor multiplied by the ratio 
      const zoomInButton = document.createElement("button"); 
      zoomInButton.innerHTML = "+"; // + 
      zoomInButton.addEventListener("click", () => { 
         viewer.zoom(lt.Controls.ControlSizeMode.none, viewer.scaleFactor * _zoomRatio, viewer.defaultZoomOrigin); 
      }); 
      output.appendChild(zoomInButton); 
 
      // For zoom out button, use current ScaleFactor divided by the ratio 
      const zoomOutButton = document.createElement("button"); 
      zoomOutButton.innerHTML = "-"; // - 
      zoomOutButton.addEventListener("click", () => { 
         viewer.zoom(lt.Controls.ControlSizeMode.none, viewer.scaleFactor / _zoomRatio, viewer.defaultZoomOrigin); 
      }); 
      output.appendChild(zoomOutButton); 
 
      zoomSelect.addEventListener("change", () => { 
         // Get the value from the combo box 
         const value = zoomSelect.value.trim(); 
         let isPercentage; 
         let sizeMode; 
         switch (value) { 
            case "Actual Size": 
               sizeMode = lt.Controls.ControlSizeMode.actualSize; 
               isPercentage = false; 
               break; 
            case "Fit Page": 
               sizeMode = lt.Controls.ControlSizeMode.fitAlways; 
               isPercentage = false; 
               break; 
            case "Fit Width": 
               sizeMode = lt.Controls.ControlSizeMode.fitWidth; 
               isPercentage = false; 
               break; 
            case "Fit Height": 
               sizeMode = lt.Controls.ControlSizeMode.fitHeight; 
               isPercentage = false; 
               break; 
            default: 
               isPercentage = true; 
               break; 
         } 
 
         if (!isPercentage) { 
            viewer.zoom(sizeMode, 1, viewer.defaultZoomOrigin); 
         } 
         else if (value) { 
            // A percentage, use it 
            const percentage = value.substring(0, value.length - 1); 
            viewer.zoom(lt.Controls.ControlSizeMode.none, parseFloat(percentage) / 100.0, viewer.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. 
      // This also takes care of Pan/Zoom interactive mode updating the scale fatcor. 
      viewer.transformChanged.add((sender, e) => { 
         updateZoomValueFromView(); 
      }); 
 
      // Get the value from the viewer into the combo box 
      updateZoomValueFromView(); 
   } 
} 
export class ImageViewer_Example { 
   // LEADTOOLS ImageViewer to be used with this example 
   imageViewer = null; 
   // Generic state value used by the examples 
   timesClicked = 0; 
 
   constructor(callback) { 
      // Set the LEADTOOLS license. Replace this with your actual license file 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
 
      // Create an image viewer inside the imageViewerDiv element 
      const imageViewerDiv = document.getElementById("imageViewerDiv"); 
      const createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
      this.imageViewer = new lt.Controls.ImageViewer(createOptions); 
      this.imageViewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.autoCreateCanvas = true; 
 
      // Add Pan/Zoom interactive mode 
      // Click and drag to pan, CTRL-Click and drag to zoom in and out 
      this.imageViewer.interactiveModes.add(new lt.Controls.ImageViewerPanZoomInteractiveMode()); 
 
      // Load an image 
      this.imageViewer.imageUrl = "https://demo.leadtools.com/images/jpeg/cannon.jpg"; 
 
      this.imageViewer.zoom(lt.Controls.ControlSizeMode.fit, .9, this.imageViewer.defaultZoomOrigin); 
 
      const exampleButton = document.getElementById("exampleButton"); 
      exampleButton.addEventListener("click", () => { 
         this.timesClicked++; 
         // Run the example 
         if (callback) 
            callback(this.imageViewer); 
      }); 
   } 
} 
<!doctype html> 
<html lang="en"> 
<title>Controls Example | Zoom</title> 
 
<head> 
   <script src="https://code.jquery.com/jquery-2.2.4.min.js" 
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 
   <script src="../../LT/Leadtools.js"></script> 
   <script src="../../LT/Leadtools.Controls.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Engine.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Designers.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Rendering.Javascript.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Automation.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Main.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Color.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Core.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Effects.js"></script> 
   <script src="../../LT/Leadtools.Document.js"></script> 
   <script src="../../LT/Leadtools.Document.Viewer.js"></script> 
   <style> 
      body { 
         font-family: 'Segoe UI', sans-serif; 
      } 
 
      #imageViewerDiv { 
         border: 1px solid #888; 
         width: 500px; 
         height: 500px; 
         background-color: #eee; 
      } 
   </style> 
 
   <!-- All demo files are bundled and appended to the window --> 
   <script src="../../bundle.js" type="text/javascript"></script> 
</head> 
 
<body> 
   <p>Press and drag on the image to pan.</p> 
   <p>Hold down the control key and press and drag on the image or pinch with two fingers to zoom in and out.</p> 
   <div> 
      <button type="button" id="exampleButton">Run Example</button> 
   </div> 
   <div id="imageViewerDiv"></div> 
   <div id="output"></div> 
</body> 
 
<script> 
   window.onload = () => { 
      const example = new window.examples.ImageViewer.Zoom(); 
 
   }; 
</script> 
</html> 
Requirements

Target Platforms

Help Version 22.0.2021.9.24
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2021 LEAD Technologies, Inc. All Rights Reserved.

Leadtools.Controls Assembly
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2021 LEAD Technologies, Inc. All Rights Reserved.