Configuring CanvasViewer Control

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 RectangleVObject.BorderColor properties, respectively. The following snippet demonstrates how to perform this:

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.

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:

CanvasViewer1.ScrollBarsStyle = 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:

CanvasViewer1.ScrollingPosition = new System.Drawing.Point(70, 70);

$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:

//1 inch = 72 pt, 1 inch = 2.54 cm
CanvasViewer1.RulerScale = 2.54f / 72.0f;

$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:

CanvasViewer1.RulerOffsetX = -50;
CanvasViewer1.RulerOffsetY = -50;

$find("<%= CanvasViewer1.ClientID %>").set_rulerOffsetX(-50);
$find("<%= CanvasViewer1.ClientID %>").set_rulerOffsetY(-50);

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

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:

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
};
CanvasViewer1.Canvas.Layers[0].VObjects.Add(grid);

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:

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:

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

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:

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:

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:

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;

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:

See Also

Reference

• ScrollBarsStyle Property
• ScrollingPosition Property
• RulerEnabled Property
• RulerScale Property
• GridVObject Class
• DashedLineVObject Class

Manual

• Canvas and CanvasViewer Control
• Layers and Objects