Some test text!

Overview
Documentation
All Products
Search
Downloads
Chat with us
Discord Logo
Hamburger Icon

Web / Guides / Rectangle

Rectangle Annotations

Rectangle annotations are one of the basic shapes for annotating. You can use this to box certain areas on a document to bring attention to them.

Rectangle annotations can have both a fill and stroke color. The stroke or border style can also be changed between a solid, dashed, or cloudy style.

Rectangle annotation

Instantiation

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

    documentViewer.addEventListener('annotationsLoaded', () => {
      const annot = new Annotations.RectangleAnnotation({
        PageNumber: 1,
        X: 100,
        Y: 50,
        Width: 150,
        Height: 25,
        StrokeColor: new Annotations.Color(0, 255, 0, 1), 
      });

      annotationManager.addAnnotation(annot);
      annotationManager.redrawAnnotation(annot);
    });
  });
XFDF
Element name: square
<square page="0" rect="252.100,604.080,331.510,659" color="#E44234" flags="print" name="7103e3a5-515e-9e61-007e-b595d3c754ce" title="Guest" subject="Rectangle" date="D:20220601141141-07'00'" creationdate="D:20220601141116-07'00'"/>
Required properties
PageNumber
Gets or sets the page number of a document that the annotation appears on.
X
Gets or sets the annotation's x-axis position.
Y
Gets or sets the annotation's y-axis position.
Height
Gets or sets the height of the annotation.
Width
Gets or sets the width of the annotation.
Notable properties
For the full list of properties, please visit the annotation's API docs.
FillColor
Gets or sets the color of the annotation's interior.
StrokeColor
Gets or sets the color of the annotation's stroke.
StrokeThickness
Gets or sets the width of the annotation's stroke outline.
Style
Gets or sets the border style of an annotation. Possible styles include:
  • solid
  • dash
  • cloudy
Dashes
Gets or sets the border dash style of an annotation. This expects a string representing the length of dashes and spacing inbetween, delimited by commas (ex. 3, 3). You can specify any amount of lengths but, an odd number of values will be made even by cloning it as a second set. To understand further, you can read more about the setLineDash API.
Intensity
Describes intensity of cloudy style effect. Use 0 for no effect.
Author
The author of the annotation.
Color
Gets or sets the annotation's stroke color.
Hidden
Gets or sets whether the annotation is hidden.
Invisible
Gets or sets whether the annotation is invisible, only if it is an unknown annotation type. Generally for hiding annotations you should use "Hidden".
IsClickableOutsideRect
Gets or sets whether any parts of the annotation drawn outside of the rect are clickable.
Listable
Gets or sets whether the annotation should be listed in annotation lists. If set to false, the annotation will also become unselectable.
Locked
Gets or sets whether the annotation is locked or not. If it's locked it can't be edited or deleted, but the note can be edited.
LockedContents
Gets or sets whether the annotation contents are locked or not. If the contents are locked then note can't be edited but the annotation can be edited or deleted.
NoDelete
Gets or sets if this annotation can be deleted.
NoMove
Gets or sets whether or not the annotation can be moved.
NoResize
Gets or sets if this annotation can be resized by the user.
NoRotate
Gets or sets if this annotation can be rotated.
NoView
Gets or sets whether the annotation is visible on the screen. Differs from Hidden in that it can still be printed if the print flag is set.
NoZoom
Gets or sets if this annotation scales with the page.
Opacity
Gets or sets the opacity of the annotation.
Printable
Gets or sets whether the annotation should be displayed when printing the page.
ReadOnly
Gets or sets whether the annotation is readonly or not. If it's readonly both the annotation itself and its note can't be edited or deleted.
ToggleNoView
Gets or sets whether the ToggleNoView flag is set on the annotation.
Useful methods
setRect
Although rectangle annotations have both move and resize APIs, it also provides a setRect API which effectively does both which makes it worthy to note.
WebViewer(...)
  .then(instance => {
    const { annotationManager, Annotations } = instance.Core;

    annotationManager.addEventListener('annotationChanged', (annotations, action) => {
      if (action === 'add') {
        annotations.forEach(annot => {
          if (annot instanceof Annotations.RectangleAnnotation) {
            const rect = annot.getRect();
            rect.X = Math.round(rect.X);
            rect.Y = Math.round(rect.Y);
            rect.Width = Math.round(rect.Width);
            rect.Height = Math.round(rect.Height);

            annot.setRect(rect);
          }
        });
      }
    });
  });
Alternative use cases
Rectangle annotations can be used as placeholders to be replaced with something else. In WebViewer, the form builder uses rectangles to represent certain forms fields, and swapping them out for the actual form field widget annotations after pressing Apply Fields.
To check whether an annotation is a form field placeholder, you can check with the isFormFieldPlaceholder API.
Trial setup questions? Ask experts on Discord
Need other help? Contact Support
Pricing or product questions? Contact Sales