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 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; 

Help Version 20.0.2018.10.24
Products | Support | Contact Us | Copyright Notices
© 1991-2018 LEAD Technologies, Inc. All Rights Reserved.

LEADTOOLS HTML5 JavaScript