How to add custom property to the JavaScript rectangle annotation?
In This Topic
This tutorial shows how to add custom property to the JavaScript rectangle annotation.
First, it is necessary to create custom annotation data, which is derived from
Vintasoft.Imaging.Annotation.RectangleAnnotationData class, and add custom property to the new class.
Here is C# code of RedactionAnnotationData class:
/// <summary>
/// Contains information about the annotation that displays redaction (black rectangle with redaction reason).
/// </summary>
public class RedactionAnnotationData : Vintasoft.Imaging.Annotation.RectangleAnnotationData
{
/// <summary>
/// Initializes a new instance of the <see cref="RedactionAnnotationData"/> class.
/// </summary>
public RedactionAnnotationData()
: base()
{
this.FillBrush = new Vintasoft.Imaging.Annotation.AnnotationSolidBrush(Color.Black);
}
/// <summary>
/// Initializes a new instance of the <see cref="RedactionAnnotationData"/> class.
/// </summary>
/// <param name="info">The SerializationInfo to populate with data.</param>
/// <param name="context">The destination for this serialization.</param>
public RedactionAnnotationData(System.Runtime.Serialization.SerializationInfo info, System.Runtime.Serialization.StreamingContext context)
: base(info, context)
{
Reason = (string)info.GetValue("Reason", typeof(string));
}
string _reason;
/// <summary>
/// Gets or sets the redaction reason.
/// </summary>
public string Reason
{
get { return _reason; }
set { _reason = value; }
}
/// <summary>
/// Creates a new object that is a copy of the current RedactionAnnotationData instance.
/// </summary>
/// <returns>A new object that is a copy of this RedactionAnnotationData instance.</returns>
public override object Clone()
{
var result = new RedactionAnnotationData();
CopyTo(result);
result.Reason = Reason;
return result;
}
/// <summary>
/// Populates a SerializationInfo with the data needed to serialize the target object.
/// </summary>
/// <param name="info">The SerializationInfo to populate with data.</param>
/// <param name="context">The destination for this serialization.</param>
[System.Security.Permissions.SecurityPermission(System.Security.Permissions.SecurityAction.LinkDemand, Flags = System.Security.Permissions.SecurityPermissionFlag.SerializationFormatter)]
public override void GetObjectData(System.Runtime.Serialization.SerializationInfo info, System.Runtime.Serialization.StreamingContext context)
{
info.AddValue("Reason", Reason);
base.GetObjectData(info, context);
}
}
Next, it is necessary to create a custom formatter for serializing annotations to and from Vintasoft JSON format.
Here is C# code of CustomAnnotationJsonFormatter class that allows to serialize RedactionAnnotationData class:
/// <summary>
/// Represents a custom formatter for serializing annotations to and from Vintasoft JSON format.
/// </summary>
public class CustomAnnotationJsonFormatter : Vintasoft.Imaging.Annotation.Web.Services.AnnotationJsonFormatter
{
/// <summary>
/// Serializes an annotation data to a JSON string.
/// </summary>
/// <param name="annotationData">Annotation data to serialize.</param>
/// <returns>
/// The annotation data as JSON string.
/// </returns>
protected override string SerializeAnnotationData(Vintasoft.Imaging.Annotation.AnnotationData annotationData)
{
// get JSON string with information about properties of base annotation data
string jsonAnnotation = base.SerializeAnnotationData(annotationData);
System.Text.StringBuilder sb = new System.Text.StringBuilder(jsonAnnotation);
// if redaction annotation is serializing
else if (annotationData is RedactionAnnotationData)
{
RedactionAnnotationData redactionAnnotation = annotationData as RedactionAnnotationData;
sb.Append(", ");
SerializeRectangleAnnotationData(annotationData as Vintasoft.Imaging.Annotation.RectangleAnnotationData, sb);
sb.Append(", ");
sb.Append(string.Format("\"reason\": \"{0}\" ", redactionAnnotation.Reason));
sb.Append(", ");
sb.Append(string.Format("\"type\": \"{0}\"", "RedactionAnnotation"));
}
// return annotation data serialized as JSON string
return sb.ToString();
}
/// <summary>
/// Deserializes an annotation data from JSON string
/// </summary>
/// <param name="annotationInfo">Dictionary that contains information about names and values
/// of annotation properties.</param>
/// <returns>
/// The annotation data.
/// </returns>
protected override Vintasoft.Imaging.Annotation.AnnotationData DeserializeAnnotationData(
System.Collections.Generic.Dictionary<string, object> annotationInfo)
{
// deserialize annotation data
Vintasoft.Imaging.Annotation.AnnotationData annotationData = base.DeserializeAnnotationData(annotationInfo);
// if annotation data was not deserialized
if (annotationData == null)
{
if (annotationInfo != null && annotationInfo.ContainsKey("type"))
{
string type = annotationInfo["type"].ToString();
switch (type)
{
case "RedactionAnnotation":
annotationData = new RedactionAnnotationData();
(annotationData as RedactionAnnotationData).Reason = annotationInfo["reason"].ToString();
DeserializeRectangleAnnotationProperties((Vintasoft.Imaging.Annotation.RectangleAnnotationData)annotationData, annotationInfo);
break;
}
}
}
// return annotation data
return annotationData;
}
}
Next, it is necessary to create custom annotation API controller that uses CustomAnnotationJsonFormatter class
for serializing annotations.
Here is C# code of custom annotation API controller:
/// <summary>
/// API controller that handles HTTP requests from clients and allows to manipulate annotations on server.
/// </summary>
public class AnnotationApiController : Vintasoft.Imaging.Annotation.Web.Api2Controllers.VintasoftAnnotationCollectionApi2Controller
{
public AnnotationApiController()
: base()
{
// set the custom annotation formatter
Formatter = new CustomAnnotationJsonFormatter();
}
}
Next, it is necessary to create custom annotation view - WebRedactionAnnotationView, which is derived from
WebRectangleAnnotationViewJS class, and add custom property to the new class.
Here is JavaScript code of WebRedactionAnnotationViewJS class:
/**
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)"));
this._reason = "";
/**
Gets annotation type.
*/
WebRedactionAnnotationViewJS.prototype.get_Type = function () {
return "RedactionAnnotation";
}
/**
Gets the redaction reason.
*/
WebRedactionAnnotationViewJS.prototype.get_Reason = function () {
return this._reason;
}
/**
Sets the redaction reason.
*/
WebRedactionAnnotationViewJS.prototype.set_Reason = function (value) {
this._reason = value;
}
/**
Copies the state of the current annotation to the target annotation.
*/
WebRedactionAnnotationViewJS.prototype.copyTo = function (target) {
WebRedactionAnnotationViewJS.superclass.copyTo.call(this, target);
target._reason = this._reason;
}
/**
Returns a JSON-object for annotation serialization.
*/
WebRedactionAnnotationViewJS.prototype.serialize = function () {
var annotationCopy = WebRedactionAnnotationViewJS.superclass.serialize.call(this);
annotationCopy["type"] = this.get_Type();
annotationCopy["reason"] = this._reason;
return annotationCopy;
}
/**
Deserializes annotation.
*/
WebRedactionAnnotationViewJS.prototype.deserialize = function (jsonObject) {
WebRedactionAnnotationViewJS.superclass.deserialize.call(this, jsonObject);
this._reason = jsonObject.reason;
}
}
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 to how register custom JavaScript annotation in JavaScript annotation factory:
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 to how create JavaScript redaction annotation and add it to the web annotation viewer:
// create JavaScript redaction annotation
var redactionAnno = new WebRedactionAnnotationViewJS();
redactionAnno.set_Location(318, 264);
redactionAnno.set_Size(250, 200);
redactionAnno.set_Reason("Accept");
// get annotation visual tool from annotation viewer
_annotationVisualTool = annotationViewer1.get_AnnotationVisualTool();
// add created annotation to the focused image
_annotationVisualTool._focusedCollection.add(redactionAnno);