Shape Class

An instance of this class represents a shape defined through a series of arc, line and Bézier segments. The segments can be a part of the shape outline, in which case they define the part of the shape is filled, used for hit-testing and for aligning links to the node edges. Segments can also be added as decoration elements, in which case they only affect the appearance of a ShapeNode.

Namespace: MindFusion.Diagramming
Package: MindFusion.Diagramming

 Syntax

C#

public class Shape : ICloneable, IPersists

Visual Basic

Public Class Shape
    Implements ICloneable, IPersists

 Remarks

Shape Definitions

The Shape class provides the means for defining complex node shapes. With its help you can design any shape composed of lines, arcs and Bézier-curves. A shape template should contain an outline to be used for hit testing, clipping and finding intersections with other items. If the outline is not defined, the rectangle specified by the Bounds property of nodes is used for hit-testing. Optionally, shapes can contain decoration elements and text region definitions. Decorations are visual elements that do not take part in clipping, and are used for hit-testing only if DecorationHitTesting is enabled. Text regions are the parts of shapes in which node's text is laid out and rendered.

Predefined Shapes

MindFusion.Diagramming for WebForms provides a set of about 100 predefined shape templates accessible through the static Shapes collection and the FromId method of Shape. A shape template can be applied to a node by assigning it to the Shape property of shape nodes. The predefined shapes are also exposed as properties of the Shapes class.

Custom Shapes

There are several Shape constructor overrides you might choose from, depending on the complexity of the shapes you want to create. They take arrays of ElementTemplate objects as arguments, which define the outline, decorations and text region definitions. Templates are described with coordinates expressed as percents of a shape node's area. It is also possible to associate an image with a shape definition by means of the Image property and to define the area in which the image is displayed by ImageRectangle.

Dynamic Shapes

Shapes defined via ElementTemplate objects are scaled proportionally to the size of nodes. If shape elements should scale non-uniformly, use the Shape(formula) constructor to define shapes through Visio-like formulas that take into consideration the current width and height of nodes. Another constructor takes a CreatePathDelegate parameter that can be used to define shapes via .NET functions.

A formula shape can be parameterized by adding ShapeControlPoint objects to the shape's ControlPoints collection. The control point positions are passed as arguments to the shape scripts, where they can be used to modify the node's appearance. For example, the following code defines a rounded rectangle shape, whose corner radius can be modified by users via the control point.

C#

// a rounded rectangle shape, with an arc at each corner
string roundRect = @"
    r = Min(Width / 2, radius.X);
    MoveTo(r, 0);
    LineTo(Width - r, 0);
    ArcTo(Width, r, false, false, r, r);
    LineTo(Width, Height - r);
    ArcTo(Width - r, Height, false, false, r, r);
    LineTo(r, Height);
    ArcTo(0, Height - r, false, false, r, r);
    LineTo(0, r);
    ArcTo(r, 0, false, false, r, r);
    ";

var myRect = new Shape(roundRect, "MyRect");

// add a control point for the 'radius' parameter
myRect.ControlPoints.Add(new ShapeControlPoint(
    "radius", 5, 1, 15, UnitType.Fixed, 0, 0, 0, UnitType.Fixed));

Shape Libraries

The ShapeDesigner tool included in the MindFusion.Diagramming for WebForms suite lets you draw custom shapes and store them in shape libraries. A library file can be loaded into your application using the ShapeLibrary class. The definitions loaded from a shape library are automatically added to the Shapes collection and can be accessed through the FromId method, just as the predefined shapes.

Link Arrowheads

A Shape instance can be assigned to the HeadShape, BaseShape or IntermediateShape properties of a DiagramLink. When used for arrowheads, position (50, 0) in the shape definition corresponds to the arrowhead's tip point. Several predefined arrowhead shapes are provided as static properties of the ArrowHeads class.

 Example

Here is how the DirectAccessStorage shape is defined in the MindFusion.Diagramming for WebForms source code:

C#

new Shape(

    // Outlines
    new ElementTemplate[]
    {
        new LineTemplate(10, 0, 90, 0),
        new ArcTemplate(80, 0, 20, 100, -90, 180),
        new LineTemplate(90, 100, 10, 100),
        new ArcTemplate(0, 0, 20, 100, 90, 180)
    },

    // Decorations
    new ElementTemplate[]
    {
        new ArcTemplate(0, 0, 20, 100, -90, 180)
    },

    // Text area
    new ElementTemplate[]
    {
        new LineTemplate(10, 0, 90, 0),
        new ArcTemplate(80, 0, 20, 100, -90, 180),
        new LineTemplate(90, 100, 10, 100),
        new BezierTemplate(10, 100, 35, 66, 35, 33, 10, 0)
    },

    FillMode.Winding, "DirectAccessStorage");

Visual Basic

New Shape( _
    New ElementTemplate() _
    { _
        New LineTemplate(10, 0, 90, 0), _
        New ArcTemplate(80, 0, 20, 100, -90, 180), _
        New LineTemplate(90, 100, 10, 100), _
        New ArcTemplate(0, 0, 20, 100, 90, 180) _
    }, _
    New ElementTemplate() _
    { _
        New ArcTemplate(0, 0, 20, 100, -90, 180) _
    }, _
    New ElementTemplate() _
    { _
        New LineTemplate(10, 0, 90, 0), _
        New ArcTemplate(80, 0, 20, 100, -90, 180), _
        New LineTemplate(90, 100, 10, 100), _
        New BezierTemplate(10, 100, 35, 66, 35, 33, 10, 0) _
    }, _
    FillMode.Winding, "DirectAccessStorage")

 Inheritance Hierarchy

System.Object
    MindFusion.Diagramming.Shape