Circles, ellipses, rectangles, polygons, shape paths (like hexagon), polylines, and gridlines form the core of advanced visual designs. Use these shapes to create intricate graphics in mobile and desktop applications. Combine and manipulate these elements to produce detailed designs. Select shapes from the Components Panel, then drag and drop them into the drawing area.
Circle
Plots a continuous curve equidistant from a central point. Creates a symbol of unity and continuity, often used in various graphical representations.
Ellipse
Plots an elongated circle, defined by two focal points. Creates shapes for illustrating orbits in astronomy or lenses in physics.
Path (Hexagon and others)
Path implements composed vector graphics. Exxmple; Hexagon plots a six-sided figure with equal-length sides and angles. Creates structures resembling honeycombs in nature and is used in tiling and mosaics.
Rectangle
Plots a four-sided figure with opposite sides parallel and equal. Creates a basis for numerous design and architectural elements, offering simplicity and symmetry.
Polygon
Plots a closed shape formed by joining multiple straight lines. Creates versatile geometric figures used in art, mapping, and computer graphics.
Polyline and Gridline
Plots a series of connected line segments. Creates paths or outlines, commonly used in mapping, drawing, and digital illustrations. Using am attached property, the system can create Gridline, which are polylines that editor allows only horizontal or vertical segments.
Tip
The Shapes can be be used only in CANVAS displays or embedded in Symbols.
The shapes that be using in a Display are directly from System.Windows.Shapes namespaces
| Name | Description |
|---|---|
| Ellipse | Draws an ellipse. |
| Line | Draws a straight line between two points. |
| Path | Draws a series of connected lines and curves. |
| Polygon | Draws a polygon, which is a connected series of lines that form a closed shape. |
| Polyline | Draws a series of connected straight lines. |
| Rectangle | Draws a rectangle. |
| Gridline | The Gridline is a Polyline object with the attached property DynDP.IsGridline set |
Pre-Defined Shapes
The Designer Draw UI has a Shapes folder, with some pre-defined elements.
Those are not new element types, but just Polygon, or Path, created using custom data.
Polygon
Built-in shape definitions. Use Polygon with Points or Path with Data.
polygonShapes = new
{
note = "ElementType: 'Polygon', set Points property",
Triangle = "0,32 16,0 32,32",
Parallelogram = "4,0 28,0 24,32 0,32",
Trapezoid = "4,0 28,0 24,32 8,32",
Arrow = "0,10 0,6 32,6 32,0 40,8 32,16 32,10",
Star = "16,0 20,12 32,12 22,20 26,32 16,24 6,32 10,20 0,12 12,12",
Hexagon = "48,32 40,45.86 24,45.86 16,32 24,18.14 40,18.14",
Pentagon = "16,0.18 31.51,11.27 25.63,29.54 6.37,29.54 0.49,11.27",
Octagon = "27.31,4.69 38.63,16 38.63,27.31 27.31,38.63 16,38.63 4.69,27.31 4.69,16 16,4.69"
}
Path
ElementType: 'Path', set Data property with geometry string
pathShapes = new
{
note = "ElementType: 'Path', set Data property with geometry string",
Cylinder = "M 10,0 A 10,5 0 1 1 30,0 V 32 A 10,5 0 1 1 10,32 Z",
Gear = "M 16,0 L 20,4 L 24,0 L 32,8 L 28,12 L 32,16 L 28,20 L 32,24 L 24,32 L 20,28 L 16,32 L 8,24 L 12,20 L 8,16 L 12,12 L 8,8 Z",
Hill = "M 4,16 C 12,4 20,4 28,16",
Curve = "M 10,10 C 20,-10 30,30 40,10",
Senoid = "M 10,10 C 20,-10 30,30 40,10",
Wave = "M 20,20 C 20,0 30,20 40,20",
Cloud = "M 10,20 C 5,10 25,0 30,10 C 35,5 50,10 45,20 Z",
TJunction = "M 8,8 H 24 V 12 H 16 V 24 H 12 V 12 H 8 Z"
}
In this section...