Gets the owner annotation container.
Object.defineProperty(AnnLoadPictureEventArgs.prototype, 'container',
get: function()
)
container: AnnContainer; // read-only
The owner annotation container.
import { EngineHelper } from "../utilities/EngineHelper";
export class AnnRenderingEngine_LoadPicture {
constructor() {
const helper = new EngineHelper();
helper.run(this.loadPicture);
}
loadPicture = (automation: lt.Annotations.Automation.AnnAutomation) => {
// get the current rendering engine
let renderingEngine: lt.Annotations.Engine.AnnRenderingEngine = automation.automationControl.renderingEngine;
// Change the default loading object placeholder to be a green border with semi-transparent background
const stroke: lt.Annotations.Engine.AnnStroke = lt.Annotations.Engine.AnnStroke.create(
lt.Annotations.Engine.AnnSolidColorBrush.create("green"),
lt.LeadLengthD.create(1));
const fill: lt.Annotations.Engine.AnnBrush = lt.Annotations.Engine.AnnSolidColorBrush.create("rgba(0, 0, 0, 0.5)");
renderingEngine.loadingPictureStroke = stroke;
renderingEngine.loadingPictureFill = fill;
// Hook to the LoadPicture event
renderingEngine.add_loadPicture((sender, e) => {
// e is AnnLoadPictureEventArgs
// Check if an error occurred
if (e.error != null) {
// Show info about the error
let str = e.error.message;
str += "\nSource: " + e.picture.source;
str += "\nOwner object: " + e.annObject.friendlyName;
alert(str);
}
// Re-render the container after picture get loaded
automation.invalidate(lt.LeadRectD.empty);
});
// Create a new AnnHotspotObject with a picture from a remote server
const inch: number = 720;
const hotspot: lt.Annotations.Engine.AnnHotspotObject = new lt.Annotations.Engine.AnnHotspotObject();
// Add the object at location 1,1 inch with size 4,2 inches
hotspot.rect = lt.LeadRectD.create(1 * inch, 1 * inch, 4 * inch, 2 * inch);
// Set its picture
const picture: lt.Annotations.Engine.AnnPicture = new lt.Annotations.Engine.AnnPicture("");
picture.source = "https://www.leadtools.com/images/page_graphics/leadlogo.png";
//NOTE: CORS can cause toDataUrl to fail
// Alternatively, use a local resource
//picture.source = "Resources/leadlogo.png";
hotspot.picture = picture;
// Add it to the container
const container: lt.Annotations.Engine.AnnContainer = automation.container;
container.children.add(hotspot);
// Render the container
automation.invalidate(lt.LeadRectD.empty);
}
}
export class EngineHelper {
// Automation object
protected _automation: lt.Annotations.Automation.AnnAutomation = null;
// Image viewer
protected _viewer: lt.Controls.ImageViewer = null;
constructor() {
// Set the LEADTOOLS license. Replace this with your actual license file
lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null);
}
public run(callback?: (automation: lt.Annotations.Automation.AnnAutomation, viewer: lt.Controls.ImageViewer) => void): void {
// Create the viewer
const imageViewerDiv = document.getElementById("imageViewerDiv");
const createOptions: lt.Controls.ImageViewerCreateOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv);
const viewer: lt.Controls.ImageViewer = new lt.Controls.ImageViewer(createOptions);
viewer.autoCreateCanvas = true;
this._viewer = viewer;
// PanZoom interactive mode
const panZoom: lt.Controls.ImageViewerPanZoomInteractiveMode = new lt.Controls.ImageViewerPanZoomInteractiveMode();
// Create an instance of the Automation control object that works with LEADTOOLS ImageViewer
const imageViewerAutomationControl: lt.Demos.Annotations.ImageViewerAutomationControl = new lt.Demos.Annotations.ImageViewerAutomationControl();
// Attach our image viewer
imageViewerAutomationControl.imageViewer = viewer;
// Set the image viewer interactive mode
const automationInteractiveMode: lt.Demos.Annotations.AutomationInteractiveMode = new lt.Demos.Annotations.AutomationInteractiveMode();
automationInteractiveMode.automationControl = imageViewerAutomationControl;
// Set the image URL
viewer.imageUrl = "http://demo.leadtools.com/images/png/pngimage.png";
// Create and set up the automation manager using the HTML5 rendering engine
const renderingEngine: lt.Annotations.Rendering.AnnHtml5RenderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine();
const manager: lt.Annotations.Automation.AnnAutomationManager = lt.Annotations.Automation.AnnAutomationManager.create(renderingEngine);
// Create default automation objects
manager.createDefaultObjects();
// Add the objects to the objects select element
const currentObjectIdSelect = document.getElementById("currentObjectIdSelect") as HTMLSelectElement;
// Add the PanZoom option
currentObjectIdSelect.options[currentObjectIdSelect.options.length] = new Option("Pan/Zoom", lt.Annotations.Engine.AnnObject.none.toString());
const automationObjCount: number = manager.objects.count;
for (let i = 0; i < automationObjCount; i++) {
// Get the object
const automationObj: lt.Annotations.Automation.AnnAutomationObject = manager.objects.item(i);
// Add its name to the select element
const name: string = automationObj.name;
const id: string = automationObj.id.toString();
currentObjectIdSelect.options[currentObjectIdSelect.options.length] = new Option(name, id);
}
// Hook to its change event
currentObjectIdSelect.addEventListener("change", () => {
// Get the object ID
const id: number = parseInt(currentObjectIdSelect.options[currentObjectIdSelect.selectedIndex].value);
// Set it as the current object in the manager
manager.currentObjectId = id;
// If this is the "Pan/Zoom" option, then back to pan zoom, otherwise, set our automation control
if (id == lt.Annotations.Engine.AnnObject.none) {
viewer.defaultInteractiveMode = panZoom;
}
else {
viewer.defaultInteractiveMode = automationInteractiveMode;
}
});
// When the current object ID changes, we need to update our select
manager.add_currentObjectIdChanged((sender, e) => {
const currentObjectId: number = manager.currentObjectId;
for (let i = 0; i < currentObjectIdSelect.options.length; i++) {
const id: number = parseInt(currentObjectIdSelect.options[i].value);
if (id === currentObjectId) {
currentObjectIdSelect.selectedIndex = i;
break;
}
}
});
// Pan zoom by default
viewer.defaultInteractiveMode = panZoom;
// set up the automation (will create the container as well)
const automation: lt.Annotations.Automation.AnnAutomation = new lt.Annotations.Automation.AnnAutomation(manager, imageViewerAutomationControl);
this._automation = automation;
// Add handler to update the container size when the image size changes
viewer.itemChanged.add((sender, e) => {
const container: lt.Annotations.Engine.AnnContainer = automation.container;
container.size = container.mapper.sizeToContainerCoordinates(viewer.imageSize);
//Create new canvas data provider for the new image
const canvasDataProvider: lt.Demos.Annotations.CanvasDataProvider = new lt.Demos.Annotations.CanvasDataProvider(viewer.activeItem.canvas);
imageViewerAutomationControl.automationDataProvider = canvasDataProvider;
});
// set up this automation as the active one
this._automation.active = true;
const exampleButton = document.getElementById("exampleButton");
exampleButton.onclick = () => {
if(callback)
callback(this._automation, this._viewer);
}
}
}
import { EngineHelper } from "../utilities/EngineHelper";
export class AnnRenderingEngine_LoadPicture {
constructor() {
const helper = new EngineHelper();
helper.run(this.loadPicture);
}
loadPicture = (automation) => {
// get the current rendering engine
let renderingEngine = automation.automationControl.renderingEngine;
// Change the default loading object placeholder to be a green border with semi-transparent background
const stroke = lt.Annotations.Engine.AnnStroke.create(
lt.Annotations.Engine.AnnSolidColorBrush.create("green"),
lt.LeadLengthD.create(1));
const fill = lt.Annotations.Engine.AnnSolidColorBrush.create("rgba(0, 0, 0, 0.5)");
renderingEngine.loadingPictureStroke = stroke;
renderingEngine.loadingPictureFill = fill;
// Hook to the LoadPicture event
renderingEngine.add_loadPicture((sender, e) => {
// e is AnnLoadPictureEventArgs
// Check if an error occurred
if (e.error != null) {
// Show info about the error
let str = e.error.message;
str += "\nSource: " + e.picture.source;
str += "\nOwner object: " + e.annObject.friendlyName;
alert(str);
}
// Re-render the container after picture get loaded
automation.invalidate(lt.LeadRectD.empty);
});
// Create a new AnnHotspotObject with a picture from a remote server
const inch = 720;
const hotspot = new lt.Annotations.Engine.AnnHotspotObject();
// Add the object at location 1,1 inch with size 4,2 inches
hotspot.rect = lt.LeadRectD.create(1 * inch, 1 * inch, 4 * inch, 2 * inch);
// Set its picture
const picture = new lt.Annotations.Engine.AnnPicture("");
picture.source = "https://www.leadtools.com/images/page_graphics/leadlogo.png";
//NOTE: CORS can cause toDataUrl to fail
// Alternatively, use a local resource
//picture.source = "Resources/leadlogo.png";
hotspot.picture = picture;
// Add it to the container
const container = automation.container;
container.children.add(hotspot);
// Render the container
automation.invalidate(lt.LeadRectD.empty);
}
}
export class EngineHelper {
// Automation object
_automation = null;
// Image viewer
_viewer = null;
constructor() {
// Set the LEADTOOLS license. Replace this with your actual license file
lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null);
}
run(callback) {
// Create the viewer
const imageViewerDiv = document.getElementById("imageViewerDiv");
const createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv);
const viewer = new lt.Controls.ImageViewer(createOptions);
viewer.autoCreateCanvas = true;
this._viewer = viewer;
// PanZoom interactive mode
const panZoom = new lt.Controls.ImageViewerPanZoomInteractiveMode();
// Create an instance of the Automation control object that works with LEADTOOLS ImageViewer
const imageViewerAutomationControl = new lt.Demos.Annotations.ImageViewerAutomationControl();
// Attach our image viewer
imageViewerAutomationControl.imageViewer = viewer;
// Set the image viewer interactive mode
const automationInteractiveMode = new lt.Demos.Annotations.AutomationInteractiveMode();
automationInteractiveMode.automationControl = imageViewerAutomationControl;
// Set the image URL
viewer.imageUrl = "http://demo.leadtools.com/images/png/pngimage.png";
// Create and set up the automation manager using the HTML5 rendering engine
const renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine();
const manager = lt.Annotations.Automation.AnnAutomationManager.create(renderingEngine);
// Create default automation objects
manager.createDefaultObjects();
// Add the objects to the objects select element
const currentObjectIdSelect = document.getElementById("currentObjectIdSelect");
// Add the PanZoom option
currentObjectIdSelect.options[currentObjectIdSelect.options.length] = new Option("Pan/Zoom", lt.Annotations.Engine.AnnObject.none.toString());
const automationObjCount = manager.objects.count;
for (let i = 0; i < automationObjCount; i++) {
// Get the object
const automationObj = manager.objects.item(i);
// Add its name to the select element
const name = automationObj.name;
const id = automationObj.id.toString();
currentObjectIdSelect.options[currentObjectIdSelect.options.length] = new Option(name, id);
}
// Hook to its change event
currentObjectIdSelect.addEventListener("change", () => {
// Get the object ID
const id = parseInt(currentObjectIdSelect.options[currentObjectIdSelect.selectedIndex].value);
// Set it as the current object in the manager
manager.currentObjectId = id;
// If this is the "Pan/Zoom" option, then back to pan zoom, otherwise, set our automation control
if (id == lt.Annotations.Engine.AnnObject.none) {
viewer.defaultInteractiveMode = panZoom;
}
else {
viewer.defaultInteractiveMode = automationInteractiveMode;
}
});
// When the current object ID changes, we need to update our select
manager.add_currentObjectIdChanged((sender, e) => {
const currentObjectId = manager.currentObjectId;
for (let i = 0; i < currentObjectIdSelect.options.length; i++) {
const id = parseInt(currentObjectIdSelect.options[i].value);
if (id === currentObjectId) {
currentObjectIdSelect.selectedIndex = i;
break;
}
}
});
// Pan zoom by default
viewer.defaultInteractiveMode = panZoom;
// set up the automation (will create the container as well)
const automation = new lt.Annotations.Automation.AnnAutomation(manager, imageViewerAutomationControl);
this._automation = automation;
// Add handler to update the container size when the image size changes
viewer.itemChanged.add((sender, e) => {
const container = automation.container;
container.size = container.mapper.sizeToContainerCoordinates(viewer.imageSize);
//Create new canvas data provider for the new image
const canvasDataProvider = new lt.Demos.Annotations.CanvasDataProvider(viewer.activeItem.canvas);
imageViewerAutomationControl.automationDataProvider = canvasDataProvider;
});
// set up this automation as the active one
this._automation.active = true;
const exampleButton = document.getElementById("exampleButton");
exampleButton.onclick = () => {
if(callback)
callback(this._automation, this._viewer);
}
}
}
<!doctype html>
<html lang="en">
<title>AnnRenderingEngine Example | LoadPicture</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.Annotations.BatesStamp.js"></script>
<script src="../LT/Leadtools.Demos.js"></script>
<script src="../LT/Leadtools.Demos.Annotations.js"></script>
<style>
#imageViewerDiv {
border: 1px solid #000000;
width: 800px;
height: 800px;
background-color: #7F7F7F;
}
</style>
<!-- All demo files are bundled and appended to the window -->
<script src="../../bundle.js" type="text/javascript"></script>
</head>
<body>
<p>Either Pan/Zoom or Annotations mode. In annotations mode, draw new objects or edit them.</p>
<div>
<select id="currentObjectIdSelect"></select>
</div>
<div>
<input type="button" id="exampleButton" value="Example" />
<label id="exampleLabel" />
</div>
<div id="imageViewerDiv" />
</body>
<script>
window.onload = () => new window.examples.AnnRenderingEngine.LoadPicture();
</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
Your email has been sent to support! Someone should be in touch! If your matter is urgent please come back into chat.
Chat Hours:
Monday - Friday, 8:30am to 6pm ET
Thank you for your feedback!
Please fill out the form again to start a new chat.
All agents are currently offline.
Chat Hours:
Monday - Friday
8:30AM - 6PM EST
To contact us please fill out this form and we will contact you via email.