SizeMode Property

get_sizeMode();
set_sizeMode(value);
Object.defineProperty('sizeMode');

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, a value of 1.5 means 150 percent, a value of 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 can be different if the size mode is ImageViewerSizeMode.Stretch. These values can always be obtained by reading the value of the read-only CurrentXScaleFactor and CurrentYScaleFactor. If the stretch size mode is not used in your application, then Use CurrentScaleFactor which is a helper property that returns the maximum of the x, y scale factors (which are equal in all cases except stretch mode).

For example, to fit the image in the current viewer size, use the following: set SizeMode equal to ImageViewerSizeMode.Fit and set the ScaleFactor to 1. The viewer could 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 will perform this:

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

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.

Generally, Use the ImageViewer control to display images in two ways:

1. Set the size mode to a specific value (such as ImageViewerSizeMode.None, ImageViewerSizeMode.Fit or ImageViewerSizeMode.Stretch) and leave it alone. Use this to display thumbnails or a static image. Using this method, the application will not have zoom in/out functionality for the viewer.

2. Zoom the image and (optionally) change the size mode. A document viewer application is an example of this.

For the first type of application, change the value of SizeMode and ScaleFactor directly like the example above. Generally, these values are set once and then left alone.

For the second type of application, it is best 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 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 the current (ImageHorizontalAlignment and ImageVerticalAlignment) alignments.

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 size mode will iterate through all the values.

example: function SiteLibrary_DefaultPage$example(viewer) {
   // Loop through the ImageViewerSizeMode options
   var sizeMode = viewer.get_sizeMode();

   if(sizeMode == lt.Controls.ImageViewerSizeMode.none)
      sizeMode = lt.Controls.ImageViewerSizeMode.actualSize;
   else if(sizeMode == lt.Controls.ImageViewerSizeMode.actualSize)
      sizeMode = lt.Controls.ImageViewerSizeMode.fit;
   else if(sizeMode == lt.Controls.ImageViewerSizeMode.fit)
      sizeMode = lt.Controls.ImageViewerSizeMode.fitAlways;
   else if(sizeMode == lt.Controls.ImageViewerSizeMode.fitAlways)
      sizeMode = lt.Controls.ImageViewerSizeMode.fitWidth;
   else if(sizeMode == lt.Controls.ImageViewerSizeMode.fitWidth)
      sizeMode = lt.Controls.ImageViewerSizeMode.fitHeight;
   else if(sizeMode == lt.Controls.ImageViewerSizeMode.fitHeight)
      sizeMode = lt.Controls.ImageViewerSizeMode.stretch;
   else if(sizeMode == lt.Controls.ImageViewerSizeMode.stretch)
      sizeMode = lt.Controls.ImageViewerSizeMode.none;

   // Show the values in the label
   var controlSizeModeNames = [ "None", "ActualSize", "Fit", "FitAlways", "FitWidth", "FitHeight", "Stretch" ];

   var exampleLabel = document.getElementById("exampleLabel");
   exampleLabel.textContent = controlSizeModeNames[sizeMode];

   // Set the new values in viewer
   viewer.set_sizeMode(sizeMode);

   if(sizeMode == lt.Controls.ImageViewerSizeMode.none)
      exampleLabel.textContent = exampleLabel.textContent + " current scale factor = " + viewer.get_currentScaleFactor();
},