onSizeChanged Method

Summary

Inform the control that the size of the container has changed.

Syntax

JavaScript Syntax

ImageViewer.prototype.onSizeChanged = function()

TypeScript Syntax

onSizeChanged(): void;

Remarks

The viewer hooks to standard HTML Window "sizechanged" or "orientationchange" events depending on the browser being used. This will allow the viewer to recalculate the transformation matrix and cause a render if the size of the control (container div) changes. If however, the size of the control is changed programmatically or due to CSS rules that do not fire "sizechanged" or "orientationchange", then the control will not be updated. You must call OnSizeChanged to trigger the control to update its transformation.

The control size can be obtained by using ControlSize.

Example

Run the demo and click the Example button. The size of the container is reduced by half and OnSizeChanged is called to reflect the new size into the viewer.

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:

JavaScript Example

function ImageViewer_OnSizeChanged() { 
   // Create a panel to the top 
   var panel = document.createElement("div"); 
   panel.style.width = "800"; 
   panel.style.height = "800"; 
   document.body.appendChild(panel); 
 
   // Create the image viewer taking the rest of the form 
   var imageViewerDiv = document.createElement("div"); 
   document.body.appendChild(imageViewerDiv); 
   this._imageViewer = new lt.Controls.ImageViewer(new lt.Controls.ImageViewerCreateOptions(imageViewerDiv)); 
 
   // Add Pan/Zoom interactive mode 
   // Click and drag to pan, CTRL-Click and drag to zoom in and out 
   this._imageViewer.defaultInteractiveMode = new lt.Controls.ImageViewerPanZoomInteractiveMode(); 
 
   var myViewer = this._imageViewer; 
   window.onresize = function (e) { 
      if (myViewer) 
         myViewer.onSizeChanged(); 
   } 
};

Requirements

Target Platforms

Reference

ImageViewer Class

ImageViewer Members

Leadtools.Controls Namespace

Help Version 19.0.2017.10.27

Leadtools.Controls Assembly

Introduction

Getting Started

Namespaces

Leadtools.Controls Namespace

Assemblies