Как добавить пользовательское свойство к прямоугольной JavaScript-аннотации?
В этом разделе
В этом руководстве показано, как добавить пользовательское свойство к прямоугольной JavaScript-аннотации.
Сначала необходимо создать пользовательские данные аннотации - класс RedactionAnnotationData, который наследуется от класса Vintasoft.Imaging.Annotation.RectangleAnnotationData, и добавить пользовательское свойство в новый класс.
Вот C# код класса RedactionAnnotationData:
/// <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);
}
}
Затем необходимо создать пользовательский форматтер для сериализации аннотаций в формат Vintasoft JSON и обратно.
Вот C# код класса CustomAnnotationJsonFormatter, который позволяет сериализовать класс RedactionAnnotationData:
/// <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;
}
}
Далее необходимо создать пользовательский API-контроллер аннотаций, который использует класс CustomAnnotationJsonFormatter для сериализации аннотаций.
Вот C# код пользовательского API-контроллера аннотаций:
/// <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();
}
}
Затем необходимо создать пользовательское представление аннотации - класс WebRedactionAnnotationView, который наследуется от класса
WebRectangleAnnotationViewJS, и добавить пользовательское свойство в новый класс.
Вот JavaScript код класса WebRedactionAnnotationViewJS:
/**
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);
Далее необходимо зарегистрировать пользовательскую JavaScript-аннотацию в фабрике JavaScript-аннотаций.
Вот JavaScript код, показывающий, как зарегистрировать пользовательскую JavaScript-аннотацию в фабрике JavaScript-аннотаций:
Vintasoft.Imaging.Annotation.UI.WebAnnotationViewFabricJS.registerAnnotation("RedactionAnnotation", function () { return new WebRedactionAnnotationViewJS(); });
Наконец, необходимо создать экземпляр класса WebRedactionAnnotationView и добавить созданную аннотацию в веб просмотрщик изображений с аннотациями.
Вот JavaScript-код, который демонстрирует, как создать JavaScript Redaction-аннотацию и добавить ее в веб просмотрщик аннотаций:
// 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);