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