transformChanged Event

Summary

Occurs when the transformation matrix of the view or any of the item changes.

Syntax

JavaScript Syntax

Object.defineProperty(ImageViewer.prototype,'transformChanged',  
	get: function(), 
	set: function(value) 
) 
function transformChanged.add(function(sender, e)); 
function transformChanged.remove(function(sender, e));

TypeScript Syntax

transformChanged: void;

Remarks

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 Example

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

Event Data

Parameter	Type	Description
sender	var	The source of the event.

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