SizeMode Property

  get_sizeMode();
 set_sizeMode(value);    

!MISSING Scrap '_RTJavaScript_PROPERTY_SYNTAX'!

Property Value

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

The following 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), this is a value that you can use 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: set SizeMode equal to ImageViewerSizeMode.Fit and set the ScaleFactor 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 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 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();
            

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.

Generally, you might use the ImageViewer control to display images in two ways:

1. Set the size mode to a specific value and leave it, such as ImageViewerSizeMode.None, ImageViewerSizeMode.Fit or ImageViewerSizeMode.Stretch. this would work 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. A document viewer application is an example of this.

For the first type of application, 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 type of application, 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, 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 as you click the Example button, the size mode iterate through all the values.