Measure Arc

The arc measurement tool can be used to draw curves and arcs to measure the arc length of the user selected shape.

There are two types of arc measurement tools: curve measurement tools and arc measurement tools. -After selecting the curve measurement tool, the user can use the pointer to click on the starting and ending points, then drag the two control points in the middle to achieve the desired curvature, and measure the arc length between the starting and ending points. -The arc measurement tool requires users to click on three control points, namely the starting point, midpoint (the point on the arc), and endpoint, to draw an arc. The measurement results include radius, arc length, and angle.

After configuring the measurement properties, you can create an arc length measurement annotation by following these steps:

1. Set the tool type to measurement annotation creation mode.
2. Obtain the default properties of the corresponding measurement tool (if creating a curve measurement, use Tools.ToolNames.CURVE_MEASUREMENT; if creating an arc measurement, use Tools.ToolNames.ARC_MEASUREMENT), and attach the default properties and the Measure of the tool to the measurement annotation when creating. Create the measurement annotation with the corresponding class in Annotations and add it using the addAnnotation method of annotationManager.

Create curve measurement

The following is an example code for creating a curve measurement annotation:

ComPDFKitViewer(...)
  .then(instance => {
    const { documentViewer, annotationManager, Annotations, Tools } = instance.Core;

    documentViewer.addEventListener('documentLoaded', async () => {
        // Enter the curve measurement annotation creation mode.
        instance.UI.setToolbarGroup('toolbarGroup-Measure');
        instance.UI.setToolMode(Tools.ToolNames.CURVE_MEASUREMENT);

        // Set default measurement properties for the annotation.
        const curveTool = documentViewer.getTool(Tools.ToolNames.CURVE_MEASUREMENT);
        const { StrokeColor, StrokeThickness, Opacity, Font, FontSize } = curveTool.defaults;

        const annotation = new Annotations.FreeHandAnnotation({
            PageNumber: 1,
            StrokeColor,
            StrokeThickness,
            Opacity,
            Font,
            FontSize
        });
        annotation.Measure = { ...curveTool.Measure };
        // The start point, the two control points and the end point of the curve.
        annotation.setCurveControlPoints([
            new Annotations.Point(106, 366),
            new Annotations.Point(200, 440),
            new Annotations.Point(288, 323),
            new Annotations.Point(390, 367)
        ]);

        // Create a measurement annotation.
        await annotationManager.addAnnotation(annotation);
        // Render the annotation.
        annotationManager.drawAnnotationsFromList([annotation]);
    });
  });

Create arc measurement

The following is an example code for creating a arc measurement annotation:

ComPDFKitViewer(...)
  .then(instance => {
    const { documentViewer, annotationManager, Annotations, Tools } = instance.Core;

    documentViewer.addEventListener('documentLoaded', async () => {
        // Enter the arc measurement annotation creation mode.
        instance.UI.setToolbarGroup('toolbarGroup-Measure');
        instance.UI.setToolMode(Tools.ToolNames.ARC_MEASUREMENT);

        // Set default measurement properties for the annotation.
        const arcTool = documentViewer.getTool(Tools.ToolNames.ARC_MEASUREMENT);
        const { StrokeColor, StrokeThickness, Opacity, Font, FontSize } = arcTool.defaults;

        const annotation = new Annotations.ArcAnnotation({
            PageNumber: 1,
            StrokeColor,
            StrokeThickness,
            Opacity,
            Font,
            FontSize
        });
        annotation.Measure = { ...arcTool.Measure };
        annotation.setMeasurementDisplayOptions(arcTool.getDefaultMeasurementDisplayOptions());
        // The start point, a point on the arc and the end point.
        annotation.setPath([
            new Annotations.Point(92, 225),
            new Annotations.Point(233, 169),
            new Annotations.Point(143, 98)
        ]);

        // Create a measurement annotation.
        await annotationManager.addAnnotation(annotation);
        // Render the annotation.
        annotationManager.drawAnnotationsFromList([annotation]);
    });
  });