Quick Start in AJAX Vector Objects

This topic describes how to get started with AJAX Vector Objects module of Aurigma Graphics Mill 5.5 for .NET and provides step-by-step instructions on how to create a simple web application. Suppose this application includes a web page that hosts a special viewport control which displays an editable composite image and a button which saves this image on a server as a bitmap. The composite image consists of three elements, namely a background image, rectangle, and text.

1. In Visual Studio 2005 create new ASP.NET AJAX-Enabled Web Site (menu File -> New Web Site...).

   

2. Add CanvasViewer to the toolbox:

   1. Right-click on the tab of toolbox where you want to add this control and select Choose Items....
   2. Find the CanvasViewer in the .NET Framework Components tab.
   3. If you cannot find this component, click Browse... and find the Aurigma.GraphicsMill.AjaxControls.VectorObjects.dll assembly. Then click OK on both Open and Choose Toolbox Items dialogs.
   

3. Open the Default.aspx page in the Design mode, then drag and drop the CanvasViewer control into the desired position.

4. Drag and drop the Button ASP.NET control and change its name to Save.

   

5. Edit the control properties:

   • The Width and Height properties specify the size of the control area.
   • The ZoomMode property specifies a zooming behavior of the control. Here we set the BestFit value which calculates zoom settings automatically so that entire image could fit the control.

   Specify the size of the Canvas associated with this control using the WorkspaceWidth and WorkspaceHeight properties.

   ASP.NET

   <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AJAXVectorObjectsCS._Default" %>
   <%@ Register Assembly="Aurigma.GraphicsMill.AjaxControls.VectorObjects" Namespace="Aurigma.GraphicsMill.AjaxControls" TagPrefix="cc1" %>
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   
   <html xmlns="http://www.w3.org/1999/xhtml" >
   <head runat="server">
       <title>AJAX Vector Objects Sample</title>
   </head>
   <body>
       <form id="form1" runat="server">
           <asp:ScriptManager ID="ScriptManager1" runat="server" />
   		<div>
   			<cc1:CanvasViewer ID="CanvasViewer1" runat="server" Width="400" Height="300" 
   				ZoomMode="BestFit">
   				<Canvas ID="Canvas" WorkspaceWidth="400" WorkspaceHeight="300" />
   			</cc1:CanvasViewer>
   		</div>
           <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Save" />
       </form>
   </body>
   </html>

