Transcript Object Oriented Programming Graphics and Multimedia Dr. Mike Spann

Object Oriented Programming
Graphics and Multimedia
Dr. Mike Spann
[email protected]
Contents
Introduction
 Drawing simple graphics
 Colour control an colour palettes
 Displaying and processing images
 Windows Media Player
 Summary

Introduction




C# has extensive support for graphics and
multimedia
The FCL has sophisticated drawing capabilities
within the System.Drawing namespace
 Selection of colours and fonts
 Drawing shapes and text
Also as we have seen, the FCL contains an Image
class allowing image processing applications
Multimedia capabilities are provided by the
Windows Media Player control which allow
applications to play video and audio
Drawing simple graphics



Object of class Graphics control the drawing of
graphics in a C# application
They set the graphics context
 Colours
 Fonts
 Linestyles
They also contain methods for drawing graphics
 Simple shapes
 Text
 Rendering images
Drawing simple graphics
It’s important to realise that drawing
graphics is an event driven process
 All derived classes of the Form class inherit
an OnPaint() method
 This method is called when a component
must be redrawn in response to a paint
event
 The method is overrided in user classes to
draw the required graphics

protected override void OnPaint(PaintEventArgs e)
Drawing simple graphics

Alternatively an event handler can be written to
handle the paint event
protected void MyForm_Paint(object sender, PaintEventArgs e)


These methods are normally called automatically
when a form needs to be repainted, for example
when the form is covered/uncovered or moved
It is also called when the form’s Invalidate()
method is called which causes it to be refreshed
Drawing simple graphics

Drawing simple graphics involves calling
the relevant method of a Graphics object to
draw the desired shape in the Paint event
handler
 A SolidBrush object is created fill a
region
 Pen objects are used to draw lines
 Other more sophisticated objects can fill
regions with textured patterns
Drawing simple graphics
public partial class ColourDemoForm : Form
{
public ColourDemoForm()
{
InitializeComponent();
}
protected override void OnPaint(PaintEventArgs e)
{
Graphics graphics = e.Graphics;
// Display rectangle
SolidBrush brush = new SolidBrush(Color.Orange);
graphics.FillRectangle(brush, 10, 10, 100, 100);
// Display descriptive text
SolidBrush textBrush = new SolidBrush(Color.BlueViolet);
graphics.DrawString("Demonstrating simple graphics and colour",
this.Font, textBrush, 10, 150);
}
}
Drawing simple graphics
Drawing simple graphics
We can easily change the type and style of
the font and add new shapes
 Fonts are creates with the Font class
 The type, style and fontsize are passed to
the constructor
 We can draw filled shapes with a
SolidBrush object and open shapes with a
Pen object

Drawing simple graphics
Graphics Drawing Methods and Descriptions
DrawLine( Pen p, int x1, int y1, int x2, int y2 )
Draws a line from (x1, y1) to (x2, y2). The Pen determines the line’s color, style
and width.
DrawRectangle( Pen p, int x, int y, int width, int height )
Draws a rectangle of the specified width and height. The top-left corner of the rectangle
is at point (x, y). The Pen determines the rectangle’s color, style and border width.
FillRectangle( Brush b, int x, int y, int width, int height )
Draws a solid rectangle of the specified width and height. The top-left corner of the
rectangle is at point (x, y). The Brush determines the fill pattern inside the rectangle.
DrawEllipse( Pen p, int x, int y, int width, int height )
Draws an ellipse inside a bounding rectangle of the specified width and height. The topleft corner of the bounding rectangle is located at (x, y). The Pen determines the color,
style and border width of the ellipse.
FillEllipse( Brush b, int x, int y, int width, int height )
Draws a filled ellipse inside a bounding rectangle of the specified width and height. The
top-left corner of the bounding rectangle is located at (x, y). The Brush determines the
pattern inside the ellipse.
Drawing simple graphics
public partial class ColourDemoForm : Form
{
public ColourDemoForm()
{
InitializeComponent();
}
protected override void OnPaint(PaintEventArgs e)
{
Graphics graphics = e.Graphics;
// Display rectangle
SolidBrush brush = new SolidBrush(Color.Orange);
graphics.FillRectangle(brush, 10, 10, 100, 100);
Pen pen = new Pen(Color.DarkTurquoise,4);
graphics.DrawEllipse(pen, new Rectangle(150, 150, 150, 100));
// Display descriptive text
FontStyle style = FontStyle.Bold|FontStyle.Italic;
Font arial = new Font( "Arial" , 14, style );
SolidBrush textBrush = new SolidBrush(Color.BlueViolet);
graphics.DrawString("Demonstrating simple graphics and colour",
arial, textBrush, 10, 300);
}
}
Drawing simple graphics
Drawing simple graphics
We can create more interactive graphical
application which are under mouse control
 For example we can interactively specify
