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.

In Visual Studio 2005 create new ASP.NET AJAX-Enabled Web Site (menu File -> New Web Site...).
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.
Open the Default.aspx page in the Design mode, then drag and drop the CanvasViewer control into the desired position.
Drag and drop the Button ASP.NET control and change its name to Save.

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>

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

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:

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)

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

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

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;

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

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;

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

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;

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)

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

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

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"));
    }
}

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.

Quick Start in AJAX Vector Objects

See Also

Reference

Manual