Allows you to change the current active item in the viewer by using a keyboard, mouse, touch screen, or multi-touch device.
function lt.Controls.ImageViewerActiveItemInteractiveMode
extends lt.Controls.ImageViewerInteractiveMode
class lt.Controls.ImageViewerActiveItemInteractiveMode()
extends ImageViewerInteractiveMode
The ImageViewerActiveItemInteractiveMode object derives from the ImageViewerInteractiveMode object and subscribes to the following events of the InteractiveService object:
Move (if the IsHoverEnabled property is true)
KeyDown (if the IsKeyboardEnabled property is true)
The ImageViewerActiveItemInteractiveMode object changes the current ActiveItem under the following conditions:
If the user clicks an item, it will become the new ActiveItem.
If the IsKeyboardEnabled property is set to true, then moving using the navigation keys (the arrow keys, page up/down keys, home key and end key) will also set the ActiveItem. This works as a "grid" using the current ViewLayout. For example, pressing the down arrow key makes the item below the current active item (if any) the new active item. Pressing the left arrow key makes the item to the left of the current item the new active item, and so forth.
If the IsHoverEnabled property is set to true, then moving the mouse over an item will change its IsHovered property to true, whereas moving the mouse away from the item sets it back to false. Items can have different styles when the mouse is hovering over it. For more information, refer to Image Viewer Appearance.
When a new active item is set, the InteractiveEventArgs.IsHandled property is set to true.
For more information, refer to Image Viewer Interactive Modes.
This example will add the ActiveItemInteractiveMode to the viewer and use it to change the active item.
import { ImageViewer_Example } from "../ImageViewer";
export class ImageViewer_ActiveItemInteractiveModeExample {
private viewerExample;
constructor() {
this.viewerExample = new ImageViewer_Example(this.run);
}
private run = (viewer: lt.Controls.ImageViewer) => {
// Clear all the images already the viewer
viewer.items.clear();
// Use vertical view layout
viewer.viewLayout = new lt.Controls.ImageViewerVerticalViewLayout();
// Make sure the item size is larger than the image size (thumbnails mode)
viewer.itemBorderThickness = 3;
viewer.itemMargin = lt.Controls.ControlPadding.createAll(5);
viewer.itemPadding = lt.Controls.ControlPadding.createAll(20);
// Change the active item background color
viewer.activeItemBorderColor = "forestgreen";
// Add 4 items to the viewer
for (let index = 0; index < 4; index++) {
const item: lt.Controls.ImageViewerItem = new lt.Controls.ImageViewerItem();
item.text = "Item " + index;
item.url = "https://demo.leadtools.com/images/jpeg/cannon.jpg";
viewer.items.add(item);
}
// Insert the Active Item mode before the current PanZoom mode
const activeItemMode: lt.Controls.ImageViewerActiveItemInteractiveMode = new lt.Controls.ImageViewerActiveItemInteractiveMode();
viewer.interactiveModes.insert(0, activeItemMode);
const output = document.getElementById("output");
// Hook to the ActiveItemChanged event and update the label
const updateActiveItem = () => {
const index: number = viewer.items.indexOf(viewer.activeItem);
output.innerHTML = "Active item index: " + index;
}
viewer.activeItemChanged.add(updateActiveItem);
updateActiveItem();
}
}
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_ActiveItemInteractiveModeExample {
viewerExample;
constructor() {
this.viewerExample = new ImageViewer_Example(this.run);
}
run = (viewer) => {
// Clear all the images already the viewer
viewer.items.clear();
// Use vertical view layout
viewer.viewLayout = new lt.Controls.ImageViewerVerticalViewLayout();
// Make sure the item size is larger than the image size (thumbnails mode)
viewer.itemBorderThickness = 3;
viewer.itemMargin = lt.Controls.ControlPadding.createAll(5);
viewer.itemPadding = lt.Controls.ControlPadding.createAll(20);
// Change the active item background color
viewer.activeItemBorderColor = "forestgreen";
// Add 4 items to the viewer
for (let index = 0; index < 4; index++) {
const item = new lt.Controls.ImageViewerItem();
item.text = "Item " + index;
item.url = "https://demo.leadtools.com/images/jpeg/cannon.jpg";
viewer.items.add(item);
}
// Insert the Active Item mode before the current PanZoom mode
const activeItemMode = new lt.Controls.ImageViewerActiveItemInteractiveMode();
viewer.interactiveModes.insert(0, activeItemMode);
const output = document.getElementById("output");
// Hook to the ActiveItemChanged event and update the label
const updateActiveItem = () => {
const index = viewer.items.indexOf(viewer.activeItem);
output.innerHTML = "Active item index: " + index;
}
viewer.activeItemChanged.add(updateActiveItem);
updateActiveItem();
}
}
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 | ActiveItemInteractiveMode</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.InteractiveMode.ActiveItemInteractiveMode();
};
</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