rotateAngle Property - Leadtools.Controls Namespace - HTML5 JavaScript Help

rotateAngle Property

Summary

Value of the rotation angle to use when displaying the view.

Syntax

JavaScript Syntax
Object.defineProperty(ImageViewer.prototype, 'rotateAngle', 
	get: function(), 
	set: function(value) 
) 

TypeScript Syntax
rotateAngle: number; 

Property Value

The rotation angle for the image display, in degrees. The default value is 0.

Remarks

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

This is a display value and the image data will not be changed. Only the value of ViewTransform.

Rotating the view is similar to rotating a rectangle, the values of "width" and "height" might change. When you rotate the view using the RotateAngle property, the ResizeOnTransform property determines whether the viewer should change the size of the scrolling area as well. For example, if you have an view (image) that is 100 by 200 pixels and you rotate it by 90 degrees clock wise, the new view size should be 200 by 100 pixels. If ResizeOnTransform was set to true (the default value), then the viewer will rotate the image around 0,0 and translate it to come up with a transformation that will show the image in this position. The new scroll area will be adjusted according to the image's new size (200, 100).

If the value of ResizeOnTransform is set to false, then the image will be rotated around its center and no sizing will be performed and parts of the image might be end up outside the visible area.

Setting this value will automatically update ImageViewerItem.RotateAngle of all the items in this viewer to the same value. To change an item value individually, use the item property directly.

For more information, refer to Image Viewer Appearance.

Example

The example below shows the use of RotateAngle and ResizeOnTransform by providing buttons that change each property.

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

JavaScript Example
// Add a border so we can see the item's bounds even with rotation 
imageViewer.itemBorderThickness = 5; 
 
var output = document.getElementById("output"); 
var textOutput = document.createElement("p"); 
output.appendChild(textOutput); 
 
function updateOutput() { 
   textOutput.innerHTML = "ResizeOnTransform: " + imageViewer.resizeOnTransform + ", Rotation: " + imageViewer.rotateAngle; 
} 
updateOutput(); 
 
// Add a button to flip the resizeOnTransform property 
var flipResizeOnTransform = document.createElement("button"); 
flipResizeOnTransform.innerHTML = "Flip ResizeOnTransform"; 
flipResizeOnTransform.onclick = function () { 
   imageViewer.resizeOnTransform = !imageViewer.resizeOnTransform; 
   updateOutput(); 
}; 
 
// Add a button to update the rotation 
var rotate = document.createElement("button"); 
rotate.innerHTML = "Rotate by 45"; 
rotate.onclick = function () { 
   imageViewer.rotateAngle += 45; 
   updateOutput(); 
}; 
 
output.appendChild(flipResizeOnTransform); 
output.appendChild(rotate); 

Requirements

Target Platforms

Help Version 20.0.2018.6.22
Products | Support | Contact Us | Copyright Notices
© 1991-2018 LEAD Technologies, Inc. All Rights Reserved.

Leadtools.Controls Assembly