TransformChanged Event

JavaScript

add_transformChanged(function(sender, e))
transformChanged.add(function(sender, e))
remove_transformChanged(function(sender, e))
transformChanged.remove(function(sender, e))

This event is raised when the transformation matrix of the view or any of the item changes by either a programmatic modification or end-user interaction through the user interface.

The event is raised by the UpdateTransform method after all the calculations needed is performed, it gives the user a chance for a catch all notification when anything in the viewer changes.

For more information, refer to Image Viewer Items, Image Viewer Transformation, Image Viewer Bounds and Transform and Image Viewer Layouts.

Example

This example will hook to the TransformChanged event of the viewer and track the current first and largest visible items.

Run the demo, click the Example button and notice that as you pan and zoom the viewer, the values are displayed in the label.

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

// Clear all the images already the viewer
this._imageViewer.items.clear();
// Use vertical view layout
this._imageViewer.viewLayout = new lt.Controls.ImageViewerVerticalViewLayout();
// Make sure the item size is larger than the image size (thumbnails mode)
this._imageViewer.itemSize = lt.LeadSizeD.create(200, 200);
this._imageViewer.itemPadding = lt.Controls.ControlPadding.create(20, 20, 20, 20);
this._imageViewer.itemBorderThickness = 1;
this._imageViewer.imageBorderThickness = 1;


// Add 4 items to the viewer
for (var page = 1; page <= 4; page++) {
   var item = new lt.Controls.ImageViewerItem();
   var imageUrl = "http://demo.leadtools.com/images/png/ocr" + page.toString() + ".png";
   item.url = imageUrl;
   item.tag = page;  // Set the tag of each item to be the page number
   this._imageViewer.items.add(item);
}

// Hook to the TransformChanged event that shows occur whenever we pan or zoom
this._imageViewer.transformChanged.add(function (sender, e) {
   // Get the GetFirstVisibleItem and largest
   var firstVisible = _this._imageViewer.getFirstVisibleItem(lt.Controls.ImageViewerItemPart.item);
   var largest = _this._imageViewer.getLargestVisibleItem(lt.Controls.ImageViewerItemPart.item);

   // Show both in the label
   var infoLabel = document.getElementById("infoLabel");
   var firstVisibleText = (firstVisible != null) ? firstVisible.textContent : "none";
   var largestText = (largest != null) ? largest.textContent : "none";

   infoLabel.textContent = "First visible " + firstVisibleText + " - Largest " + largestText;
});

Parameter	Type	Description
sender	'var'	The source of the event.
e	EventArgs	The event data.

Reference

ImageViewer Object
ImageViewer Members