Zoom Method

Zooms or changes the size mode of the image inside the viewer.

Syntax

JavaScript
WinRT JavaScript

 function Leadtools.Controls.ImageViewer.zoom( 
   sizeMode ,
   scaleFactor ,
   origin 
)

!MISSING Scrap '_RTJavaScript_Method_SYNTAX'!

Parameters

Parameter	Type	Description
sizeMode	ImageViewerSizeMode	The zoom mode to use.
scaleFactor	double	The desired scale factor.
origin	LeadPointD	The origin of the zoom operation.

Remarks

The following factors affect the current zoom value of the image inside the viewer:

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 image 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 ImageViewerSizeMode.Stretch for example). These values can always be obtained by reading the value of the read-only CurrentXScaleFactor and CurrentYScaleFactor. If stretch size mode is not used in your application, then you can use CurrentScaleFactor 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 image in the current viewer size, you use the following: SizeMode = ImageViewerSizeMode.Fit and ScaleFactor = 1. The viewer might zoom the image out to make it fit if the image size is greater than the control size. Hence, the actual zoom value is not 1, but a value less than 1. Hence, ScaleFactor will be 1 (since you are not doing any scaling) but CurrentScaleFactor will be less than 1 (since the viewer has to zoom the image out).

Anytime you change the value of ScaleFactor or SizeMode, the control will re-calculate the transformation matrix required to draw the image as requested on the viewer. This matrix can be obtained at any time by querying the Transform read only property.

The following code will perform the above:

            viewer.set_sizeMode(Leadtools.Controls.ImageViewerSizeMode.fit);
            viewer.set_scaleFactor(1);

Since changing SizeMode and ScaleFactor will cause the viewer to recalculate the transformation and request a render operation, it is recommended that you disable the update and re-enable it to combine both operations and enhance performance:

            viewer.beginUpdate();
            viewer.set_sizeMode(Leadtools.Controls.ImageViewerSizeMode.fit);
            viewer.set_scaleFactor(1);
            viewer.endUpdate();

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 ImageViewerSizeMode.None, ImageViewerSizeMode.Fit or ImageViewerSizeMode.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, change the values of SizeMode and ScaleFactor directly like the example above. Typically, the values are set and are not changed later.

For the second type of applications, it is recommended that you do not use the SizeMode and ScaleFactor properties directly to set the required zooming and image fit. Instead, use the helper Zoom method that accepts all the necessary information needed to perform common zooming and size mode operations. The previous code snippet can be changed into this single line:

            viewer.zoom(Leadtools.Controls.ImageViewerSizeMode.fit, 1, viewer.get_defaultZoomOrigin());

As well as taking care of the update issue, the Zoom method also allows you to specify the zoom operation origin. In the example above, the image will zoom in around the default point for current alignment (ImageHorizontalAlignment and ImageVerticalAlignment).

All the LEADTOOLS HTML 5 demos that use ImageViewer use Zoom exclusively to perform size mode and scaling operations and never change the values of ScaleFactor or SizeMode directly.

Example

JavaScript

