Zoom Method (ImageViewer)

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

Parameters

Parameter	Type	Description
sizeMode	ControlSizeMode	The size mode to use.
zoomValue	double	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	LeadPointD	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:

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.

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% (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 wil 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.

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
      updateZoomValueFromView();
   };

   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)
         updateZoomValueFromView();
      }
   };

   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);
            break;

         case "Fit Page":
            myImageViewer.zoom(lt.Controls.ControlSizeMode.fitAlways, 1, myImageViewer.defaultZoomOrigin);
            break;

         case "Fit Width":
            myImageViewer.zoom(lt.Controls.ControlSizeMode.fitWidth, 1, myImageViewer.defaultZoomOrigin);
            break;

         case "Fit Height":
            myImageViewer.zoom(lt.Controls.ControlSizeMode.fitHeight, 1, myImageViewer.defaultZoomOrigin);
            break;

         default:
            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);
            }
            break;
      }
   });

   // 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) {
      updateZoomValueFromView();
   });

   // Get the value from the viewer into the combo box
   updateZoomValueFromView();
}

// Create a panel to the top
var panel = document.createElement("div");
panel.style.width = "800";
panel.style.height = "800";
document.body.appendChild(panel);

// 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];
   zoomComboBox.appendChild(option);
}

panel.appendChild(zoomComboBox);

// Add zoom in and out buttons
var zoomInButton = document.createElement("button");
zoomInButton.textContent = "+";
zoomInButton.offsetTop = zoomComboBox.offsetTop - 1;
zoomInButton.offsetLeft = zoomComboBox.offsetWidth + 8;
panel.appendChild(zoomInButton);

var zoomOutButton = document.createElement("button");
zoomOutButton.textContent = "-";
zoomOutButton.offsetTop = zoomComboBox.offsetTop - 1;
zoomOutButton.offsetLeft = zoomComboBox.offsetWidth + 2;
panel.appendChild(zoomOutButton);

// 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);