In This Topic ▼

rotateAngle Property

Summary

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

Syntax

TypeScript

JavaScript

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

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 will be changed.

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 view (image) that is 100 by 200 pixels and you rotate it by 90 degrees clockwise, 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's 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.

RotateAngle.ts

ImageViewer.ts

RotateAngle.js

ImageViewer.js

RotateAngle.html

import { ImageViewer_Example } from "../ImageViewer"; 
 
export class ImageViewer_RotateAngleExample { 
   private viewerExample; 
   constructor() { 
      this.viewerExample = new ImageViewer_Example(this.run); 
   } 
 
   private run = (viewer: lt.Controls.ImageViewer) => { 
      // Add a border so we can see the item's bounds even with rotation 
      viewer.itemBorderThickness = 5; 
 
      const output = document.getElementById("output"); 
      const textOutput = document.createElement("p"); 
      output.appendChild(textOutput); 
 
      const updateOutput = () => { 
         textOutput.innerHTML = "ResizeOnTransform: " + viewer.resizeOnTransform + ", Rotation: " + viewer.rotateAngle; 
      } 
      updateOutput(); 
 
      // Add a button to flip the resizeOnTransform property 
      const flipResizeOnTransform = document.createElement("button"); 
      flipResizeOnTransform.innerHTML = "Flip ResizeOnTransform"; 
      flipResizeOnTransform.onclick = () => { 
         viewer.resizeOnTransform = !viewer.resizeOnTransform; 
         updateOutput(); 
      }; 
 
      // Add a button to update the rotation 
      const rotate = document.createElement("button"); 
      rotate.innerHTML = "Rotate by 45"; 
      rotate.onclick = () => { 
         viewer.rotateAngle += 45; 
         updateOutput(); 
      }; 
 
      output.appendChild(flipResizeOnTransform); 
      output.appendChild(rotate); 
   } 
}

export class ImageViewer_Example { 
   // LEADTOOLS ImageViewer to be used with this example 
   protected imageViewer: lt.Controls.ImageViewer = null; 
   // Generic state value used by the examples 
   public timesClicked: number = 0; 
 
   constructor(callback?: (viewer: lt.Controls.ImageViewer) => void) { 
      // Set the LEADTOOLS license. Replace this with your actual license file 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
 
      // Create an image viewer inside the imageViewerDiv element 
      const imageViewerDiv = document.getElementById("imageViewerDiv"); 
      const createOptions: lt.Controls.ImageViewerCreateOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
      this.imageViewer = new lt.Controls.ImageViewer(createOptions); 
      this.imageViewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.autoCreateCanvas = true; 
 
      // Add Pan/Zoom interactive mode 
      // Click and drag to pan, CTRL-Click and drag to zoom in and out 
      this.imageViewer.interactiveModes.add(new lt.Controls.ImageViewerPanZoomInteractiveMode()); 
 
      // Load an image 
      this.imageViewer.imageUrl = "https://demo.leadtools.com/images/jpeg/cannon.jpg"; 
 
      this.imageViewer.zoom(lt.Controls.ControlSizeMode.fit, .9, this.imageViewer.defaultZoomOrigin); 
 
      const exampleButton = document.getElementById("exampleButton"); 
      exampleButton.addEventListener("click", () => { 
         this.timesClicked++; 
         // Run the example 
         if (callback) 
            callback(this.imageViewer); 
      }); 
   } 
}

import { ImageViewer_Example } from "../ImageViewer"; 
 
export class ImageViewer_RotateAngleExample { 
   viewerExample; 
   constructor() { 
      this.viewerExample = new ImageViewer_Example(this.run); 
   } 
 
