gotoItemByIndex Method

Summary

Scrolls to the top-left of an item given by its index.

Syntax
TypeScript
JavaScript
ImageViewer.prototype.gotoItemByIndex = function( 
   index 
) 
gotoItemByIndex( 
   index: number 
): void; 

Parameters

index

The 0-based index of the item

Remarks

To go to an item, use GotoItem. To go to an item by its index, use GotoItemByIndex.

The "GoTo" methods scroll the viewer so the top-left portion of the item is visible in the current control boundary, without changing the other transformation properties.

To ensure that an item is visible, use EnsureItemVisible. To ensure an item is visible given its index, use EnsureItemVisibleByIndex.

The "Ensure" methods scroll the viewer the minimum amount required to ensure the item is fully visible in the current control boundary, without changing the other transformation properties. If the item is already fully visible, then nothing happens. If the item is larger than the current control boundary, then the viewer will scroll the minimum amount required where any of the edges (top-left, top-right, bottom-left or bottom-right), is visible.

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

Example

This example will add buttons that will scroll to their respective items.

GoToItemByIndex.ts
ImageViewer.ts
GoToItemByIndex.js
ImageViewer.js
GoToItemByIndex.html
import { ImageViewer_Example } from "../ImageViewer"; 
 
export class ImageViewer_GoToItemByIndexExample { 
   private viewerExample; 
   constructor() { 
      this.viewerExample = new ImageViewer_Example(this.run); 
   } 
 
   private run = (viewer: lt.Controls.ImageViewer) => { 
      // Clear all the images already the viewer to start over 
      viewer.items.clear(); 
      // Use vertical view layout 
      viewer.viewLayout = new lt.Controls.ImageViewerVerticalViewLayout(); 
      // Add padding and margins 
      viewer.itemSpacing = lt.LeadSizeD.create(10, 10); 
      viewer.itemPadding = lt.Controls.ControlPadding.create(0, 0, 0, 20); 
 
      const url: string = "https://demo.leadtools.com/images/jpeg/cannon.jpg"; 
      // Add 4 items to the viewer 
      for (let i = 0; i < 4; i++) { 
         const item: lt.Controls.ImageViewerItem = new lt.Controls.ImageViewerItem(); 
         item.url = url; 
         item.text = "Item " + i; 
         viewer.items.add(item); 
      } 
 
      const output = document.getElementById("output"); 
      let textElement = document.createElement("p"); 
 
      // Create callbacks for button clicks 
      const createCallback = (index) => { 
         return () => { 
            viewer.gotoItemByIndex(index); 
            textElement.innerHTML = "Went to item " + index + "."; 
         } 
      } 
 
      // Add a button for each element to go to it. 
      for (let i = 0; i < viewer.items.count; i++) { 
         const item: lt.Controls.ImageViewerItem = viewer.items.item(i); 
 
         const button = document.createElement("button"); 
         button.innerHTML = "Go to item " + i; 
         output.appendChild(button); 
 
         button.onclick = createCallback(i); 
      } 
      output.appendChild(textElement); 
   } 
} 
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/v200/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_GoToItemByIndexExample { 
   viewerExample; 
   constructor() { 
      this.viewerExample = new ImageViewer_Example(this.run); 
   } 
 
   run = (viewer) => { 
      // Clear all the images already the viewer to start over 
      viewer.items.clear(); 
      // Use vertical view layout 
      viewer.viewLayout = new lt.Controls.ImageViewerVerticalViewLayout(); 
      // Add padding and margins 
      viewer.itemSpacing = lt.LeadSizeD.create(10, 10); 
      viewer.itemPadding = lt.Controls.ControlPadding.create(0, 0, 0, 20); 
 
      const url = "https://demo.leadtools.com/images/jpeg/cannon.jpg"; 
      // Add 4 items to the viewer 
      for (let i = 0; i < 4; i++) { 
         const item = new lt.Controls.ImageViewerItem(); 
         item.url = url; 
         item.text = "Item " + i; 
         viewer.items.add(item); 
      } 
 
      const output = document.getElementById("output"); 
      let textElement = document.createElement("p"); 
 
      // Create callbacks for button clicks 
      const createCallback = (index) => { 
         return () => { 
            viewer.gotoItemByIndex(index); 
            textElement.innerHTML = "Went to item " + index + "."; 
         } 
      } 
 
      // Add a button for each element to go to it. 
      for (let i = 0; i < viewer.items.count; i++) { 
         const item = viewer.items.item(i); 
 
         const button = document.createElement("button"); 
         button.innerHTML = "Go to item " + i; 
         output.appendChild(button); 
 
         button.onclick = createCallback(i); 
      } 
      output.appendChild(textElement); 
   } 
} 
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/v200/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 | GoToItemByIndex</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.GoToItemByIndex(); 
 
   }; 
</script> 
</html> 

Requirements

Target Platforms

Help Version 20.0.2020.4.3
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2020 LEAD Technologies, Inc. All Rights Reserved.

Leadtools.Controls Assembly