Implementing User Defined Thumb Styles With LEADTOOLS Annotations

Summary

With LEADTOOLS Annotations, you can create your own custom thumbs (control points). You can create custom styles for the location, rotate center and rotate gripper thumbs.

To implement a user defined thumb style, you need to create a class that implements the IAnnThumbStyle interface. Then, you need to assign your custom thumb style class to an IAnnObjectRenderersee> interface, which will then use your custom thumb style when rendering annotation objects.

The following example demonstrates how to create a custom thumbs for an annotation object. Start with the example that you created in Implementing User-Defined Objects With LEADTOOLS Annotations.

First, create a new class, derived from the base class AnnThumbStyle, and override the AddPath method:

JavaScript Example

//////////////////////////////////////////////////////////////////////////////// 
// AnnTriangleThumbStyle 
AnnTriangleThumbStyle = function AnnTriangleThumbStyle() { 
   AnnTriangleThumbStyle.initializeBase(this); 
} 
AnnTriangleThumbStyle.prototype = { 
   // override the AddPath method and draw our custom thumb 
   addPath: function AnnTriangleThumbStyle$addPath(context, rect) { 
      //AnnTriangleThumbStyle.callBaseMethod(this, 'addPath', [context, rect]); 
      if (context != null) { 
         context.moveTo(rect.get_left(), rect.get_bottom()); 
         context.lineTo(rect.get_left() + rect.get_width() / 2, rect.get_top()); 
         context.lineTo(rect.get_right(), rect.get_bottom()); 
         context.lineTo(rect.get_left(), rect.get_bottom()); 
      } 
   } 
} 
AnnTriangleThumbStyle.registerClass('AnnTriangleThumbStyle', lt.Annotations.Rendering.AnnThumbStyle);

Next, assign your custom thumb style class to the annotation object renderer. Replace the following code in the createTriangleAutomationObject function:

JavaScript Example

// set up the thumbs 
var annTriangleRenderer = new AnnTriangleRenderer(); 
var annPolylineRenderer = lt.Annotations.Core.AnnRenderingEngine.get_renderers()[lt.Annotations.Core.AnnObject.polylineObjectId]; 
annTriangleRenderer.set_locationsThumbStyle(annPolylineRenderer.get_locationsThumbStyle()); 
annTriangleRenderer.set_rotateCenterThumbStyle(annPolylineRenderer.get_rotateCenterThumbStyle()); 
annTriangleRenderer.set_rotateGripperThumbStyle(annPolylineRenderer.get_rotateGripperThumbStyle());

With the following:

JavaScript Example

// Create the custom thumbs and assign them to the renderer 
var locationThumb = new AnnTriangleThumbStyle(); 
// Set the properties for the thumb 
locationThumb.set_size(lt.LeadSizeD.create(72 * 2, 72 * 2)); 
locationThumb.set_stroke(lt.Annotations.Core.AnnStroke.create(lt.Annotations.Core.AnnSolidColorBrush.create("black"), lt.LeadLengthD.create(1))); 
locationThumb.set_fill(lt.Annotations.Core.AnnSolidColorBrush.create("rgba(0,0,255,.5)")); 
annTriangleRenderer.set_locationsThumbStyle(locationThumb); 
                
var rotateCenterThumb = new AnnTriangleThumbStyle(); 
// Set the properties for the thumb 
rotateCenterThumb.set_size(lt.LeadSizeD.create(72, 72)); 
rotateCenterThumb.set_stroke(lt.Annotations.Core.AnnStroke.create(lt.Annotations.Core.AnnSolidColorBrush.create("black"), lt.LeadLengthD.create(1))); 
rotateCenterThumb.set_fill(lt.Annotations.Core.AnnSolidColorBrush.create("rgba(255,0,0,.9)")); 
annTriangleRenderer.set_rotateCenterThumbStyle(rotateCenterThumb); 
                
var rotateGripperThumb = new AnnTriangleThumbStyle(); 
// Set the properties for the thumb 
rotateGripperThumb.set_size(lt.LeadSizeD.create(72 * 2, 72 * 2)); 
rotateGripperThumb.set_stroke(lt.Annotations.Core.AnnStroke.create(lt.Annotations.Core.AnnSolidColorBrush.create("black"), lt.LeadLengthD.create(1))); 
rotateGripperThumb.set_fill(lt.Annotations.Core.AnnSolidColorBrush.create("rgba(0,255,0,.3)")); 
annTriangleRenderer.set_rotateGripperThumbStyle(rotateGripperThumb);