C# How to draw shapes – Circle, Rectangle, Arc, Pie, Polygon, Bezier, Text

2017/10/05 01:56
In order to draw shapes in C# a start point and end point coordinates, and a Pen control must be defined first.

Coordinates in C#
The value of x is the location of the point along the x-axis, the 0 is at the extreme left. The value of y is the location of the point along the y-axis, the 0 is at the extreme top.

Example:


To draw a line, start point and end point must be defined. Start point is set by the values of x1 and y1. End point is set by the values of x2 and y2. In this case x1 = y2 = 75 pixels and x2 = y2 = 275 pixels.

C# Coordinate System


Pen in C#
The main properties of a pen are:
– DashStyle – specifies the dash style drawn with the Pen;
– Color – specifies the color of the line;
– Width – specifies the width (in pixels) of the drawn line;
– Alignment – specifies where the pen is positioned over the theoretical line.

CSharp have the functionality to draw text too. In order to draw text a Font and SolidBrush must be defined.
The main parameters of the Font class are:
– FontFamily – specifies the font family (e.g. “Courier New”;
– Font size – specifies the font size;
– FontStyle – specifies the font style (e.g. bold).

Main parameter of the SolidBrush class is:
– Color – specifies the color of the brush;

The Pen, the Font and the SolidBrush are created and initialized a little later down in the post.

Here is list of functions to draw shapes in C Sharp.
// Draw line:
e.Graphics.DrawLine(myPen, x1, y1, x2, y2);

// Draw circle:
e.Graphics.DrawEllipse(myPen, x, y, width, height);

// Draw rectangle:
e.Graphics.DrawRectangle(myPen, x1, y2, width, height);

// Draw arc:
e.Graphics.DrawArc(myPen, x, y, width, height, startAngle, sweepAngle);

// Draw pie:
e.Graphics.DrawPie(myPen, x, y, width, height, startAngle, sweepAngle);

// Draw polygon:
private void DrawPolygon(int[] polyArrayX, int[] polyArrayY, 
          int polyPointsNum, Pen myPen, PaintEventArgs e)
{
    Point[] pts = new Point[polyPointsNum];
    for (int b = 0; b < polyPointsNum; b++)
    {
        pts[b] = new Point(polyArrayX[b], polyArrayY[b]);
    }
        e.Graphics.DrawPolygon(myPen, pts);
}

// Draw bezier:
e.Graphics.DrawBezier(myPen, pt1, pt2, pt3, pt4);

// Draw string:
e.Graphics.DrawString(drawString, drawFont, myBrushDrawText, x, y);

// Create the global variables:
Pen myPen = new Pen(Color.Black, 1);
Font drawFont = new Font(“Courier New”, 10, FontStyle.Bold);
SolidBrush myBrushDrawText = new SolidBrush(Color.Red);

// The initialization function of the drawing tools:
private void InitDrawingTools(PaintEventArgs e)
{
    e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;
    myPen.DashStyle = DashStyle.Solid;
    myPen.Color = Color.Cyan;
    myPen.Width = 3;
    myBrushDrawText.Color = Color.Cyan;
}

// On a Paint event of a panel control call the initialization function – InitDrawingTools.

private void pDrawingArea_Paint(object sender, PaintEventArgs e)
{
    InitDrawingTools(e);    ………

// Now call the functions of the figures by setting the correct parameters.

// Example:
// Line:

x1 = 200;
y1 = 0;
x2 = 200;
y2 = 400;
e.Graphics.DrawLine(myPen, x1, y1, x2, y2);

// Polygon:

px1 = 40;
py1 = 40;
px2 = px1 + 80;
py2 = py1;
px3 = px1 + 40;
py3 = py1 + 45;
const int pPointsNum = 3;
polyArrayX = new int[pPointsNum] { px1, px2, px3 };
polyArrayY = new int[pPointsNum] { py1, py2, py3 };
DrawPolygon(polyArrayX, polyArrayY, pPointsNum, myPen2, e);
Create Smily Face :)


private void DrawingPSmilyFace(PaintEventArgs e)
{
    xOrgin = 50;
    yOrgin = 50;
    x1 = xOrgin + 40;
    y1 = yOrgin + 40;
    width = 40;
    height = 40;
    e.Graphics.DrawEllipse(myPen, x1, y1, width, height);
    x2 = x1 + 8;
    y2 = y1 + 15;
    width = 24;
    height = 20;
    startAngle = 0;
    sweepAngle = 180;
    e.Graphics.DrawArc(myPen, x2, y2, width, height, startAngle, sweepAngle);
    x1 = x1 + 8;
    y1 = y1 + 10;
    width = 8;
    height = 8;
    e.Graphics.DrawEllipse(myPen, x1, y1, width, height);
    x1 = x1 + 16;
    e.Graphics.DrawEllipse(myPen, x1, y1, width, height);
}