How to draw text on JavaScript rectangle annotation?

In This Topic

This tutorial shows how to override the drawing algorithm of the JavaScript rectangle annotation view.

First, it is necessary to create custom annotation view - WebRedactionAnnotationViewJS, which is derived from WebRectangleAnnotationViewJS class, and override the drawing algorithm of annotation view.
Here is JavaScript code of WebRedactionAnnotationViewJS class:

JavaScript

/**
 Determines how to display the annotation that displays redaction and how user can interact with annotation.
*/
WebRedactionAnnotationViewJS = function () {

    WebRedactionAnnotationViewJS.superclass.constructor.call(this);

    this.set_FillBrush(Vintasoft.Imaging.Annotation.UI.WebAnnotationBrushJS(1, "rgba(0,0,0,1)"));



    /**
     Gets annotation type.
    */
    WebRedactionAnnotationViewJS.prototype.get_Type = function () {
        return "RedactionAnnotation";
    }



    /**
     Draws an annotation on the canvas drawing context in the coordinate space of annotation.
    */
    WebRedactionAnnotationViewJS.prototype.drawInContentSpace = function (drawingContext, canvasToAnnotationTransform) {
        var drawInContentSpaceResult = WebRedactionAnnotationViewJS.superclass.drawInContentSpace.call(this, drawingContext, canvasToAnnotationTransform);

        drawingContext.save();

        var rectSize = this.get_Size();
        var textHeight = 35;

        drawingContext.font = '48px serif';
        drawingContext.strokeText("Redaction", -rectSize.width / 2, -rectSize.height / 2 + textHeight);

        drawingContext.restore();

        return drawInContentSpaceResult;
    }

}
Vintasoft.Shared.extend(WebRedactionAnnotationViewJS, Vintasoft.Imaging.Annotation.UI.WebRectangleAnnotationViewJS);

Next, it is necessary to register custom JavaScript annotation in annotation factory.
Here is JavaScript code that shows how to register custom JavaScript annotation in JavaScript annotation factory:

JavaScript

Vintasoft.Imaging.Annotation.UI.WebAnnotationViewFabricJS.registerAnnotation("RedactionAnnotation", function () { return new WebRedactionAnnotationViewJS(); });

Finally, it is necessary to create an instance of WebRedactionAnnotationView class and add created annotation to the web annotation viewer.
Here is JavaScript code that shows how to create JavaScript redaction annotation and add it to the web annotation viewer:

JavaScript

// create JavaScript redaction annotation
var redactionAnno = new WebRedactionAnnotationViewJS();
redactionAnno.set_Location(318, 264);
redactionAnno.set_Size(250, 200);

// get annotation visual tool from annotation viewer
_annotationVisualTool = annotationViewer1.get_AnnotationVisualTool();
// add created annotation to the focused image
_annotationVisualTool._focusedCollection.add(redactionAnno);

Send Feedback