Implementing User Defined Thumb Styles With LEADTOOLS Annotations

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 IAnnObjectRenderer 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.

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

   JavaScript

   //////////////////////////////////////////////////////////////////////////////// 
   // 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.left, rect.bottom); 
   			context.lineTo(rect.left + rect.width / 2, rect.top); 
   			context.lineTo(rect.right, rect.bottom); 
   			context.lineTo(rect.left, rect.bottom); 
   		} 
   	} 
   } 
    
   AnnTriangleThumbStyle.registerClass('AnnTriangleThumbStyle', lt.Annotations.Rendering.AnnThumbStyle); 

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

   JavaScript

   // Set up the thumbs 
   var annTriangleRenderer = new AnnTriangleRenderer(); 
   var annPolylineRenderer = renderingEngine.renderers[lt.Annotations.Engine.AnnObject.polylineObjectId]; 
   annTriangleRenderer.locationsThumbStyle = annPolylineRenderer.locationsThumbStyle; 
   annTriangleRenderer.rotateCenterThumbStyle = annPolylineRenderer.rotateCenterThumbStyle; 
   annTriangleRenderer.rotateGripperThumbStyle = annPolylineRenderer.rotateGripperThumbStyle; 

   With the following:

   JavaScript

   // Create the custom thumbs and assign them to the renderer 
   var annTriangleRenderer = new AnnTriangleRenderer(); 
    
   // Customize the location thumb style 
   var locationThumb = new AnnTriangleThumbStyle(); 
   locationThumb.size = lt.LeadSizeD.create(72 * 2, 72 * 2); 
   locationThumb.stroke = lt.Annotations.Engine.AnnStroke.create(lt.Annotations.Engine.AnnSolidColorBrush.create("black"), lt.LeadLengthD.create(1)); 
   locationThumb.fill = lt.Annotations.Engine.AnnSolidColorBrush.create("rgba(0,0,255,.5)"); 
   annTriangleRenderer.locationsThumbStyle = locationThumb; 
    
   // Customize the rotation thumb style 
   var rotateCenterThumb = new AnnTriangleThumbStyle(); 
   rotateCenterThumb.size = lt.LeadSizeD.create(72, 72); 
   rotateCenterThumb.stroke = lt.Annotations.Engine.AnnStroke.create(lt.Annotations.Engine.AnnSolidColorBrush.create("black"), lt.LeadLengthD.create(1)); 
   rotateCenterThumb.fill = lt.Annotations.Engine.AnnSolidColorBrush.create("rgba(255,0,0,.9)"); 
   annTriangleRenderer.rotateCenterThumbStyle = rotateCenterThumb; 
    
   // Customize the rotation gripper thumb style 
   var rotateGripperThumb = new AnnTriangleThumbStyle(); 
   rotateGripperThumb.size = lt.LeadSizeD.create(72 * 2, 72 * 2); 
   rotateGripperThumb.stroke = lt.Annotations.Engine.AnnStroke.create(lt.Annotations.Engine.AnnSolidColorBrush.create("black"), lt.LeadLengthD.create(1)); 
   rotateGripperThumb.fill = lt.Annotations.Engine.AnnSolidColorBrush.create("rgba(0,255,0,.3)"); 
   annTriangleRenderer.rotateGripperThumbStyle = rotateGripperThumb;