Working with Objects

ImageVObject

ImageVObject represents an image on Canvas. The following snippets demonstrate how to create ImageVObject on the server and client sides:

var image = new ImageVObject(Server.MapPath("input.png"));
image.Rectangle = new RotatedRectangleF(250.0f, 140.0f, 270.0f, 270.0f, 0.0f);
CanvasViewer1.Canvas.Layers[0].VObjects.Add(image);

var image = new Aurigma.GraphicsMill.AjaxControls.VectorObjects.ImageVObject("input.png");
image.set_rectangle(new Aurigma.GraphicsMill.AjaxControls.VectorObjects.Math.RotatedRectangleF(250, 140, 270, 270, 0));
canvasViewer.get_canvas().get_layers().get_item(0).get_vObjects().add(image);

Both snippets load a bitmap and then define the location of the object via the Rectangle property specifying coordinates of the object center, width, height, and angle. On the server side, AJAX Vector Objects provides different ImageVObject constructors that allow you to load images from different sources such as a GraphicsMill.Bitmap, FileInfo, stream, file in FileStorage, or remote URL. The client side API also allows you to load images from a URL. Let us see how to perform this on both sides:

var image = new ImageVObject(new Uri("http://upload.wikimedia.org/wikipedia/commons/0/0e/Gelinotte.jpg"));

var image = new Aurigma.GraphicsMill.AjaxControls.VectorObjects.ImageVObject("http://upload.wikimedia.org/wikipedia/commons/0/0e/Gelinotte.jpg");

After creating the object, you can easily replace the source image with another. For this purpose, AJAX Vector Objects provides two methods on the server side - ImageVObject.LoadImage() and ImageVObject.LoadImageFromRemoteUrl(Uri, Boolean, Boolean) loading new image from local or remote resources, respectively. Whereas, the client API has only the LoadImage method for loading an image.

The object size on Canvas depends on the Rectangle property defining RectangleVObject.Location, RectangleVObject.Width, and Height. Additionally, if you pass true as the actualSize and saveAspectRatio arguments in the method for loading an image to ImageVObject, this affects the object size too. The actualSize value allows you to choose whether the source image should preserve its original size or be inscribed into specified rectangle. Also, if you want to preserve the aspect ratio of the original image, you can do it by passing true in the saveAspectRatio argument. Note that the image always preserves the aspect ratio based on RectangleVObject.Width.

In addition, the method for loading an image to ImageVObject has the downloadToServerCache argument which forces AJAX Vector Objects to download the image from an external URL to local storage.

The following snippets demonstrate how to load an image and preserve its aspect ratio:

image.LoadImageFromRemoteUrl(new Uri("http://upload.wikimedia.org/wikipedia/commons/0/0e/Gelinotte.jpg"), false, true);

image.loadImage("http://upload.wikimedia.org/wikipedia/commons/0/0e/Gelinotte.jpg", 
    { actualSize: false, saveAspectRatio: true, downloadToServerCache: true });

The following image demonstrates the result:

If you specify both actualSize and saveAspectRatio to false, you will get the following result:

ImageVObject does not allow the users to crop loaded images on Canvas. However, AJAX Vector Objects provides the PlaceholderVObject class that does allow this. We will discuss how to work with PlaceholderVObject below.

Text

AJAX Vector Objects provides three different types of objects, namely, plain, bounded, and curved texts. The following image illustrates how each text type looks:

You can use both the plain and curved texts for headlining or labeling objects on a design, whereas the bounded text is designed to draw multiline text inside a rectangle, for instance if you need to draw a text paragraph on Canvas. Let us discuss how to work with these types of text on Canvas.

PlainTextVObject

PlainTextVObject represents the plain text on Canvas. When you create the object, you should specify text that will be displayed on Canvas, the coordinates of the object's base point (this point can be located on the left, center, or right side of the object depending on alignment as shown below), alignment, font name, and font size:

var plainText = new PlainTextVObject ("AJAX Vector Objects",
    new System.Drawing.PointF(200.0f, 50.0f), TextAlignment.Center, "Arial", 20.0f);
CanvasViewer1.Canvas.Layers[0].VObjects.Add(plainText);

var plainText = new Aurigma.GraphicsMill.AjaxControls.VectorObjects.PlainTextVObject(new Aurigma.GraphicsMill.AjaxControls.VectorObjects.Math.PointF(200, 50),
    Aurigma.GraphicsMill.AjaxControls.VectorObjects.TextAlignment.Center, "Arial", 20);
plainText.set_text("AJAX Vector Objects");
$find("<%= CanvasViewer1.ClientID %>").get_canvas().get_layers().get_item(0).get_vObjects().add(plainText);

If you specify \n symbols in the text, it will be divided by lines. However, unlike the text in BoundedTextVObject (see the next subparagraph), you cannot limit the width of the text in PlainTextVObject.

BoundedTextVObject