the vertices of a polygon and use the
Graphics.DrawPolygon() method to draw
the polygon through the vertices
 We can initialize our vertices in a
MouseDown() event handler
 Such an application could be the basis of an
interactive drawing application

Drawing simple graphics
Method
Description
DrawLines
Draws a series of connected lines. The coordinates of each point are
specified in an array of Point objects. If the last point is different from
the first point, the figure is not closed.
DrawPolygon
Draws a polygon. The coordinates of each point are specified in an array
of Point objects. If the last point is different from the first point, those
two points are connected to close the polygon.
FillPolygon
Draws a solid polygon. The coordinates of each point are specified in an
array of Point objects. If the last point is different from the first point,
those two points are connected to close the polygon.
Drawing simple graphics


It is simple to create our GUI for our drawing application
using design view
We have added 2 radio buttons to select either an open or
closed polygon
 Adding any number of radio buttons to a container
enforces only one of them to be selected
 Check boxes can have multiple selections
Drawing simple graphics
public partial class PolygonForm : Form
{
public PolygonForm()
{
InitializeComponent();
}
private void drawPanel_MouseDown(object sender, MouseEventArgs e)
{
}
private void drawPanel_Paint(object sender, PaintEventArgs e)
{
}
private void clearButton_Click(object sender, EventArgs e)
{
}
private void openPolygonSelectButton_CheckedChanged(object sender, EventArgs e)
{
}
private void closedPolygonSelectButton_CheckedChanged(object sender, EventArgs e)
{
}
}
Drawing simple graphics
Writing the code for the event handlers is
straightforward
 The Paint event handlers draws the polygon
as points are added to an ArrayList structure
 We draw the polygons on a separate
Panel object
 The Paint event handler is called using
the Invalidate() method