<!DOCTYPE html>
<html>
<head>
   <title>Leadtools Examples</title>
   <meta http-equiv="X-UA-Compatible" content="IE=9" />
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
   <style>
      #imageViewerDiv
      {
         border: 1px solid #000000;
         width: 400px;
         height: 400px;
         background-color: #7F7F7F;
      }
   </style>
   <script type="text/javascript" src="Scripts/Leadtools.js"></script>
   <script type="text/javascript" src="Scripts/Leadtools.Controls.js"></script>
   <script type="text/javascript">
      (function () {
         DefaultPage = function DefaultPage() {
         }

         DefaultPage.prototype = {
            _viewer: null,
            _this: null,

            updateCurrentScaleFactor: function SiteLibrary_DefaultPage$updateCurrentScaleFactor() {
               // Get the current and add it to the combo box
               var zoomSelect = document.getElementById("zoomSelect");
               var option = zoomSelect.options[3];
               option.textContent = "Current: " + parseInt(this._viewer.get_currentScaleFactor() * 100) + "%";
               zoomSelect.selectedIndex = 3;
            },

            run: function SiteLibrary_DefaultPage$run() {
               _this = this;

               // Create the viewer
               var createOptions = new Leadtools.Controls.ImageViewerCreateOptions("imageViewerDiv", "myViewer");
               this._viewer = new Leadtools.Controls.ImageViewer(createOptions);

               // Set the interactive mode to PanZoom
               var interactiveMode = new Leadtools.Controls.ImageViewerPanZoomInteractiveMode();
               this._viewer.set_defaultInteractiveMode(interactiveMode);

               // When the value of ScaleFactor changes, update the combobox
               this._viewer.add_propertyChanged(function(sender, e) {
                  var xx = e.get_propertyName();
                  if (e.get_propertyName() == "ScaleFactor") {
                     _this.updateCurrentScaleFactor();
                  }
               });

               // Handle the zoom combo box
               var zoomSelect = document.getElementById("zoomSelect");
               zoomSelect.addEventListener("change", function() {
                  var viewer = _this._viewer;
                  switch (zoomSelect.selectedIndex) {
                     case 0:  // Actual size
                        viewer.zoom(Leadtools.Controls.ImageViewerSizeMode.actualSize, 1, viewer.get_defaultZoomOrigin());
                        zoomSelect.selectedIndex = 0;
                        break;

                     case 1:  // Fit page
                        viewer.zoom(Leadtools.Controls.ImageViewerSizeMode.fit, 1, viewer.get_defaultZoomOrigin());
                        zoomSelect.selectedIndex = 1;
                        break;

                     case 2: // Fit width
                        viewer.zoom(Leadtools.Controls.ImageViewerSizeMode.fitWidth, 1, viewer.get_defaultZoomOrigin());
                        zoomSelect.selectedIndex = 2;
                        break;

                     case 3: // Current
                        var percentage = parseInt(zoomSelect.value.replaceAll("%", "").replaceAll("Current: ", ""));
                        viewer.zoom(Leadtools.Controls.ImageViewerSizeMode.None, percentage / 100, viewer.get_defaultZoomOrigin());
                        break;

                     default:
                        var percentage = parseInt(zoomSelect.value.replaceAll("%", ""));
                        viewer.zoom(Leadtools.Controls.ImageViewerSizeMode.None, percentage / 100, viewer.get_defaultZoomOrigin());
                        break;
                  }
               }, false);

               // Zoom in/out buttons:
               var zoomFactor = 1.2;
               var zoomInButton = document.getElementById("zoomInButton");
               zoomInButton.addEventListener("click", function() {
                  var viewer = _this._viewer;
                  viewer.zoom(Leadtools.Controls.ImageViewerSizeMode.none, viewer.get_currentScaleFactor() * zoomFactor, viewer.get_defaultZoomOrigin());
               }, false);

               var zoomOutButton = document.getElementById("zoomOutButton");
               zoomOutButton.addEventListener("click", function() {
                  var viewer = _this._viewer;
                  viewer.zoom(Leadtools.Controls.ImageViewerSizeMode.none, viewer.get_currentScaleFactor() / zoomFactor, viewer.get_defaultZoomOrigin());
               }, false);

               // Set the image URL
               this._viewer.set_imageUrl("Images/PngImage.png");
            },

            dispose: function SiteLibrary_DefaultPage$dispose() {
            },
         }

         DefaultPage.registerClass("DefaultPage", null, ss.IDisposable);
         var page = null;
         var windowLoad = null;
         var windowUnload = null;
         windowLoad = function (e) {
            window.removeEventListener("load", windowLoad, false);
            page = new DefaultPage();
            page.run();
            window.addEventListener("unload", windowUnload, false);
         };
         windowUnload = function (e) {
            window.removeEventListener("unload", windowUnload, false);
            page.dispose();
         };
         window.addEventListener("load", windowLoad, false);
      })();
   </script>
</head>
<body>
   <p>Press and drag on the image to pan</p>
   <div>
      <select id="zoomSelect" class="controlsSelect">
         <option>Actual Size</option>
         <option>Fit Page</option>
         <option>Fit Width</option>
         <option>100%</option>
         <option>10%</option>
         <option>25%</option>
         <option>50%</option>
         <option>75%</option>
         <option>100%</option>
         <option>125%</option>
         <option>200%</option>
         <option>400%</option>
         <option>800%</option>
         <option>1600%</option>
         <option>2400%</option>
         <option>3200%</option>
         <option>6400%</option>
      </select>
      <input type="button" id="zoomInButton" value="IN" />
      <input type="button" id="zoomOutButton" value="OUT" />
   </div>
   <div id="imageViewerDiv" />
</body>
</html>

Zoom Method

Parameters

Reference