RotateAngle Property

get_rotateAngle();
set_rotateAngle(value);
Object.defineProperty('rotateAngle');

Property Value

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 Transform.

Rotating an image is similar to rotating a rectangle, the values of "width" and "height" might change. When you rotate the image using the RotateAngle property, the ResizeOnRotate property determines whether the viewer should change the size of the scrolling area as well. For example, if you have an image that is 100 by 200 pixels and you rotate it by 90 degrees clock wise, the new image size should be 200 by 100 pixels. If ResizeOnRotate 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 ResizeOnRotate 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.

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 rotate and the value of ResizeOnRotate will be flipped. Notice that when ResizeOnRotate is true, you can use the scrollbars to viewer the whole new image size. When the value if false, the image is rotated around its center and you might not be able to view the whole area.

example: function SiteLibrary_DefaultPage$example(viewer) {

   // Change the value of ResizeOnRotate
   viewer.set_resizeOnRotate(!viewer.get_resizeOnRotate());

   // Rotate by 30
   viewer.set_rotateAngle(viewer.get_rotateAngle() + 15);

   // Show the values in the label
   var exampleLabel = document.getElementById("exampleLabel");
   exampleLabel.textContent = "ResizeOnRotate = " + viewer.get_resizeOnRotate() + " angle: " + viewer.get_rotateAngle();
},