LoadPicture Event

JavaScript

add_loadPicture(function(sender, e))
loadPicture.add(function(sender, e))
remove_loadPicture(function(sender, e))
loadPicture.remove(function(sender, e))

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: 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());
},

Parameter	Type	Description
sender	'var'	The source of the event.
e	AnnLoadPictureEventArgs	The event data.

Reference

AnnRenderingEngine Object
AnnRenderingEngine Members