Indicates whether to render the backgrounds.
Object.defineProperty(ImageViewerRenderRedirectOptions.prototype, 'renderBackgrounds',
get: function(),
set: function(value)
)
renderBackgrounds: boolean;
true to render the backgrounds, otherwise; false. Default value is true.
This member will control whether RenderRedirect will render the view or item part during RenderBackground. For more information, refer to Image Viewer Rendering.
import { ImageViewer_Example } from "../ImageViewer";
export class ImageViewer_RenderRedirectExample {
private viewerExample;
constructor() {
this.viewerExample = new ImageViewer_Example(this.run);
}
private run = (viewer: lt.Controls.ImageViewer) => {
viewer.itemBorderThickness = 5;
// Create the canvas we will render to
const redirectCanvas = document.createElement("canvas");
redirectCanvas.style.border = "2px solid black";
const redirectWidth: number = 300;
const redirectHeight: number = 300;
redirectCanvas.width = redirectWidth;
redirectCanvas.height = redirectHeight;
// Add it to the page
const output = document.getElementById("output");
output.appendChild(redirectCanvas);
// Add a 20px margin around the redirect render area
const delta: number = 20;
const destRect: lt.LeadRectD = lt.LeadRectD.create(0, 0, redirectWidth, redirectHeight);
destRect.inflate(-delta, -delta);
const options: lt.Controls.ImageViewerRenderRedirectOptions = new lt.Controls.ImageViewerRenderRedirectOptions();
viewer.rotateAngle = 35;
// Use "null" to draw the whole imageViewer
//let item = null;
const item: lt.Controls.ImageViewerItem = viewer.activeItem;
if (item) {
// Don't worry about rendering the below
options.renderBackgrounds = false;
options.renderBorders = false;
options.renderItemStates = false;
options.renderShadows = false;
options.renderText = false;
}
// On imageViewer render...
viewer.redirectRender.add(() => {
let sourceRect: lt.LeadRectD;
let sourceRectClipped: lt.LeadRectD;
if (!item) {
// Draw the whole imageViewer
sourceRect = viewer.getViewBounds(true, false);
sourceRectClipped = viewer.getViewBounds(true, true);
}
else {
// Only draw the rect for the active item
sourceRect = viewer.getItemViewBounds(item, lt.Controls.ImageViewerItemPart.image, false);
sourceRectClipped = viewer.getItemViewBounds(item, lt.Controls.ImageViewerItemPart.image, true);
}
const ctx: CanvasRenderingContext2D = redirectCanvas.getContext("2d");
ctx.clearRect(0, 0, redirectWidth, redirectHeight);
// Draw a rect around the maximum render area
ctx.strokeStyle = "green";
ctx.strokeRect(destRect.x, destRect.y, destRect.width, destRect.height);
// Create the transformation for this rect
options.createTransform(viewer, destRect, sourceRect, lt.Controls.ControlSizeMode.fit, lt.Controls.ControlAlignment.center, lt.Controls.ControlAlignment.center);
// Draw a rect around the actual render area
const clipRect: lt.LeadRectD = options.transform.transformRect(sourceRect);
ctx.strokeStyle = "orange";
ctx.strokeRect(clipRect.x, clipRect.y, clipRect.width, clipRect.height);
// Do the redirect render
viewer.renderRedirect(ctx, options, lt.LeadRectD.empty);
// Show how to draw the item's border
const manuallyComputeRedirectedBorder = () => {
const points: lt.LeadPointD[] = [lt.LeadPointD.create(sourceRectClipped.left, sourceRectClipped.top), lt.LeadPointD.create(sourceRectClipped.right, sourceRectClipped.bottom)];
options.transform.transformPoints(points);
let xmin = points[0].x;
let ymin = points[0].y;
let xmax = xmin;
let ymax = ymin;
for (let i = 1; i < points.length; i++) {
if (points[i].x < xmin) xmin = points[i].x;
if (points[i].x > xmax) xmax = points[i].x;
if (points[i].y < ymin) ymin = points[i].y;
if (points[i].y > ymax) ymax = points[i].y;
}
const bounds: lt.LeadRectD = lt.LeadRectD.fromLTRB(xmin, ymin, xmax, ymax);
ctx.strokeStyle = "blue";
ctx.strokeRect(bounds.x, bounds.y, bounds.width, bounds.height);
};
manuallyComputeRedirectedBorder();
});
viewer.invalidate(lt.LeadRectD.empty);
}
}
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_RenderRedirectExample {
viewerExample;
constructor() {
this.viewerExample = new ImageViewer_Example(this.run);
}
run = (viewer) => {
viewer.itemBorderThickness = 5;
// Create the canvas we will render to
const redirectCanvas = document.createElement("canvas");
redirectCanvas.style.border = "2px solid black";
const redirectWidth = 300;
const redirectHeight = 300;
redirectCanvas.width = redirectWidth;
redirectCanvas.height = redirectHeight;
// Add it to the page
const output = document.getElementById("output");
output.appendChild(redirectCanvas);
// Add a 20px margin around the redirect render area
const delta = 20;
const destRect = lt.LeadRectD.create(0, 0, redirectWidth, redirectHeight);
destRect.inflate(-delta, -delta);
const options = new lt.Controls.ImageViewerRenderRedirectOptions();
viewer.rotateAngle = 35;
// Use "null" to draw the whole imageViewer
//let item = null;
const item = viewer.activeItem;
if (item) {
// Don't worry about rendering the below
options.renderBackgrounds = false;
options.renderBorders = false;
options.renderItemStates = false;
options.renderShadows = false;
options.renderText = false;
}
// On imageViewer render...
viewer.redirectRender.add(() => {
let sourceRect;
let sourceRectClipped;
if (!item) {
// Draw the whole imageViewer
sourceRect = viewer.getViewBounds(true, false);
sourceRectClipped = viewer.getViewBounds(true, true);
}
else {
// Only draw the rect for the active item
sourceRect = viewer.getItemViewBounds(item, lt.Controls.ImageViewerItemPart.image, false);
sourceRectClipped = viewer.getItemViewBounds(item, lt.Controls.ImageViewerItemPart.image, true);
}
const ctx = redirectCanvas.getContext("2d");
ctx.clearRect(0, 0, redirectWidth, redirectHeight);
// Draw a rect around the maximum render area
ctx.strokeStyle = "green";
ctx.strokeRect(destRect.x, destRect.y, destRect.width, destRect.height);
// Create the transformation for this rect
options.createTransform(viewer, destRect, sourceRect, lt.Controls.ControlSizeMode.fit, lt.Controls.ControlAlignment.center, lt.Controls.ControlAlignment.center);
// Draw a rect around the actual render area
const clipRect = options.transform.transformRect(sourceRect);
ctx.strokeStyle = "orange";
ctx.strokeRect(clipRect.x, clipRect.y, clipRect.width, clipRect.height);
// Do the redirect render
viewer.renderRedirect(ctx, options, lt.LeadRectD.empty);
// Show how to draw the item's border
const manuallyComputeRedirectedBorder = () => {
const points = [lt.LeadPointD.create(sourceRectClipped.left, sourceRectClipped.top), lt.LeadPointD.create(sourceRectClipped.right, sourceRectClipped.bottom)];
options.transform.transformPoints(points);
let xmin = points[0].x;
let ymin = points[0].y;
let xmax = xmin;
let ymax = ymin;
for (let i = 1; i < points.length; i++) {
if (points[i].x < xmin) xmin = points[i].x;
if (points[i].x > xmax) xmax = points[i].x;
if (points[i].y < ymin) ymin = points[i].y;
if (points[i].y > ymax) ymax = points[i].y;
}
const bounds = lt.LeadRectD.fromLTRB(xmin, ymin, xmax, ymax);
ctx.strokeStyle = "blue";
ctx.strokeRect(bounds.x, bounds.y, bounds.width, bounds.height);
};
manuallyComputeRedirectedBorder();
});
viewer.invalidate(lt.LeadRectD.empty);
}
}
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 | RenderRedirect</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.RenderRedirect();
};
</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