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.

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

const { Core } = instance;
const { Annotations, Math } = Core;
const rectAnnot = new Annotations.RectangleAnnotation({
    PageNumber: 1,
    X: 0,
    Y: 0,
    Width: 100,
    Height: 50,
});
const rect = rectAnnot.getRect();
const width = rect.getWidth();
rect.translate(5, 5); // Move right and down by 5 pixels
rect.x2 *= 2;
rectAnnot.setRect(rect);

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.

const { Core } = instance;
const { Annotations } = Core;
const rectAnnot1 = new Annotations.RectangleAnnotation({
    X: 0,
    Y: 0,
    Width: 100,
    Height: 50,
});
const rectAnnot2 = new Annotations.RectangleAnnotation({
    X: 50,
    Y: 50,
    Width: 100,
    Height: 50,
});
const rect1 = rectAnnot1.getRect();
const rect2 = rectAnnot2.getRect();
console.log(rect1.intersects(rect2)); // true
console.log(rect1.contains(rect2));   // false

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

const { Core } = instance;
const { Annotations, Math } = Core;
const rectAnnot = new Annotations.RectangleAnnotation({
    PageNumber: 1,
    X: 0,
    Y: 0,
    Width: 100,
    Height: 50,
});
const rect = rectAnnot.getRect();
const centerPoint = rect.getCenterPoint();
const builder = new Core.Math.TransformationBuilder();
// Rotate with respect to annotation origin
const transform = builder
                    .translate(-centerPoint.X, -centerPoint.Y) // Move annot origin to 0,0
                    .rotate(90)                                // Rotate 90 degrees
                    .translate(centerPoint.X, centerPoint.Y)   // Translate back
                    .getFinalTransform();
rect.transform(transform);
rectAnnot.setRect(rect);

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.

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

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.

const { Core } = instance;
const { Annotations, Math } = Core;
const annot = new Annotations.TextHighlightAnnotation({
    PageNumber: 1,
    // This should actually be the location of actual text
    Quads: [
        new Math.Quad(
            0, 50,      // Lower left
            100, 50,    // Lower right
            100, 0,     // Upper right
            0, 0,       // Upper left
        ),
        // Annotation can have more quads representing additional lines of text
    ],
    StrokeColor: new Annotations.Color(255, 0, 0, 1),
});

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.

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

To convert it back:

const otherQuad = rect.toQuad();

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