ShapeElement (Lines, Rectangles, Ovals, Polygons, Stars)

ImageDraw supports AutoShapes which are preset shapes like rectangles, ovals, lines, arrows, stars, and polygons that can be drawn on the Canvas. In addition, AutoShapes supports imaging effects (a.k.a. Actions), text inside them by allowing padding text feature, border roundness and dashed patterns.

In This Section

AutoShapes common features
Supported AutoShapes
- Rectangles
- Ovals
- Lines & Arrows
- Polygons
- Stars
Applying Actions (Imaging Effects) on AutoShapes objects

AutoShapes common features

All AutoShapes support the following features:

Rich Text Support
AutoShapes can display text inside them and they support the same rich text features available when working with TextElement objects i.e. multi-line text, outlined text, and text alignment.
Rich Fill Support
AutoShapes can be filled out with solid colors, texture images, linear gradients, and built-in patterns. The same is applied for shape's border.
Roundness
AutoShapes support roundness that allows you to make them rounded shapes. For example, by setting up the Roundness property of a Rectangle shape, then you will get a rounded rectangle. By setting up the Roundness property of a Star shape, then you can get a burst (those rounded star shaped ovals often seen in advertising).
Border Style Support
AutoShapes support setting up the line style of the border shape to a dashed pattern.

Supported AutoShapes

Rectangles
Ovals
Lines & Arrows
Polygons
Stars

Rectangles

A Rectangle Element – represented by Neodynamic.SDK.RectangleShapeElement class – lets you draw rectangle shapes on the Canvas. RectangleShapeElement objects are created by specifying some basic properties such as Width, Height, Fill, StrokeFill, etc.

Syntax sample:

RectangleShapeElement Output Sample:

By setting up Roundness property to 25, you will get a rounded rectangle:
By setting up StrokeDashStyle property to Dash, you will get the following output:
By setting up Text property to "My Rectangle", you will get the following output:

Ovals

An Oval Element – represented by Neodynamic.SDK.OvalShapeElement class – lets you draw oval shapes (ellipses and circles included) on the Canvas. OvalShapeElement objects are created by specifying some basic properties such as Width, Height, Fill, StrokeFill, etc.

Syntax sample:

OvalShapeElement Output Sample:

By setting up StrokeDashStyle property to DashDot, you will get the following output:
By setting up Text property to "My Oval", you will get the following output:

Lines & Arrows

A Line Element – represented by Neodynamic.SDK.LineShapeElement class – lets you draw line shapes on the Canvas. LineShapeElement objects are created by specifying some basic properties such as Width, Height, StrokeFill, etc. Line shapes support cap styles for staring and ending line points. By setting up cap styles, you can convert lines into arrows.

Note
Line shapes are drawn within the area defined by Width and Height properties of LineShapeElement class i.e. there's no start and end line points for setting up. LineShapeElement class also feature Orientation property which lets you specify the line orientation to Horizontal (Default), Vertical, DiagonalUp, and DiagonalDown.

Syntax sample:

LineShapeElement Output Sample:

By setting up Orientation property to Vertical, DiagonalUp, and DiagonalDown, you will get the following outputs respectively:
By setting up StrokeDashStyle property to Dash, you will get the following output:
By setting up Text property to "My Line" and TexPadding-Bottom property to 20, you will get the following output:

Polygons

A Polygon Element – represented by Neodynamic.SDK.PolygonShapeElement class – lets you draw irregular polygon shapes on the Canvas. PolygonShapeElement objects are created by specifying some basic properties such as Sides, Width, Height, Fill, StrokeFill, etc.

Syntax sample:

PolygonShapeElement Output Sample:

By setting up Roundness property to 25, you will get a rounded pentagon:
By setting up StrokeDashStyle property to Dash, you will get the following output:
By setting up Text property to "My Rectangle', you will get the following output:

Stars

A Star Element – represented by Neodynamic.SDK.StarShapeElement class – lets you draw istar shapes and bursts (those rounded star shaped ovals often seen in advertising) on the Canvas. StarShapeElement objects are created by specifying some basic properties such as Points, InnerRadiusPercentage, Width, Height, Fill, StrokeFill, etc.

Syntax sample:

StarShapeElement Output Sample:

By setting up Roundness property to 50, you will get a rounded 10-points star:
By setting up StrokeDashStyle property to Dot, you will get the following output:
By setting up Text property to "50% Off", you will get the following output:

Applying Actions (Imaging Effects) on AutoShapes objects

As for ImageElement and TextElement objects, all ShapeElement derived-classes - RectangleShapeElement, OvalShapeElement, LineShapeElement, PolygonShapeElement, and StarShapeElement objects - can be "affected" by more than one Action due to they feature an Actions property of type Neodynamic.SDK.ActionCollection.

Learn more about Actions.