Neodynamic ImageDraw for ASP.NET
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.


AutoShapes common features
All AutoShapes support the following features:


Supported AutoShapes


Rectangles
A Rectangle Element – represented by Neodynamic.WebControls.ImageDraw.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:

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.WebControls.ImageDraw.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:

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.WebControls.ImageDraw.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:

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.WebControls.ImageDraw.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:

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.WebControls.ImageDraw.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:

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.WebControls.ImageDraw.ActionCollection.

Learn more about Actions.





Visit Neodynamic's website.
Neodynamic ImageDraw for ASP.NET Documentation
Copyright © 2003 - 2008 Neodynamic - All rights reserved.