Drawing simple graphics
public partial
{
private
private
private
private
class PolygonForm : Form
ArrayList vertices= new ArrayList();
bool openPolygon = true;
Pen pen = new Pen(Color.Red);
SolidBrush brush = new SolidBrush(Color.Yellow);
public PolygonForm()
{
InitializeComponent();
}
private void drawPanel_MouseDown(object sender, MouseEventArgs e)
{
vertices.Add(new Point(e.X, e.Y)); drawPanel.Invalidate();
}
private void drawPanel_Paint(object sender, PaintEventArgs e) { // Paint event handler }
private void clearButton_Click(object sender, EventArgs e)
{
vertices.Clear(); drawPanel.Invalidate();
}
private void openPolygonSelectButton_CheckedChanged(object sender, EventArgs e)
{
openPolygon = true; drawPanel.Invalidate();
}
private void closedPolygonSelectButton_CheckedChanged(object sender, EventArgs e)
{
openPolygon = false; drawPanel.Invalidate();
}
}
Drawing simple graphics
The Paint event handler calls the relevant method
to draw an open or filled polygon
The main work involved is converting the
ArrayList object to a Point array which can be
done using the ArrayList.ToArray method


private void drawPanel_Paint(object sender, PaintEventArgs e)
{
Graphics graphics = e.Graphics;
if (vertices.Count > 1)
{
Point[] verticesArray=(Point[])(vertices.ToArray(vertices[0].GetType()));
if (openPolygon)
graphics.DrawPolygon(pen, verticesArray);
else
graphics.FillPolygon(brush, verticesArray);
}
}
Drawing simple graphics

Demos\Draw Polygons\DrawPolygon.exe
Colour control and colour
palettes


Colour is handled using a class Color
An ARGB representation is used
 Each channel is 0-255
 (A)lpha channel is the opacity
 RGB channels are the red, blue and green
components
 The larger the value, the greater the amount
of colour
 Color defines a number of static constants for
pre-defined colours
Colour control and colour
palettes
Structure
Color methods
and properties
Common Methods
FromArgb
FromName
Description
A static method that creates a color based on red, green and blue values
expressed as ints from 0 to 255. The overloaded version allows
specification of alpha, red, green and blue values.
A static method that creates a color from a name, passed as a string.
Common Properties
A
A byte between 0 and 255, representing the alpha component.
R
A byte between 0 and 255, representing the red component.
G
A byte between 0 and 255, representing the green component.
B
A byte between 0 and 255, representing the blue component.
Constants in
structure Color
RGB value
Constants in
structure Color
RGB value
Orange
255, 200, 0
White
255, 255, 255
Pink
255, 175, 175
Gray
128, 128, 128
Cyan
0, 255, 255
DarkGray
64, 64, 64
Magenta
255, 0, 255
Red
255, 0, 0
Yellow
255, 255, 0
Green
0, 255, 0
Black
0, 0, 0
Blue
0, 0, 255
Colour control and colour
palettes

The alpha channel in the ARGB representation represents
the opacity of the colour
 The 0 is transparant
 255 is opaque
 We can blend two colours using intermediate alpha
values
Colour control and colour
palettes

The ColorDialog class is a powerful feature
enabling interactive selection of colours
from a palette
 Can be used in many graphical
applications
 The user can create custom colours from
the palette, not just pre-selected ones
Colour control and colour
palettes
Colour control and colour
palettes
public partial class ColourPaletteDemoForm : Form
{
private static ColorDialog colorChooser = new ColorDialog();
public ColourPaletteDemoForm()
{
InitializeComponent();
}
private void textColourButton_Click(object sender, EventArgs e)
{
DialogResult result = colorChooser.ShowDialog();
if (result==DialogResult.Cancel)
return;
messageLabel.ForeColor = colorChooser.Color;
}
private void BackgroundColourButton_Click(object sender, EventArgs e)
{
colorChooser.FullOpen = true;
DialogResult result = colorChooser.ShowDialog();
if (result == DialogResult.Cancel)
return;
this.BackColor = colorChooser.Color;
}
}
Colour control and colour
palettes

Demos\Colour
Palette\ColourPaletteDemo.exe
Displaying and processing
images




C# contains extensive support for image manipulation
We have already seen how we can develop a simple
application to load and display an image from file
This application used the Image class
 The Graphics.DrawImage() method displayed the
image
Often applications require access to the individual (RGB)
pixels of an image in order to manipulate the image in
some way
Displaying and processing
images




Objects of class Bitmap hold images and allow the
image pixels to be accessed
Most Image methods apply to Bitmaps
 FromFile(), Save() etc
In addition there are getPixel() and setPixel()
methods for image access
A bitmap object can easily be created from an
image object
Bitmap bitmap = new Bitmap(image);
Displaying and processing
images

For example, we can add an extra menu item to
our image viewer tool to process images loaded
from file
 Sub-menu items can include inverting the
colours in an image
 red->255-red
 green->255-green
 blue->255-blue
 We thus need to directly access rgb pixel values
public partial class ImageForm : Form
{
private Image image;
private Bitmap bitmap;
public ImageForm(Image im)
{
image = im;
bitmap = new Bitmap(image);
InitializeComponent();
}
private void ImageForm_Paint(object sender, PaintEventArgs e)
{
Graphics graphics = e.Graphics;
graphics.DrawImage(bitmap, new Point(20,20));
}
public void invertImage()
{
for (int x = 0; x < bitmap.Width; x++)
for (int y = 0; y < bitmap.Height; y++)
{
Color rgb=bitmap.GetPixel(x,y);
Color invrgb = Color.FromArgb(255 - rgb.R,
255 - rgb.G, 255 - rgb.B);
bitmap.SetPixel(x, y, invrgb);
}
Invalidate();
}
}
Displaying and processing
images

Demos\Image Processor\Image Viewer.exe
Displaying and processing
images

For efficient image processing applications,
including real time imaging applications,
C# provides an unsafe mode allowing rapid
image access
 Code is run outside the normal managed
block avoiding the overheads of CLR
runtime safety checks
 Allows the use of pointers!
Displaying and processing
images




The Bitmap class provides the LockBits() and
corresponding UnlockBits() methods which enable you to
fix a portion of the bitmap pixel data array in memory
Allows direct access to pixel data enabling the data to be
modified and written back into the bitmap
LockBits() returns a BitmapData object that describes the
layout and position of the data in the locked array
There is a nice article at
http://www.mfranc.com/programming/operacje-nabitmapkach-net-1/ including some benchmarking to
compare execution speeds
Displaying and processing
images

The BitmapData class contains the following important
properties
 Scan0 - The address in memory of the fixed data array
 Stride - The width, in bytes, of a single row of pixel
data. Usually data is packed into rows that begin on a
four byte boundary and are padded out to a multiple of
four bytes so the stride doesn’t equal the image width
 PixelFormat -The actual pixel format of the data. This
is important for finding the right bytes
 Width - The width of the locked image

Height - The height of the locked image
Displaying and processing
images
Unused
Width
Scan0
Height
Stride
Displaying and processing
images
public void invertImage()
{
BitmapData data = bitmap.LockBits(new Rectangle(0, 0,bitmap.Width,
bitmap.Height), ImageLockMode.ReadWrite, PixelFormat.Format24bppRgb);
unsafe
{
byte* imgPtr = (byte*)(data.Scan0);
for (int i = 0; i < data.Height; i++)
{
for (int j = 0; j < data.Width; j++)
{
(*imgPtr) = (byte)( 255 - (*imgPtr++));
//R
(*imgPtr) = (byte) (255 - (*imgPtr++));
//G
(*imgPtr) =(byte)( 255 - (*imgPtr++));
//B
}
imgPtr += data.Stride - data.Width * 3;
}
bitmap.UnlockBits(data);
Invalidate();
}
}
Windows Media Player



The Windows Media Player control allows a user
to create applications which can play video and
audio
It enables the use of many different types of media
formats
 MPEG
 AVI
 WAV
 MIDI
The control has a user interface containing buttons
to control the playing of the media object
Windows Media Player
public partial class MediaPlayerForm : Form
{
public MediaPlayerForm()
{
InitializeComponent();
}
private void openToolStripMenuItem_Click(object sender, EventArgs e)
{
openMediaFileDialog.ShowDialog();
mediaPlayer.URL = openMediaFileDialog.FileName;
// mediaPlayer.openPlayer(mediaPlayer.URL);
// For normal GUI
}
private void exitToolStripMenuItem_Click(object sender, EventArgs e)
{
Application.Exit();
}
}
Windows Media Player

The name of the media item to play is set using the
URL property of the media player object (of class
AxWindowsMediaPlayer)
 The media item (video) is played inside the
bounds of the Form in which the media player
control is embedded
 Demos\Media Player
Embedded\MediaPlayer.exe
 We can also get the normal media player GUI by
calling the openPlayer() method
 Demos\Media Player\MediaPlayer.exe
Summary





We have seen how we can draw simple graphics such as
basic shapes and text
We have looked at how graphics is drawn in an event
handler for the Paint event
We have seen how colour is displayed using the alpha, red,
green and blue channel and how we can select our own
colour palette inside an application
We have seen how we can display and process images
We have seen how we can embed the Windows Media
Player into an application to display multimedia objects
such as video