Radius Annotation in ASP.NET Core PDF Viewer

14 Aug 20267 minutes to read

Radius measurement annotations allow users to draw circular regions and calculate the radius visually.

Radius overview

Enable Radius Measurement

In the ASP.NET Core PDF Viewer, annotation modules such as Radius annotation are enabled by default.

<div style="width:100%;height:650px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:650px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib">
    </ejs-pdfviewer>
</div>

Add Radius Annotation

Add Radius Using the Toolbar

  1. Open the Annotation Toolbar.
  2. Select Measurement → Radius.
  3. Click and drag on the page to draw the radius.

Measurement toolbar

NOTE

If Pan mode is active, selecting the Radius tool automatically switches interaction mode.

Enable Radius Mode

Programmatically switch the viewer into Radius mode.

<script>
function enableRadiusMode() {
  var viewer = document.getElementById('pdfviewer').ej2_instances[0];
  viewer.annotation.setAnnotationMode('Radius');
}
</script>

Exit Radius Mode

<script>
function exitRadiusMode() {
  var viewer = document.getElementById('pdfviewer').ej2_instances[0];
  viewer.annotation.setAnnotationMode('None');
}
</script>

Add Radius Programmatically

Use the addAnnotation API to add a Radius measurement at a specific location.

<script>
function addRadius() {
  var viewer = document.getElementById('pdfviewer').ej2_instances[0];
  viewer.annotation.addAnnotation('Radius', {
    offset: { x: 200, y: 630 },
    pageNumber: 1,
    width: 90,
    height: 90
  });
}
</script>

Customize Radius Appearance

<div style="width:100%;height:650px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:650px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib">
    </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('pdfviewer').ej2_instances[0];
  viewer.radiusSettings = { fillColor: 'yellow', strokeColor: 'orange', opacity: 0.6 };
}
</script>

Manage Radius (Move, Reshape, Edit, Delete)

  • Move: Drag inside the polygon to reposition it.
  • Reshape: Drag any vertex handle to adjust points and shape.

Edit Radius Annotation

Edit Radius (UI)

  • Edit the fill color using the Edit Color tool.
    Fill color
  • Edit the stroke color using the Edit Stroke Color tool.
    Stroke color
  • Edit the border thickness using the Edit Thickness tool.
    Thickness
  • Edit the opacity using the Edit Opacity tool.
    Opacity
  • Open Right Click → Properties for additional line‑based options.
    Line properties

Edit Radius Programmatically

Update properties and call editAnnotation().

<script>
function editRadiusProgrammatically() {
  var viewer = document.getElementById('pdfviewer').ej2_instances[0];
  for (var i = 0; i < viewer.annotationCollection.length; i++) {
    var ann = viewer.annotationCollection[i];
    if (ann.subject === 'Radius calculation') {
      ann.strokeColor = '#0000FF';
      ann.thickness = 2;
      ann.opacity = 0.8;
      viewer.annotation.editAnnotation(ann);
      break;
    }
  }
}
</script>

Delete Radius Annotation

Delete Radius Annotation via UI (toolbar/context menu) or programmatically. For supported workflows and APIs, see Delete Annotation.

Set Default Properties During Initialization

Apply defaults for Radius using the radiusSettings property.

<div style="width:100%;height:650px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:650px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib">
    </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('pdfviewer').ej2_instances[0];
  viewer.radiusSettings = { fillColor: 'orange', opacity: 0.6, strokeColor: 'pink' };
}
</script>

Set Properties While Adding Individual Annotation

Apply defaults for Radius using the radiusSettings property.

<script>
function addStyledRadius() {
  var viewer = document.getElementById('pdfviewer').ej2_instances[0];
  viewer.annotation.addAnnotation('Radius', {
    offset: { x: 200, y: 630 },
    pageNumber: 1,
    width: 90,
    height: 90,
    fillColor: 'orange',
    opacity: 0.6,
    strokeColor: 'pink'
  });
}
</script>

Scale Ratio & Units

  • Use Scale Ratio from the context menu.
    Scale ratio
  • Supported units: Inch, Millimeter, Centimeter, Point, Pica, Feet.
    Scale dialog

Set Default Scale Ratio During Initialization

Configure scale defaults using measurementSettings.

<div style="width:100%;height:650px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:650px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib">
    </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('pdfviewer').ej2_instances[0];
  viewer.measurementSettings = { scaleRatio: 2, conversionUnit: 'cm', displayUnit: 'cm' };
}
</script>

Handle Radius Events

Listen to annotation life-cycle events (add/modify/select/remove). For the full list and parameters, see Annotation Events.

Export and Import

Radius measurements can be exported or imported with other annotations. For workflows and supported formats, see Export and Import annotations.

See Also