Principles behind 2D drawing

[Jay Dee Thompson]

I am trying to understand the principles behind drawing to a 2D
surface.

I have created a simple Image class:

public class Image
{
internal Color[,] Pixels;
public Size size;
public int X; // references size.X
public int Y; // references size.Y
}

Then created a Graphics class:

public class Graphics
{
Image image; // the image to be manipulated.

public void DrawLine(Color colour, Point point1, Point point2)
{
// Horizontal line.
if (point1.Y == point2.Y)
{
if (point1.X > point2.X)
{
Point p = point1;
point1 = point2;
point2 = p;
}

int x = point1.X;
while (x <= point2.X)
{
this.image.pixels[x++, point1.Y] = colour;
}
}

// Vertical line.
else if (point1.X == point2.X)
{
if (point1.Y > point2.Y)
{
Point p = point1;
point1 = point2;
point2 = p;
}

int y = point1.Y;
while (y <= point2.Y)
{
this.image.pixels[point1.X, y++] = colour;
}
}

// Other
else
{
if (point1.X > point2.X || point1.Y > point2.Y)
{
Point p = point1;
point1 = point2;
point2 = p;
}

throw new Exception("currently only supports horizontal
and vertical lines");
}
}

}

What I would like to understand is how I would go about drawing a line
in any direction from point1 to point2.

Could someone explain how I would go about finishing the DrawLine
method or point me to some theory that would help me understand?

Thank you

Jay Dee

 

[Jay Dee Thompson]

Thank you for the reply.

I should have added. I no that windows has the class
System.Drawing.Graphics that provides the ability to draw to an image.

What I would like to understand is how this works, how the class
System.Drawing.Graphics calculates the position to draw each pixel.

Thank you.

 

[Jani Järvinen [MVP]]

Hello,

What I would like to understand is how this works, how the class
System.Drawing.Graphics calculates the position to draw each pixel.

There are many ways to draw lines, and the cleaner line you want, basically
the better algorithm you need. Then, there's antialiasing, and so on.

Here's a pretty nice paper on the subject:

http://www.fho-emden.de/~hoffmann/drawf11102001.pdf

The code examples look like Pascal/Delphi code, but it should be easy to
understand and translate to C# if need be.

Hope this helps!

--
Regards,

Jani Järvinen
C# MVP
Vantaa, Finland
(e-mail address removed)

 

[Jay Dee]

Excellent, Thank you

 

[Rudy Velthuis]

..

Ah! Look up Bresenham's Algorithm. It's the algorithm for figuring
out which pixels to darken when drawing a line with a given slope.

Or, if you want anti-aliasing, use Xiaolin Wu's algorithm.

http://en.wikipedia.org/wiki/Xiaolin_Wu's_line_algorithm

 

[Jay Dee]

To anyone else that stumbles across this thread, I have created the
required draw method, thank you all.

It douse not test to see if the two coordinates are in range of the
image, thus will throw an error if not, but I wasn’t bothered about
that at the mo.

I suppose I better get my head around this anti-aliasing idea now.

public void DrawLine(Color color, int x1, int y1, int x2, int y2)
{
// Draws a line using the Bresenham's line algorithm.
// http://en.wikipedia.org/wiki/Bresenham's_line_algorithm

bool steep = Math.Abs(y2 - y1) > Math.Abs(x2 - x1);
if (steep)
{
this.swap(ref x1, ref y1);
this.swap(ref x2, ref y2);
}
if (x1 > x2)
{
this.swap(ref x1, ref x2);
this.swap(ref y1, ref y2);
}
int deltax = x2 - x1;
int deltay = Math.Abs(y2 - y1);
int error = deltax / 2;
int ystep;
int y = y1;
if (y1 < y2) { ystep = 1; }
else { ystep = -1; }
for (int x = x1; x <= x2; x++)
{
if (steep)
{
this.image.pixels[y, x] = color;
}
else
{
this.image.pixels[x, y] = color;
}
error -= deltay;
if (error < 0)
{
y += ystep;
error += deltax;
}
}
}

/// <summary>
/// <para>Reverses the two given values.</para>
/// </summary>
private void swap(ref int value1, ref int value2)
{
int temp = value1;
value1 = value2;
value2 = temp;
}