ScaleFactor Property (ImageViewer)

get_scaleFactor();
set_scaleFactor(value);
Object.defineProperty('scaleFactor');

Property Value

Changing the value of this property will fire the PropertyChanged and TransformChanged events.

The following variables 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. (These can 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 properties. If the stretch size mode is not used in your application, use the CurrentScaleFactor property which is a helper property that returns the maximum of x, y scale factors (which are equal in all cases except for stretch mode).

For example, to fit the image in the current viewer size, set the SizeMode equal to ImageViewerSizeMode.Fit and set the ScaleFactor equal to 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).

The following code demonstrates this:

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

Anytime you change the value of ScaleFactor or SizeMode, the control will recalculate 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.

Since changing SizeMode and ScaleFactor will cause the viewer to recalculate the transformation and request a render operation, it is best to 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, Use the ImageViewer control to display images in two ways:

1. Set the size mode (such as ImageViewerSizeMode.None, ImageViewerSizeMode.Fit or ImageViewerSizeMode.Stretch)to a value and leave it alone. For example, to display thumbnails or a static image. In other words, the application will not have zoom in/out functionality for the viewer.

2. The application requires zooming as well as optionally changing the size mode. An example of this is a document viewer application.

For the first types of applications, you can change the value of SizeMode and ScaleFactor directly like the example above. Since you generally set it to a value and then not change it later.

For the second types 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 of 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 any updates, Zoom also allows you to specify the origin for the zoom operation. In the example above, the image will be zoomed in around the default point for current alignment (ImageHorizontalAlignment and ImageVerticalAlignment).

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

Start with the ImageViewer example, remove all the code inside the example function (search for the "// TODO: add example code here" comment) and insert the following code:

Open the HTML page in your browser. Now when you click the Example button, the image will zoom in and out.

zoomIn: false,

example: function SiteLibrary_DefaultPage$example(viewer) {

   // Set the new values in viewer
   var scaleFactor = viewer.get_scaleFactor();

   if(this.zoomIn) {
      // Zoom in
      scaleFactor *= 2;

      if(scaleFactor > 8) {
         // Zoom out next time
         this.zoomIn = false;
      }
   }
   else {
      // Zoom out
      scaleFactor /= 2;
      if(scaleFactor < 0.0125) {
         // Zoom in next time
         this.zoomIn = true;
      }
   }

   viewer.set_scaleFactor(scaleFactor);

   // Show the values in the label
   var exampleLabel = document.getElementById("exampleLabel");
   exampleLabel.textContent = "Scale factor = " + viewer.get_scaleFactor();
},