   run = (viewer) => { 
      // Add a border so we can see the item's bounds even with rotation 
      viewer.itemBorderThickness = 5; 
 
      const output = document.getElementById("output"); 
      const textOutput = document.createElement("p"); 
      output.appendChild(textOutput); 
 
      const updateOutput = () => { 
         textOutput.innerHTML = "ResizeOnTransform: " + viewer.resizeOnTransform + ", Rotation: " + viewer.rotateAngle; 
      } 
      updateOutput(); 
 
      // Add a button to flip the resizeOnTransform property 
      const flipResizeOnTransform = document.createElement("button"); 
      flipResizeOnTransform.innerHTML = "Flip ResizeOnTransform"; 
      flipResizeOnTransform.onclick = () => { 
         viewer.resizeOnTransform = !viewer.resizeOnTransform; 
         updateOutput(); 
      }; 
 
      // Add a button to update the rotation 
      const rotate = document.createElement("button"); 
      rotate.innerHTML = "Rotate by 45"; 
      rotate.onclick = () => { 
         viewer.rotateAngle += 45; 
         updateOutput(); 
      }; 
 
      output.appendChild(flipResizeOnTransform); 
      output.appendChild(rotate); 
   } 
}

export class ImageViewer_Example { 
   // LEADTOOLS ImageViewer to be used with this example 
   imageViewer = null; 
   // Generic state value used by the examples 
   timesClicked = 0; 
 
   constructor(callback) { 
      // Set the LEADTOOLS license. Replace this with your actual license file 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
 
      // Create an image viewer inside the imageViewerDiv element 
      const imageViewerDiv = document.getElementById("imageViewerDiv"); 
      const createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
      this.imageViewer = new lt.Controls.ImageViewer(createOptions); 
      this.imageViewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.autoCreateCanvas = true; 
 
      // Add Pan/Zoom interactive mode 
      // Click and drag to pan, CTRL-Click and drag to zoom in and out 
      this.imageViewer.interactiveModes.add(new lt.Controls.ImageViewerPanZoomInteractiveMode()); 
 
      // Load an image 
      this.imageViewer.imageUrl = "https://demo.leadtools.com/images/jpeg/cannon.jpg"; 
 
      this.imageViewer.zoom(lt.Controls.ControlSizeMode.fit, .9, this.imageViewer.defaultZoomOrigin); 
 
      const exampleButton = document.getElementById("exampleButton"); 
      exampleButton.addEventListener("click", () => { 
         this.timesClicked++; 
         // Run the example 
         if (callback) 
            callback(this.imageViewer); 
      }); 
   } 
}

<!doctype html> 
<html lang="en"> 
<title>Controls Example | RotateAngle</title> 
 
<head> 
   <script src="https://code.jquery.com/jquery-2.2.4.min.js" 
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 
   <script src="../../LT/Leadtools.js"></script> 
   <script src="../../LT/Leadtools.Controls.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Engine.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Designers.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Rendering.Javascript.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Automation.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Main.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Color.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Core.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Effects.js"></script> 
   <script src="../../LT/Leadtools.Document.js"></script> 
   <script src="../../LT/Leadtools.Document.Viewer.js"></script> 
   <style> 
      body { 
         font-family: 'Segoe UI', sans-serif; 
      } 
 
      #imageViewerDiv { 
         border: 1px solid #888; 
         width: 500px; 
         height: 500px; 
         background-color: #eee; 
      } 
   </style> 
 
   <!-- All demo files are bundled and appended to the window --> 
   <script src="../../bundle.js" type="text/javascript"></script> 
</head> 
 
<body> 
   <p>Press and drag on the image to pan.</p> 
   <p>Hold down the control key and press and drag on the image or pinch with two fingers to zoom in and out.</p> 
   <div> 
      <button type="button" id="exampleButton">Run Example</button> 
   </div> 
   <div id="imageViewerDiv"></div> 
   <div id="output"></div> 
</body> 
 
<script> 
   window.onload = () => { 
      const example = new window.examples.ImageViewer.RotateAngle(); 
 
   }; 
</script> 
</html>

Requirements

Target Platforms

Reference

ImageViewer Class

ImageViewer Members

Leadtools.Controls Namespace

Download our FREE evaluation

Help Version 22.0.2023.2.4

Leadtools.Controls Assembly

Introduction

Getting Started

Namespaces

Leadtools.Controls Namespace

Assemblies