Section:

Annotation Rects & Quads

Annotations take up a certain amount of space on a document page. Their "body" in the document is commonly represented as a rectangle or an array of rectangles. These rectangles are provided as either a Rect or Quad object in WebViewer.

Most annotations will use a Rect as their body, whereas Quad objects are typically for annotations that mark up text. With a Quad, you can convert it to a Rect and vice-versa. With a Rect, you can get more information from the shape such as its dimensions or checking for intersections with other rectangles.

Rect

Most annotations will work with Rect objects. Specifically for resizing through the use of setRect.

JavaScript (SDK v7.0+)

1const { Core } = instance;
2const { Annotations, Math } = Core;
3const rectAnnot = new Annotations.RectangleAnnotation({
4    PageNumber: 1,
5    X: 0,
6    Y: 0,
7    Width: 100,
8    Height: 50,
9});
10const rect = rectAnnot.getRect();
11const width = rect.getWidth();
12rect.translate(5, 5); // Move right and down by 5 pixels
13rect.x2 *= 2;
14rectAnnot.setRect(rect);

Related Links

Collisions

There are two APIs for collision detection. You can use either intersect or contains with another rectangle to check if the two rectangle bodies overlap. The difference, however, is that contains strictly checks whether one rectangle is inside another.

JavaScript (SDK v7.0+)

1const { Core } = instance;
2const { Annotations } = Core;
3const rectAnnot1 = new Annotations.RectangleAnnotation({
4    X: 0,
5    Y: 0,
6    Width: 100,
7    Height: 50,
8});
9const rectAnnot2 = new Annotations.RectangleAnnotation({
10    X: 50,
11    Y: 50,
12    Width: 100,
13    Height: 50,
14});
15const rect1 = rectAnnot1.getRect();
16const rect2 = rectAnnot2.getRect();
17console.log(rect1.intersects(rect2)); // true
18console.log(rect1.contains(rect2));   // false

Related Links

TransformationBuilder

Occasionally, you may need to transform a rectangle a certain way or perhaps you need a special transformation for your custom annotation. In this case, you can transform a Rect with a Matrix.

However, matrices are difficult to work with and are not easily recognizable. WebViewer provides a TransformationBuilder to assist in building a transformation out. The operations you set with the TransformationBuilder is in the order you would perform them (not in reverse order).

JavaScript (SDK v7.0+)

1const { Core } = instance;
2const { Annotations, Math } = Core;
3const rectAnnot = new Annotations.RectangleAnnotation({
4    PageNumber: 1,
5    X: 0,
6    Y: 0,
7    Width: 100,
8    Height: 50,
9});
10const rect = rectAnnot.getRect();
11const centerPoint = rect.getCenterPoint();
12const builder = new Core.Math.TransformationBuilder();
13// Rotate with respect to annotation origin
14const transform = builder
15                    .translate(-centerPoint.X, -centerPoint.Y) // Move annot origin to 0,0
16                    .rotate(90)                                // Rotate 90 degrees
17                    .translate(centerPoint.X, centerPoint.Y)   // Translate back
18                    .getFinalTransform();
19rect.transform(transform);
20rectAnnot.setRect(rect);

Related Links

If you want to use the transformation matrix with the Canvas context, you can use the toTransform API on the Matrix to get an array of values to be used with setTransform on the context.

JavaScript (SDK v7.0+)

1ctx.setTransform(...transform.toTransform());

Related Links

Quad

Quads are commonly found with annotations that mark up text. In many of the cases, these annotations, like HighlightAnnotation, contain a list of Quad objects representing the lines of text that are marked.

JavaScript (SDK v7.0+)

1const { Core } = instance;
2const { Annotations, Math } = Core;
3const annot = new Annotations.TextHighlightAnnotation({
4    PageNumber: 1,
5    // This should actually be the location of actual text
6    Quads: [
7        new Math.Quad(
8            0, 50,      // Lower left
9            100, 50,    // Lower right
10            100, 0,     // Upper right
11            0, 0,       // Upper left
12        ),
13        // Annotation can have more quads representing additional lines of text
14    ],
15    StrokeColor: new Annotations.Color(255, 0, 0, 1),
16});

Related Links

Conversion between Rect

Quad objects are limited in functionality, but you can convert them to a Rect where you will gain access to its APIs. After you are done, you can convert it back to a Quad.

JavaScript (SDK v7.0+)

1const quad = new Math.Quad(
2    0, 50,      // Lower left
3    100, 50,    // Lower right
4    100, 0,     // Upper right
5    0, 0,       // Upper left
6);
7const rect = quad.toRect(); // Result is a rectangle 100w x 50h in the top left corner

Related Links

To convert it back:

JavaScript (SDK v7.0+)

1const otherQuad = rect.toQuad();

Related Links

Next steps

See how Rect and Quad objects are used in some of our annotation guides, specifically RectangleAnnotation and HighlightAnnotation!

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales