Configuring CanvasViewer Control

Note

You can refer to the web-to-print solution based on AJAX Vector Objects, Customer's Canvas. You can consider it as a ready-to-use editor that you may want to embed into your website or as an example demonstrating how AJAX Vector Objects can be used for your needs.

Here we will discuss how to configure the appearance of the following elements:

Configuring CanvasViewer Colors

As CanvasViewer is an ASP.NET control, its color settings are only adjusted on the server side. You can change the background and border colors of CanvasViewer via the BackColor and BorderColor properties, respectively. The following snippet demonstrates how to perform this:

C#
CanvasViewer1.BackColor = System.Drawing.Color.Azure;
CanvasViewer1.BorderColor = System.Drawing.Color.Blue;

When the content becomes less than the viewport, the CanvasViewer background will be filled with the color blue as shown on the picture below. If you are not familiar with these concepts, read the Canvas and CanvasViewer Control topic.

CanvasViewer Colors Configuring

Configuring Scrollbars

Scrollbars are elements of CanvasViewer, therefore they can be configured only on the server side. However, if the scrollbars are enabled, AJAX Vector Objects allows you to specify the position of the sliders on both sides. First, here is how to enable the scrollbars. There are two modes of displaying scrollbars specified via the ScrollBarsStyle property: Always when scrollbars are always shown and Auto when scrollbars are automatically hidden if the content becomes bigger than the viewport. The following snippet demonstrates how to set the scrollbars to the Always mode:

C#
CanvasViewer1.ScrollBarsStyle = Aurigma.GraphicsMill.AjaxControls.ScrollBarsStyle.Always;

Now, for the position of the scrollbar sliders. The position of the sliders defines a visible area of the content in the viewport. The current positions of the sliders are specified via the ScrollingPosition property that works on both the client and server sides. The vertical slider can be moved in the range from 0 to (ContentHeight - Height + ScrollBarWidth), while horizontal - from 0 to (ContentWidth - Width + ScrollBarWidth). The following snippets illustrate how to change the position of the sliders:

C#
CanvasViewer1.ScrollingPosition = new System.Drawing.Point(70, 70);
JavaScript
$find("<%= CanvasViewer1.ClientID %>").set_scrollingPosition(new Sys.UI.Point(70, 70));

Configuring Rulers

Rulers are the bars displayed on the top and left sides of the CanvasViewer which are used as a reference in making measurements. Though the rulers are elements of CanvasViewer, AJAX Vector Objects allows you to configure the rulers both on the client and server sides. To enable the rulers just set the RulerEnabled property to true. By default, the ruler dimension is represented in points. However, you can change it by specifying the ruler's scale via the RulerScale property. For example, the following snippets demonstrate how to specify the ruler dimension in centimeters:

C#
//1 inch = 72 pt, 1 inch = 2.54 cm
CanvasViewer1.RulerScale = 2.54f / 72.0f;
JavaScript
$find("<%= CanvasViewer1.ClientID %>").set_rulerScale(2.54 / 72.0);

The rulers measure the width and height of CanvasViewer starting from zero by default. You can change the starting positions using the RulerOffsetX and RulerOffsetY properties for the vertical and horizontal rulers, respectively. The following snippets show how to move the rulers to 50:

C#
CanvasViewer1.RulerOffsetX = -50;
CanvasViewer1.RulerOffsetY = -50;
JavaScript
$find("<%= CanvasViewer1.ClientID %>").set_rulerOffsetX(-50);
$find("<%= CanvasViewer1.ClientID %>").set_rulerOffsetY(-50);

After launching any of these snippets, you will get the following result:

Rulers Configuring

Configuring Grid

The grid becomes very helpful when you need to position objects on Canvas precisely or symmetrically. AJAX Vector Objects provides GridVObject that appears as the grid on the workspace. As the grid serves only to help the users to locate objects, GridVObject is locked so that they cannot change it using the mouse or keyboard.

Configuring the grid, you can specify how many horizontal and vertical grid lines you want to draw on Canvas via the Cols and Rows properties. You can also change spacing between grid lines specifying the StepX and StepY properties in points. In addition, you can adjust the width of the grid lines using the LineWidth property, wherein this property is specified in pixels if the FixedLineWidth property is set to true. Otherwise, LineWidth is in points.

The following snippets demonstrate how to create the grid:

C#
int step = 15;
var grid = new GridVObject(){
    StepX = step,
    StepY = step,
    Cols = Convert.ToInt32(CanvasViewer1.Canvas.WorkspaceWidth / step),
    Rows = Convert.ToInt32(CanvasViewer1.Canvas.WorkspaceHeight / step),
    LineWidth = 0.5f,
    FixedLineWidth = true,
    LineColor = System.Drawing.Color.Gray
};
CanvasViewer1.Canvas.Layers[0].VObjects.Add(grid);
JavaScript
var canvas = $find("<%= CanvasViewer1.ClientID %>").get_canvas();
var step = 15;
var grid = new Aurigma.GraphicsMill.AjaxControls.VectorObjects.GridVObject(
    0, 0, canvas.get_workspaceWidth(), canvas.get_workspaceHeight(), step, step);
grid.set_lineWidth(0.5);
grid.set_fixedLineWidth(true);
grid.set_lineColor("#808080");
canvas.get_layers().get_item(0).get_vObjects().add(grid);

After launching these snippets, you will get the following view:

Grid Configuring
Note

Remember that AJAX Vector Objects will not hide the grid automatically when it renders the resulting image. If you need to hide GridVObject, set the Visible property to false before rendering.

