---

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:

                 ////////////////////////////////////////////////////////////////////////////////
                 // 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:

                    // 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:

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