Manipulating graphic objects using matrices in GDI+. Starts from the basics of matrices.

Matrices are used very often in programming. We all did them in school and you probably remember the basic calculations because basic matrices are not very complicated.
In this tutorial I’m assuming you know what a matrix is and the basic operations that can be done on a matrix.

In GDI+ we can manipulate graphic objects using matrices, and that is the subject of this tutorial.

First let’s create a rectangle that we will modify later using matrices.

protected override void OnPaint(PaintEventArgs paintEvent)
{
    Graphics gfx = paintEvent.Graphics;
    Pen myPen = new Pen(Color.DarkGreen, 3);
    gfx.DrawRectangle(myPen, 100, 100, 100, 50);
}

Scaling

One of the most simple things you can do is scale a graphic object.

protected override void OnPaint(PaintEventArgs paintEvent)
{
    Graphics gfx = paintEvent.Graphics;
    Pen myPen = new Pen(Color.DarkGreen, 3);
    // Create new matrix
    Matrix mx = new Matrix();
    // Scale by 2
    mx.Scale(2, 2);
    // Apply the matrix to the graphic object
    gfx.Transform = mx;
    gfx.DrawRectangle(myPen, 100, 100, 100, 50);
}

You’ll need to resize the form for the rectangle to fit.
Scale() takes 2 float values that represent the X and Y coordinates.
With the following:

mx.Scale(1, 2);

the result will be a tall rectangle, and with:

mx.Scale(2, 1);

we’ll get a wide rectangle.
As you already saw, the distance between the sides of the form and the sides of the rectangle also increases.

Rotating

The rotate method rotates the graphic object by the number of degrees specified:

protected override void OnPaint(PaintEventArgs paintEvent)
{
    Graphics gfx = paintEvent.Graphics;
    Pen myPen = new Pen(Color.DarkGreen, 3);
    // Create new matrix
    Matrix mx = new Matrix();
    // Rotate 15 degrees
    mx.Rotate(15);
    // Apply the matrix to the graphic object
    gfx.Transform = mx;
    gfx.DrawRectangle(myPen, 100, 100, 100, 50);
}

But probably more often you’ll use RotateAt, that rotates the graphic object around a given point.

protected override void OnPaint(PaintEventArgs paintEvent)
{
    Graphics gfx = paintEvent.Graphics;
    Pen myPen = new Pen(Color.DarkGreen, 3);
    // Create new matrix
    Matrix mx = new Matrix();
    // Set the point
    Point pnt = new Point(100, 100);
    // Rotate 45 degrees around a point
    mx.RotateAt(45, pnt);
    // Apply the matrix to the graphic object
    gfx.Transform = mx;
    gfx.DrawRectangle(myPen, 100, 100, 100, 50);
}

Compare this to a version where you use Rotate, and you’ll see that RotateAt rotates the graphic object around the specified point.

Shear

Shear method shears the selected graphic object horizontal or/and vertical. The effect is similar to the skew effect in graphics editing software.

protected override void OnPaint(PaintEventArgs paintEvent)

{
Graphics gfx = paintEvent.Graphics;
Pen myPen = new Pen(Color.DarkGreen, 3);
// Create new matrix
Matrix mx = new Matrix();
// Shear 0.5 vertical
mx.Shear(0, 0.5f);
// Apply the matrix to the graphic object
gfx.Transform = mx;
gfx.DrawRectangle(myPen, 100, 100, 100, 50);
}

Some examples

The following code will loop 360 degrees and it will every loop it will rotate a rectangle 10 degrees.

protected override void OnPaint(PaintEventArgs paintEvent)
{
    Graphics gfx = paintEvent.Graphics;
    Pen myPen = new Pen(Color.DarkRed, 1);
    // Create new matrix
    Matrix mx = new Matrix();
    // Create new point
    Point pnt = new Point(150, 150);
    // Loop 360 degrees
    for(int i = 36; i > 0; i--)
    {
    // Draw the rectangle
    gfx.DrawRectangle(myPen, 100, 100, 100, 20);
    // Rotate 10 degrees around the point
    mx.RotateAt(10, pnt);
    // Apply
    gfx.Transform = mx;
    }
}