BoundedTextVObject represents the bounded text on Canvas. This object allows you to draw a text inside the specified rectangle, wherein the text will be divided by lines, if it is longer than the rectangle's width, or clipped, if the text does not fit vertically the rectangle. To create the object, you need to specify a string that will be displayed inside the rectangle, location of the rectangle on the workspace, font name, and font size. By default, BoundedTextVObject aligns the text along the left edge, but you can also change it:

var boundedText = new BoundedTextVObject("AJAX Vector Objects", 
    new System.Drawing.RectangleF(200.0f, 100.0f, 150.0f, 100.0f), "Arial", 20.0f);
boundedText.Alignment = TextAlignment.Center;
CanvasViewer1.Canvas.Layers[0].VObjects.Add(boundedText);

var boundedText = new Aurigma.GraphicsMill.AjaxControls.VectorObjects.BoundedTextVObject();
boundedText.set_text("AJAX Vector Objects");
boundedText.set_rectangle(new Aurigma.GraphicsMill.AjaxControls.VectorObjects.Math.RotatedRectangleF(200, 100, 150, 100));
boundedText.set_fontName("Arial");
boundedText.set_fontSize(20);
boundedText.set_alignment(Aurigma.GraphicsMill.AjaxControls.VectorObjects.TextAlignment.Center);
$find("<%= CanvasViewer1.ClientID %>").get_canvas().get_layers().get_item(0).get_vObjects().add(boundedText);

CurvedTextVObject

CurvedTextVObject represents the curved text on Canvas. This object draws a text on a curve specified as a vector path. Let us examine how to set such Path in AJAX Vector Objects.

First, we need to specify the first point, from which the curve will originate, using the Path.MoveTo(PointF) method. After this, we can draw the curve. AJAX Vector Objects provides several types of functions specifying curve segments:

• A straight line specified via the Path.LineTo(Single, Single) method. The method draws a line between the last point in the path and the new one:

  ASP.NET

  var path = new Path();
  path.MoveTo(10, 10);
  path.LineTo(new PointF(70, 60));
  

  JavaScript

  var path = new Aurigma.GraphicsMill.AjaxControls.VectorObjects.Math.Path();
  path.moveTo(10, 10);
  path.lineTo(70, 60);
  

  This snippet creates the curve, on which the text will be located, illustrated on the following graph:

  

• A quadratic Bezier curve specified via the Path.QuadraticTo(PointF, PointF) method. The method draws a curve that starts at point P0 and arrives at point P2 coming from the direction of point P1. Thus, to create a quadratic Bezier in AJAX Vector Objects you need to specify points P1 and P2, while point P0 is the last point in the path:

  ASP.NET

  path.MoveTo(new PointF(10, 60));
  path.QuadraticTo(40, 20, 70, 60);
  

  JavaScript

  path.moveTo(10, 60);
  path.quadraticTo(40, 20, 70, 60);
  

  The following graph illustrates the curve drawn by these snippets:

  

• A cubic Bezier curve specified via the Path.CubicTo(PointF, PointF, PointF) method. The method draws a curve that starts at point P0 and arrives at point P3 coming from the direction of points P1 and P2. As point P0 is the last point in the path, the method accepts the other three points as arguments:

  ASP.NET

  path.MoveTo(10, 60);
  path.CubicTo(40, 20, 70, 60, 100, 20);
  

  JavaScript

  path.moveTo(10, 60);
  path.cubicTo(40, 20, 70, 60, 100, 20);
  

  The following graph illustrates the curve:

  

To create CurvedTextVObject, you need to specify a string that will be displayed on Canvas, the path, font name, and font size:

var curvedText = new CurvedTextVObject("AJAX Vector Objects", path, "Arial", 28);
CanvasViewer1.Canvas.Layers[0].VObjects.Add(curvedText);

var curvedText = new Aurigma.GraphicsMill.AjaxControls.VectorObjects.CurvedTextVObject();
curvedText.set_text("AJAX Vector Objects");
curvedText.set_path(path);
curvedText.set_fontName("Arial");
curvedText.set_fontSize(20);
$find("<%= CanvasViewer1.ClientID %>").get_canvas().get_layers().get_item(0).get_vObjects().add(curvedText);

By default, if the text is bigger that the specified curve, it is cropped. However, if you set the FitToPath property to true, the font size will be automatically reduced so that the entire text will fit the curve.

Text Settings

All observed text objects have the same parameters specifying text settings. Let us examine some of them:

• TextColor sets the color of the text displayed on Canvas.
• Angle rotates the text object at the specified angle in degrees.
• BaseTextVObject.FontSize sets the size of the font used to display text in objects.

• BaseTextVObject.FontName sets the font for text. This method accepts varied standard fonts. However, if you need to use a custom font that is not registered on the web server, you can specify the directory containing the appropriate font in the Web.config file of your application:

  C#

  <configSections>
    <section name="Aurigma.GraphicsMill.AjaxControls.VectorObjects" type="System.Configuration.NameValueSectionHandler, System, Version=1.0.3300.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" />
  </configSections>
  <Aurigma.GraphicsMill.AjaxControls.VectorObjects>
  <add key="FontDirectory" value="~\App_Data\LotOfFonts" />
  </Aurigma.GraphicsMill.AjaxControls.VectorObjects>
  

  After this, you can simply pass the name of new font to the property:

  ASP.NET

  var text = new PlainTextVObject();
  text.Font.PostScriptName = "Adventure";
  

  JavaScript

  var text = new Aurigma.GraphicsMill.AjaxControls.VectorObjects.PlainTextVObject();
  text.set_fontName("Adventure");
  

