Scrolls to the top-left of an item given by its index.
ImageViewer.prototype.gotoItemByIndex = function(
index
)
gotoItemByIndex(
index: number
): void;
index
The 0-based index of the item
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.
This example will add buttons that will scroll to their respective items.
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/js/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/js/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>
Help Collections
Raster .NET | C API | C++ Class Library | HTML5 JavaScript
Document .NET | C API | C++ Class Library | HTML5 JavaScript
Medical .NET | C API | C++ Class Library | HTML5 JavaScript
Medical Web Viewer .NET
Multimedia
Direct Show .NET | C API | Filters
Media Foundation .NET | C API | Transforms
Supported Platforms
.NET, Java, Android, and iOS/macOS Assemblies
Imaging, Medical, and Document
C API/C++ Class Libraries
Imaging, Medical, and Document
HTML5 JavaScript Libraries
Imaging, Medical, and Document