loadPicture Event (AnnRenderingEngine)

Summary

Occurs when a picture object has been finished loading its source image.

Syntax

JavaScript Syntax

Object.defineProperty(AnnRenderingEngine.prototype,'loadPicture',  
	get: function(), 
	set: function(value) 
) 
function loadPicture.add(function(sender, e)); 
function loadPicture.remove(function(sender, e));

TypeScript Syntax

loadPicture: void;

Remarks

AnnLoadPictureEventArgs

In the LEADTOOLS Annotation framework, the source image in picture objects is not loaded till render time. For example, when you first render an annotation object that contains a picture, such as the AnnHotspotObject or AnnPointObject, the framework will load the image in AnnPicture.Source in the background. While the image is loading, the framework will use a placeholder rectangle to render the object position and size. When the image is fully loaded, the framework will fire the LoadPicture event and renders the new image instead of the placeholder.

LoadingPictureStroke and LoadingPictureFill are the objects to use for stroking and filling the placeholder rectangle. Default values are a white stroke on a black background.

The LoadPicture event contains data about the picture that finished loading such as the Picture object itself and the owner AnnObject. Also, the event data contains the Error property that will be populated if an error occurred.

Loading an image in the background is an efficient and easy way to start drawing an annotation object without waiting for all the resources to be available in the browser. This is especially true if the object contains a picture with a source URL on a server machine and takes a few seconds to download.

Example

This example will create a picture from a resource in a remote server and use it with a hotspot annotation object. It will then uses automation to start drawing the object as the image is being loaded.

JavaScript Example

example: function SiteLibrary_DefaultPage$example() { 
   // get the current rendering engint 
   var renderingEngine = this._automation.get_automationControl().get_renderingEngine(); 
 
   // Change the default loading object placeholder to be a green border with semi-transparent background 
   var stroke = lt.Annotations.Core.AnnStroke.create(lt.Annotations.Core.AnnSolidColorBrush.create("green"), lt.LeadLengthD.create(1)); 
   var fill = lt.Annotations.Core.AnnSolidColorBrush.create("rgba(0, 0, 0, 0.5)"); 
 
   renderingEngine.set_loadingPictureStroke(stroke); 
   renderingEngine.set_loadingPictureFill(fill); 
 
   // Hook to the LoadPicture event 
   renderingEngine.add_loadPicture(function(sender, e) { 
      // e is AnnLoadPictureEventArgs 
      // Check if an error occured 
      if (e.get_error() != null) { 
         // Show info about the error 
         var str = e.get_error().message; 
         str += "\nSource: " + e.get_picture().get_source(); 
         str += "\nOwner object: " + e.get_annObject().get_friendlyName(); 
         alert(str); 
      } 
   }); 
 
   // Create a new AnnHotspotObject with a picture from a remote server 
   var inch = 720; 
   var hotspot = new lt.Annotations.Core.AnnHotspotObject(); 
   // Add the object at location 1,1 inch with size 4,2 inches 
   hotspot.set_rect(lt.LeadRectD.create(1 * inch, 1 * inch, 4 * inch, 2 * inch)); 
   // Set its picture 
   var picture = new lt.Annotations.Core.AnnPicture(); 
   picture.set_source("https://www.leadtools.com/images/page_graphics/leadlogo.png"); 
   hotspot.set_picture(picture); 
 
   // Add it to the container 
   var container = this._automation.get_container(); 
   container.get_children().add(hotspot); 
 
   this._automation.invalidate(lt.LeadRectD.get_empty()); 
},