• Alignment specifies text alignments. The client side API provides three types of alignment that can be specified by either words or numerical formats:

  • The Center or 1 value aligns text along the center,
  • The Left or 0 value aligns text along the left edge,
  • The Right or 2 value aligns text along the right edge.

  Remember that the server API accepts only words. On the picture below, you can see how alignment affects the text in BoundedTextVObject:

  

The following snippets illustrate the usage of all these settings:

text.TextColor = System.Drawing.Color.DarkGreen;
text.Angle = 45;
text.Font.Size = 26f;

text.Font.PostScriptName = "Times New Roman";
text.Alignment = TextAlignment.Center;

text.set_textColor("#006400");
text.set_angle(30);
text.set_fontSize(18);
text.set_fontName("Times New Roman");
text.set_alignment(1);

PlaceholderVObject

In the previous paragraphs, we learned how to create image and text objects on Canvas. Here we discuss how to crop an image or text.

AJAX Vector Objects provides PlaceholderVObject that allows you to specify a rectangle over an image or text and crop it. This object consists of two parts - crop bounds with a specified size and a content. The content can be loaded from ImageVObject, PlainTextVObject, BoundedTextVObject, or CurvedTextVObject. The following snippets illustrate how to create PlaceholderVObject that crops ImageVObject:

var image = new ImageVObject(Server.MapPath("input.png"));
var imageRectangle = new RotatedRectangleF(250.0f, 140.0f, 270.0f, 270.0f, 0.0f);
image.Rectangle = imageRectangle;
var placeholder = new PlaceholderVObject(image)
{
    Width = 200,
    Height = 200
};
CanvasViewer1.Canvas.Layers[0].VObjects.Add(placeholder);

var image = new Aurigma.GraphicsMill.AjaxControls.VectorObjects.ImageVObject("input.png");
image.set_rectangle(new Aurigma.GraphicsMill.AjaxControls.VectorObjects.Math.RotatedRectangleF(150, 140, 270, 270));
var placeholder = new Aurigma.GraphicsMill.AjaxControls.VectorObjects.PlaceholderVObject(
    new Aurigma.GraphicsMill.AjaxControls.VectorObjects.Math.RotatedRectangleF(200, 200, 200, 200));
placeholder.set_content(image);
canvasViewer.get_canvas().get_layers().get_item(0).get_vObjects().add(placeholder);

After launching these snippets you will get the same results:

At first glance, there is no difference between PlaceholderVObject and ImageVObject. However, once you select the created placeholder as the current object, you will get the following view:

If you click the Edit button in the center of the placeholder, you are able move the content, but the crop bounds remain fixed. This allows you change the part of the content that should be cropped:

After clicking the Done button, the changes will be applied.

You can switch PlaceholderVObject to the mode allowing a user to select what part of the content to crop out, in a programmatic way specifying the set_editing property to true on the client side.

In addition to object permissions described in the Layers and Objects article, PlaceholderVObject provides an extended list of members of the Permission class that allows you to forbid a user from performing specific actions:

SVG

AJAX Vector Objects provides SvgVObject that draws SVG images on Canvas. SVG, or Scalable Vector Graphics, is an open standard representing an XML-based vector image format. SVG is very popular standard among printing companies, because using it they may achieve mostly perfect graphic quality without even thinking of the zoom level or screen resolution.

SvgVObject has many advantages compared to ImageVObject discussed in the first paragraph. ImageVObject represents raster images; therefore, it always loses its quality after scaling. To avoid degradation of the image on Canvas, any time you scale the image AJAX Vector Objects sends requests to the server side, which creates a new copy of the image adapted to the modifications. This is different than SvgVObject where all manipulations are performed only on the client side, because vector objects are scalable and can be zoomed or resized with no distortion.

Here is how to create SvgVObject:

var svg = new SvgVObject(new System.IO.FileInfo(Server.MapPath("Images/bat.svg")),
                                 new PointF(10, 10));
CanvasViewer1.Canvas.Layers[0].VObjects.Add(svg);

Another advantage of SvgVObject is that you can change the elements in the loaded SVG image. For example, you can change the color of all graphic elements in the object using the StrokeColor property.

See Also

Reference

• ImageVObject Class
• ImageVObject.LoadImageFromRemoteUrl(Uri, Boolean, Boolean) Method
• PlainTextVObject Class
• BoundedTextVObject Class
• CurvedTextVObject Class
• Math.Path Class
• Path.MoveTo(PointF) Method
• Path.LineTo(Single, Single) Method
• Path.QuadraticTo(PointF, PointF) Method
• Path.CubicTo(PointF, PointF, PointF) Method
• PlaceholderVObject Class
• SvgVObject Class

Manual

• Layers and Objects