Basic Concepts of AJAX Vector Objects

Architecture

From the user's point of view, AJAX Vector Objects is a fast and easy-to-use cross-browser control allowing to edit graphical designs, annotate or draw different objects over images interactively in a browser. They do not need to install any plug-ins or players (like Flash player or Silverlight), all they need is just to open a page and start to work.

For the developer, AJAX Vector Objects is a set of controls which can be used in a straight-forward way just as the other ASP.NET controls. They can be easily embedded in an existing AJAX application as well as application based on Graphics Mill AJAX Controls.

In accordance with AJAX technique, all the objects of this module have both server-side and client-side implementations. Thus, interactions with objects and layers such as adding and removing layers and objects, hiding them, moving, rotating, and resizing objects are accessible on the client-side through the JavaScript API.

The architecture of this module can be diagrammatized as follows:

Figure 1. AJAX Vector Objects Architecture

Here we can highlight four levels, namely controls, canvas, layers, and v-objects. Let us consider them from the point of view of theirs interaction and mission performance. The detailed information on how to use these objects in your application is provided in the How to Use AJAX Vector Objects topic.

Controls

Controls, in accordance with the scheme above, represent a top level and are intended to display multi-layered images. There are two controls provided by AJAX Vector Objects module - CanvasViewer and BitmapViewer + VObjectsRubberband bundle. They both allow similar functionality - display multi-layered images on a web page and receive user input as well as allow zooming and scrolling content. CanvasViewer is optimized to operate multi-layered images. However, if you need to operate with objects over a single image (for example, adding annotations) use BitmapViewer + VObjectsRubberband combination instead.

Canvas

Canvas is the main logical part of the control. It contains and manages layers, provides access to the currently selected objects, configures color management, and allows undoing and redoing user actions. On the other hand, the canvas allows saving its state into a file and then restoring the state from it for further editing. This feature is called serialization and described more comprehensively in the How to Use AJAX Vector Objects topic. One more useful feature provided by this class is the ability to render its content as a bitmap, for example to make a thumbnail for user-created postcard or save its printable copy. See the section below for details.

Layers

A Layer is a logical union of objects. Layers stored in the canvas are organized in an array. The order of layers in this array defines the Z-order in which these layers will be displayed on the canvas. The lesser value the layer index equals to, the lower is the layer. Layers can be rearranged, locked or made invisible. Additionally, you can set boundaries for a layer. For instance, when developing a business card editor you can define an area where users will be able to place a logo.

V-Objects

As we can see from the diagram before objects (in terms of AJAX Vector Objects they are called v-objects) are the lowest level. V-objects are contained within a layer and can be moved, rotated, and resized on its surface interactively by users (using mouse or keyboard) or programmatically via API. V-objects associated with a particular layer are organized in an array. The order of v-objects in this array defines theirs Z-order in the same manner as the order of layers. AJAX Vector Objects module comes with the following v-objects:

• Bitmaps (ImageVObject);
• Lines and polylines (LineVObject and PolylineVObject, respectively);
• Ellipses (EllipseVObject);
• Rectangles (RectangleVObject);
• Text blocks (TextVObject and PsdTextVObject).

As mentioned before, v-objects can be transformed. In terms of AJAX Vector Objects these transformations are called actions and can be performed by users using special control points displayed over an object when it is currently selected. Here is the list of supported actions: translate, rotate and resize (arbitrary and proportional).

Rendering Composite Images into Bitmap.

As mentioned above, AJAX Vector Objects allows saving multi-layered images as a bitmap in one of the graphic formats supported by Graphics Mill for .NET, for instance JPEG or TIFF. Moreover you can set resolution and color space of the result bitmap. It would be very useful if you need to create two copies of a user-designed collage: the first one (RGB with 72 DPI) for displaying in a web gallery and the second one (CMYK with 300 DPI) for printing.

Interactions between Server and Client Objects

Each of the considered objects comes in both server-side and client-side implementations. Interactions between these parts are performed using postbacks. Postback occurs whenever the state of server-side part of the object is changed or it can be initiated on the client-side; it flows as follows. The current state of the object is sent to the server for processing and then, the updated state is posted back to the client.

Client-side implementation is based on JavaScript and allows you to avoid unnecessary postbacks by modifying objects locally on the client. Thus, the best practice is to handle actions like adding, removing, and changing v-objects on the client-side to increase performance of the application. Then, if you call some server-side method, for example render a printable copy of a collage generated by user; it initiates a postback to send current state of all objects in the browser to the server-side.

However, not all the v-object modifications can be performed client-side. For example, adding text block as well as modifying its font, size, and so on can be performed server-side only.

See Also

Reference

• CanvasViewer Class
• VObjectsRubberband Class
• Canvas Class
• Layer Class
• ImageVObject Class
• RectangleVObject Class
• EllipseVObject Class
• TextVObject Class

Manual

• Quick Start in AJAX Vector Objects
• How to Use AJAX Vector Objects
• Gift Editor Demo Overview