ScaleFactor Property (ImageViewer)

  get_scaleFactor();
 set_scaleFactor(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, 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 will perform 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 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.

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:

1. Sit the size mode to a value and leave it, such as ImageViewerSizeMode.None, ImageViewerSizeMode.Fit or ImageViewerSizeMode.Stretch. 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 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 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.

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.