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