OnSizeChanged Method (ImageViewer)

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.

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:

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();
   }
};