This documentation is for the old version. Go to the latest Graphics Mill docs

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.

Prerequisites

In addition to system requirements applied to Graphics Mill for .NET, ASP.NET AJAX Vector Objects require to have ASP.NET 2.0 AJAX Extensions 1.0 to be installed on server. You can download it from http://go.microsoft.com/fwlink/?LinkID=77296.

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

    Visual Studio New Web Site Dialog
  2. Add CanvasViewer to the toolbox:

  3. Right-click on the tab of toolbox where you want to add this control and select Choose Items....
  4. Find the CanvasViewer in the .NET Framework Components tab.
  5. 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.
  6. Visual Studio Choose Toolbox Items Dialog
  7. Open the Default.aspx page in the Design mode, then drag and drop the CanvasViewer control into the desired position.

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

    Visual Studio Form Designer
  9. 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>
  10. 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:

  11. 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);
    
  12. 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;
    
  13. 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;
    
  14. 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;
    
  15. 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);
    
  16. 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"));
        }
    }
    
  17. 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.

    AJAX Vector Objects Sample
  18. See Also

    Reference

    Manual