Configuring Safety Lines

All printed products are cut out during the fulfillment process. Safety lines are special lines displayed on the design. If an object is located inside the safe area bordered by the safety lines, they will prevent the object from getting cut off. Therefore, adding the safety lines to Canvas is important and it helps users to make sure that important information will remain on the product after being printed.

As a rule, the safety lines are dashed lines drawn 1/4'' (18 points) inside the product on each side. For creating the safety lines, you draw four dashed lines using DashedLineVObject. This object allows you to adjust such line settings as the gap between dashes via the AltDashWidth property, the dash width via the DashWidth property, and the line width via the Width property.

The following snippets demonstrate how to create the safety lines:

C#
int dash = 10, trimming = 18;
Func<PointF, PointF, DashedLineVObject> createDashedLine = (p1, p2) => new DashedLineVObject(p1, p2)
{
    AltDashWidth = dash,
    DashWidth = dash,
    Width = 0.5f,
    Color = System.Drawing.Color.Red
};
var dashedLines = new List<DashedLineVObject>();
dashedLines.Add(createDashedLine(new PointF(trimming, trimming), new PointF(CanvasViewer1.Canvas.WorkspaceWidth - trimming, trimming)));
dashedLines.Add(createDashedLine(new PointF(trimming, trimming), new PointF(trimming, CanvasViewer1.Canvas.WorkspaceHeight - trimming)));
dashedLines.Add(createDashedLine(new PointF(CanvasViewer1.Canvas.WorkspaceWidth - trimming, trimming),
    new PointF(CanvasViewer1.Canvas.WorkspaceWidth - trimming, CanvasViewer1.Canvas.WorkspaceHeight - trimming)));
dashedLines.Add(createDashedLine(new PointF(trimming, CanvasViewer1.Canvas.WorkspaceHeight - trimming),
    new PointF(CanvasViewer1.Canvas.WorkspaceWidth - trimming, CanvasViewer1.Canvas.WorkspaceHeight - trimming)));
foreach (var line in dashedLines)
    CanvasViewer1.Canvas.Layers[0].VObjects.Add(line);
JavaScript
var settings = function (vObject) {
    var dash = 10;
    vObject.set_altDashWidth(dash);
    vObject.set_dashWidth(dash),
    vObject.set_width(0.5),
    vObject.set_color("#FF0000");
    return vObject;}

var canvas = $find("<%= CanvasViewer1.ClientID %>").get_canvas();
var trimming = 18;
var safetyLines = [new Aurigma.GraphicsMill.AjaxControls.VectorObjects.DashedLineVObject(trimming, 
        trimming, canvas.get_workspaceWidth() - trimming, trimming),
    new Aurigma.GraphicsMill.AjaxControls.VectorObjects.DashedLineVObject(trimming, 
        trimming, trimming, canvas.get_workspaceHeight() - trimming),
    new Aurigma.GraphicsMill.AjaxControls.VectorObjects.DashedLineVObject(canvas.get_workspaceWidth() - trimming, 
        trimming, canvas.get_workspaceWidth() - trimming, canvas.get_workspaceHeight() - trimming),
    new Aurigma.GraphicsMill.AjaxControls.VectorObjects.DashedLineVObject(trimming, 
        canvas.get_workspaceHeight() - trimming, canvas.get_workspaceWidth() - trimming, canvas.get_workspaceHeight() - trimming)];
safetyLines.forEach(function (entry) {
     canvas.get_layers().get_item(0).get_vObjects().add(settings(entry));} );

These snippets produce the same result:

Safety Lines Configuring

Configuring Grips and Selection Frame

As we discussed in the Layers and Objects topic, a current object is the currently selected object on Canvas that has a special selection frame delineating it, and control grips allowing a user to rotate or resize it. By default, the current object looks as follows:

The Current Object

AJAX Vector Objects allows you to configure the grips and selection frame by changing their color and size. The following snippets demonstrate usage of all properties that affect the grips and selection:

C#
CanvasViewer1.Canvas.RotationGripColor = Color.FromGdiPlusColor(System.Drawing.Color.Yellow);
CanvasViewer1.Canvas.RotationGripSize = 10;

CanvasViewer1.Canvas.RotationGripLineColor = Color.FromGdiPlusColor(System.Drawing.Color.Green);
CanvasViewer1.Canvas.RotationGripLineLength = 15;

CanvasViewer1.Canvas.SelectionColor = Color.FromGdiPlusColor(System.Drawing.Color.Green);
CanvasViewer1.Canvas.SelectionWidth = 4;

CanvasViewer1.Canvas.ResizeGripLineColor = Color.FromGdiPlusColor(System.Drawing.Color.Gold);

CanvasViewer1.Canvas.ResizeGripColor = Color.FromGdiPlusColor(System.Drawing.Color.Yellow);
CanvasViewer1.Canvas.ResizeGripSize = 4;
JavaScript
var canvas = $find("<%= CanvasViewer1.ClientID %>").get_canvas();
canvas.set_rotationGripColor("#FFFF00");
canvas.set_rotationGripSize(10);

canvas.set_rotationGripLineColor("#008000");
canvas.set_rotationGripLineLength(15);

canvas.set_selectionColor("#008000");
canvas.set_selectionWidth(4);

canvas.set_resizeGripLineColor("#FFD700");

canvas.set_resizeGripColor("#FFFF00");
canvas.set_resizeGripSize(4);

After launching any of these snippets, the current object will look as follows:

The Current Object

See Also

Reference

Manual