6. Open the file which contains the code behind of this page (Default.aspx.vb or Default.aspx.cs) and implement the Page_Load event handler.

   Visual Basic

   Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
       If Not Page.IsPostBack Then
           ' Your code
       End If
   End Sub

   C#

   protected void Page_Load(object sender, EventArgs e)
   {
       if (!Page.IsPostBack)
       {
           // Your code
       }
   }

   According to requirements of our sample application we should display several v-objects. To do it we need to create a layer which will host these objects. So, this code should perform the following steps:

   1. Create a Layer object and add it to the Canvas.Layers collection.

      Visual Basic

      Dim layer As New Aurigma.GraphicsMill.AjaxControls.VectorObjects.Layer()
      CanvasViewer1.Canvas.Layers().Add(layer)

      C#

      Aurigma.GraphicsMill.AjaxControls.VectorObjects.Layer layer = new 
          Aurigma.GraphicsMill.AjaxControls.VectorObjects.Layer();
      CanvasViewer1.Canvas.Layers.Add(layer);

   2. Create an ImageVObject from the existing bitmap. This v-object is used to be a background of the designed collage. So, we need to set its size to occupy the Canvas workspace. Additionally, we lock this v-object to make it impossible to change its size or position.

      Visual Basic

      Dim bitmap As New Aurigma.GraphicsMill.Bitmap(Server.MapPath("background.png"))
      Dim image As New Aurigma.GraphicsMill.AjaxControls.VectorObjects.ImageVObject(bitmap, False)
      
      ' Resize this image to fit the Canvas
      Dim rect As Aurigma.GraphicsMill.AjaxControls.VectorObjects.Math.RotatedRectangleF = image.Rectangle
      rect.Width = CanvasViewer1.Canvas.WorkspaceWidth
      rect.Height = CanvasViewer1.Canvas.WorkspaceHeight
      rect.Location = New Aurigma.GraphicsMill.AjaxControls.VectorObjects.Math.PointF(0, 0)
      image.Rectangle = rect
      image.Locked = True

      C#

      Aurigma.GraphicsMill.AjaxControls.VectorObjects.ImageVObject image = new 
          Aurigma.GraphicsMill.AjaxControls.VectorObjects.ImageVObject
          (new Aurigma.GraphicsMill.Bitmap(Server.MapPath("background.png")), false);
      
      // Resize this image to fit the Canvas
      Aurigma.GraphicsMill.AjaxControls.VectorObjects.Math.RotatedRectangleF rect = image.Rectangle;
      rect.Width = CanvasViewer1.Canvas.WorkspaceWidth;
      rect.Height = CanvasViewer1.Canvas.WorkspaceHeight;
      rect.Location = new Aurigma.GraphicsMill.AjaxControls.VectorObjects.Math.PointF(0, 0);
      image.Rectangle = rect;
      image.Locked = true;

   3. Create a TextVObject and specify its text string, color, and font size.

      Visual Basic

      Dim text As New Aurigma.GraphicsMill.AjaxControls.VectorObjects.TextVObject()
      text.Text = "Sample text"
      text.Location = New Aurigma.GraphicsMill.AjaxControls.VectorObjects.Math.PointF(rect.Width / 2, rect.Height / 2)
      text.Alignment = Aurigma.GraphicsMill.AjaxControls.VectorObjects.TextAlignment.Center
      text.TextColor = System.Drawing.Color.Indigo
      text.FontSize = 38

      C#

      Aurigma.GraphicsMill.AjaxControls.VectorObjects.TextVObject text = new 
          Aurigma.GraphicsMill.AjaxControls.VectorObjects.TextVObject();
      text.Text = "Sample text";
      text.Location = new Aurigma.GraphicsMill.AjaxControls.VectorObjects.Math.PointF(rect.Width / 2, rect.Height / 2);
      text.Alignment = Aurigma.GraphicsMill.AjaxControls.VectorObjects.TextAlignment.Center;
      text.TextColor = System.Drawing.Color.Indigo;
      text.FontSize = 38;

   4. Create a RectangleVObject and specify its color, border, and rotation angle.

      Visual Basic

      Dim rectangle As New Aurigma.GraphicsMill.AjaxControls.VectorObjects.RectangleVObject(100, 70, 100, 150)
      rectangle.Angle = 45
      rectangle.BorderWidth = 0
      rectangle.FillColor = System.Drawing.Color.Orange

      C#

      Aurigma.GraphicsMill.AjaxControls.VectorObjects.RectangleVObject rectangle = new
          Aurigma.GraphicsMill.AjaxControls.VectorObjects.RectangleVObject(100, 70, 100, 150);
      rectangle.Angle = 45;
      rectangle.BorderWidth = 0;
      rectangle.FillColor = System.Drawing.Color.Orange;

   5. Add these objects to the Layer.VObjects collection in the order they should be placed on this layer.

      Visual Basic

      layer.VObjects.Add(image)
      layer.VObjects.Add(rectangle)
      layer.VObjects.Add(text)

      C#

      layer.VObjects.Add(image);
      layer.VObjects.Add(rectangle);            
      layer.VObjects.Add(text);

7. Add the Button1_Click event handler and implement the rendering of result image here:

   Visual Basic

   Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
       Dim bitmap As Aurigma.GraphicsMill.Bitmap = CanvasViewer1.Canvas.RenderWorkspace(72, _
           Aurigma.GraphicsMill.ColorSpace.Rgb)
       bitmap.Save(Server.MapPath("tmp.jpg"))
       bitmap.Dispose()
   End Sub

   C#

   protected void Button1_Click(object sender, EventArgs e)
   {
       using (Aurigma.GraphicsMill.Bitmap bitmap = CanvasViewer1.Canvas.RenderWorkspace(72, Aurigma.GraphicsMill.ColorSpace.Rgb))
       {
           bitmap.Save(Server.MapPath("tmp.jpg"));
       }
   }

8. Run the application (menu Debug -> Start Without Debugging or Ctrl+F5 shortcut). The page with the CanvasViewer control will appear. Check that the control contains three v-objects (an image, rectangle, and text) and both the rectangle and text v-objects can be rotated and dragged, however, the background image is locked. Also click the Save button and check that content of the control is rendered to a bitmap and saved on a server.