Re-renders the spy glass.
ImageViewerSpyGlassInteractiveMode.prototype.invalidate = function()
invalidate(): void;
The mode will automatically re-renders the spy glass when the user move the mouse or through touch. When using an external canvas
for rendering,
it is sometimes desirable to re-render the spy glass based on an external event.
import { ImageViewer_Example } from "../ImageViewer";
export class SpyGlassInteractiveMode_RedirectCanvasExample {
private viewerExample;
constructor() {
this.viewerExample = new ImageViewer_Example(this.run);
}
private run = (viewer: lt.Controls.ImageViewer) => {
const output = document.getElementById("output");
// The width and height of our redirect canvas
const canvasWidth: number = 250;
const canvasHeight: number = 250;
// Create the redirect canvas
const redirectCanvas = document.createElement("canvas") as HTMLCanvasElement;
redirectCanvas.style.border = "1px solid black";
redirectCanvas.width = canvasWidth;
redirectCanvas.height = canvasHeight;
// Create the SpyGlass mode
const mode: lt.Controls.ImageViewerSpyGlassInteractiveMode = new lt.Controls.ImageViewerSpyGlassInteractiveMode();
mode.workCompleted.add((sender, e) => {
if (mode.redirectCanvas) {
// Clear after drawing on redirected canvas
const ctx: CanvasRenderingContext2D = mode.redirectCanvas.getContext("2d");
ctx.clearRect(0, 0, mode.redirectCanvas.width, mode.redirectCanvas.height)
}
});
mode.size = lt.LeadSizeD.create(canvasWidth, canvasHeight);
mode.redirectCanvas = redirectCanvas;
mode.backgroundColor = "yellow";
mode.crosshairColor = "red";
mode.drawImage.add((sender, e) => {
const rect: lt.LeadRectD = e.destinationRectangle;
const ctx: CanvasRenderingContext2D = e.context;
ctx.save();
// Undo offset of the spyglass
ctx.translate(-rect.x, -rect.y);
// We could do anything here. For example, ImageViewerMagnifyGlassInteractiveMode zooms in.
// We will draw additional text over the image.
// Clip to the ImageViewer (optional)
const bounds: lt.LeadRectD = viewer.getViewBounds(false, true);
ctx.beginPath();
ctx.rect(bounds.x, bounds.y, bounds.width, bounds.height);
ctx.closePath();
ctx.clip();
// Draw the view
viewer.renderRedirect(ctx, new lt.Controls.ImageViewerRenderRedirectOptions(), lt.LeadRectD.empty);
// Draw some text on top
ctx.fillStyle = "white";
ctx.strokeStyle = "white";
ctx.font = "75px Times New Roman";
ctx.fillText("Spyglass", bounds.x + (bounds.width / 2) - 100, bounds.y + (bounds.height / 2));
ctx.restore();
});
// Add a toggle button
const button = document.createElement("button");
button.onclick = () => {
if (mode.redirectCanvas)
mode.redirectCanvas = null;
else
mode.redirectCanvas = redirectCanvas;
updateButtonText();
}
output.appendChild(button);
const updateButtonText = () => {
button.innerHTML = !mode.redirectCanvas ? "Redirect Render" : "Render on Viewer";
}
updateButtonText();
// Add the mode to the viewer
viewer.interactiveModes.clear();
viewer.interactiveModes.add(mode);
// Add a select element for the shapes
const shapeSelect = document.createElement("select");
output.appendChild(shapeSelect);
let keys: string[] = Object.keys(lt.Controls.ImageViewerSpyGlassShape);
keys.forEach((key) => {
if (!isNaN(Number(lt.Controls.ImageViewerSpyGlassShape[key])) && key !== "__enum") {
const option = document.createElement("option");
option.innerHTML = key;
shapeSelect.appendChild(option);
}
});
shapeSelect.selectedIndex = lt.Controls.ImageViewerSpyGlassShape.ellipse;
mode.shape = lt.Controls.ImageViewerSpyGlassShape.ellipse;
shapeSelect.addEventListener("change", () => {
mode.shape = shapeSelect.selectedIndex;
});
// Add the canvas
const container = document.createElement("div");
container.appendChild(redirectCanvas);
output.appendChild(container);
}
}
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 SpyGlassInteractiveMode_RedirectCanvasExample {
viewerExample;
constructor() {
this.viewerExample = new ImageViewer_Example(this.run);
}
run = (viewer) => {
const output = document.getElementById("output");
// The width and height of our redirect canvas
const canvasWidth = 250;
const canvasHeight = 250;
// Create the redirect canvas
const redirectCanvas = document.createElement("canvas");
redirectCanvas.style.border = "1px solid black";
redirectCanvas.width = canvasWidth;
redirectCanvas.height = canvasHeight;
// Create the SpyGlass mode
const mode = new lt.Controls.ImageViewerSpyGlassInteractiveMode();
mode.workCompleted.add((sender, e) => {
if (mode.redirectCanvas) {
// Clear after drawing on redirected canvas
const ctx = mode.redirectCanvas.getContext("2d");
ctx.clearRect(0, 0, mode.redirectCanvas.width, mode.redirectCanvas.height)
}
});
mode.size = lt.LeadSizeD.create(canvasWidth, canvasHeight);
mode.redirectCanvas = redirectCanvas;
mode.backgroundColor = "yellow";
mode.crosshairColor = "red";
mode.drawImage.add((sender, e) => {
const rect = e.destinationRectangle;
const ctx = e.context;
ctx.save();
// Undo offset of the spyglass
ctx.translate(-rect.x, -rect.y);
// We could do anything here. For example, ImageViewerMagnifyGlassInteractiveMode zooms in.
// We will draw additional text over the image.
// Clip to the ImageViewer (optional)
const bounds = viewer.getViewBounds(false, true);
ctx.beginPath();
ctx.rect(bounds.x, bounds.y, bounds.width, bounds.height);
ctx.closePath();
ctx.clip();
// Draw the view
viewer.renderRedirect(ctx, new lt.Controls.ImageViewerRenderRedirectOptions(), lt.LeadRectD.empty);
// Draw some text on top
ctx.fillStyle = "white";
ctx.strokeStyle = "white";
ctx.font = "75px Times New Roman";
ctx.fillText("Spyglass", bounds.x + (bounds.width / 2) - 100, bounds.y + (bounds.height / 2));
ctx.restore();
});
// Add a toggle button
const button = document.createElement("button");
button.onclick = () => {
if (mode.redirectCanvas)
mode.redirectCanvas = null;
else
mode.redirectCanvas = redirectCanvas;
updateButtonText();
}
output.appendChild(button);
const updateButtonText = () => {
button.innerHTML = !mode.redirectCanvas ? "Redirect Render" : "Render on Viewer";
}
updateButtonText();
// Add the mode to the viewer
viewer.interactiveModes.clear();
viewer.interactiveModes.add(mode);
// Add a select element for the shapes
const shapeSelect = document.createElement("select");
output.appendChild(shapeSelect);
let keys = Object.keys(lt.Controls.ImageViewerSpyGlassShape);
keys.forEach((key) => {
if (!isNaN(Number(lt.Controls.ImageViewerSpyGlassShape[key])) && key !== "__enum") {
const option = document.createElement("option");
option.innerHTML = key;
shapeSelect.appendChild(option);
}
});
shapeSelect.selectedIndex = lt.Controls.ImageViewerSpyGlassShape.ellipse;
mode.shape = lt.Controls.ImageViewerSpyGlassShape.ellipse;
shapeSelect.addEventListener("change", () => {
mode.shape = shapeSelect.selectedIndex;
});
// Add the canvas
const container = document.createElement("div");
container.appendChild(redirectCanvas);
output.appendChild(container);
}
}
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 | RedirectCanvas</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.RedirectCanvas();
};
</script>
</html>
ImageViewerSpyGlassInteractiveMode Class
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