Home

Introduction to Bitmaps

 

Bitmaps Fundamentals

 

Introduction

A bitmap is a representation of a picture or another type of graphic on a window. For example, it can be used to show a regular picture on a form. Here is an example:

 

A bitmap can be used as a background for a window or a web page. A bitmap can also be used for an aesthetic purpose to decorate a dialog box. That's how it is used on some dialog boxes. Another regular use of bitmaps is as small graphics on toolbars:

Toolbar

The Bitmap Class

To support bitmaps, the GDI+ library provides the Bitmap class. In the .NET Framework, the bitmap is represented by a class called Bitmap. The Bitmap class is derived from the Image abstract class. Both classes are defined in the System.Drawing namespace of the System.Drawing.dll assembly. The Bitmap class is serializable.

Getting a Bitmap

There are two primary ways you can get a bitmap to use in your Topic Applied: you can use an already created bitmap or you can design your own. To use an existing bitmap, you can open it as a file. To support this, the Bitmap class provides the following constructor:

new :
    filename:string -> Bitmap

This constructor takes as argument the name of the file or the path to it. Here is an example of using it:

open System
open System.Drawing
open System.Windows.Forms

let mutable isSelecting = false

let exercise = new Form(MaximizeBox = true, Text = "Exercise")

let btnPicture = new Button(Text = "Picture",
                            Location = new Point(127, 252),
                            Size = new System.Drawing.Size(113, 32))
let btnPictureClick e =
    let bmpPicture : Bitmap = new Bitmap(@"C:\Resources\person1.jpg")

btnPicture.Click.Add btnPictureClick
exercise.Controls.Add btnPicture
do Application.Run exercise

Besides this constructor, Image, the parent of the Bitmap class, provides the FromFile() method to its children. This method is overloaded with two versions. The first version uses the following signature:

static member FromFile :
    filename:string -> Image

As you can see, this is a static method that you call without instantiating the class. The method takes as argument the name of, or the path to, the file. It returns an Image object that you can then cast to a Bitmap. Here is an example:

open System
open System.Drawing
open System.Windows.Forms

let mutable isSelecting = false

let exercise = new Form(MaximizeBox = true, Text = "Exercise")

let btnPicture : Button = new Button(Text = "Picture",
                                   Location = new Point(127, 252),
                                   Size = new System.Drawing.Size(113, 32))
let btnPictureClick e =
    let bmpPicture : Bitmap = new Bitmap(Image.FromFile(@"C:\Resources\person1.jpg"))

btnPicture.Click.Add btnPictureClick
exercise.Controls.Add btnPicture
do Application.Run exercise

Creating a Graphics From a Bitmap

In our introduction to graphics, we saw various ways of getting a Graphics object, either from the CreateGraphics() method of a Control-derived class or from the handle of the control. Besides these techniques, the Graphics class provides a method named FromImage. Its signature is:

static member FromImage :
    image:Image -> Graphics

This static method takes as argument a value of type Image. After the method has been called, it produces a Graphics object.

Opening a Picture File

In your application, you may want the user to be able to open a picture as file. To assist you with this, you can use the Open File dialog box. To allow the user to open a picture in your application, add an OpenFileDialog control to your form. There are different types of graphic files with various extensions. The primary type of bitmap you will use in Microsoft Windows has the extension .bmp. There are many more graphic file extensions that Microsoft Windows supports. In our lessons, we cannot review all of them, their differences, advantages, or disadvantages. Simply know that most or all of the types of graphics you can think of are supported.

When providing an Open File dialog box to your application, if you will support various types of graphics, construct a filter accordingly. Here is an example from Microsoft Paint:

Opening a Picture File

 

As you can see, the bitmap file is on top of the list.

Designing a Bitmap

As opposed to opening an existing picture, you can create your own, using the various classes and accessories of the GDI+ library. There are many sophisticated applications used to create and manipulate graphics. As long as you can create an save a valid picture, you can use that picture in your application.

Presenting a Bitmap

Once the picture is ready, to present it to the user, for example to display it in your application, you can call the Graphics.DrawImage() method that is overloaded with as many different versions as you can possibly need. One of the versions of this method has the following signature:

member DrawImage :
        image:Image *
        x:int *
        y:int -> unit

The first argument can be a bitmap that you may have previously initialized. The second argument specifies the location where the picture will be drawn.

     
 

The Characteristics of a Bitmap

 

The Location of a Bitmap

To represent a picture in your application, such as on a form, the primary information you must provide is its location. The location of a picture is the measure, in pixels, of its top and its left corners with regards to the object that is hosting it:

Using the location, to specify where to display a picture, you can pass the x and y values as the second and the third arguments, respectively, of the Graphics.DrawImage() method. Here is an example:

open System
open System.Drawing
open System.Windows.Forms

let mutable isSelecting = false

let exercise = new Form(MaximizeBox = true, Text = "Exercise")

let btnPicture : Button = new Button(Text = "Picture",
                                     Location = new Point(127, 252),
                                     Size = new System.Drawing.Size(113, 32))
let btnPictureClick e =
    let graph : Graphics = exercise.CreateGraphics()
    let bmpPicture : Bitmap = new Bitmap(@"C:\Resources\person1.jpg")

    graph.DrawImage(bmpPicture, 12, 12)
btnPicture.Click.Add btnPictureClick
exercise.Controls.Add btnPicture
do Application.Run exercise

As opposed to integers, you can also pass the location's values as floating point numbers. This is done using the following version of the Graphics.DrawImage() method:

member DrawImage :
        image:Image *
        x:float32 *
        y:float32 -> unit

You can also specify the location as a Point. If the properties of the Point are integers, you can use the following flavor of the Graphics.DrawImage() method:

member DrawImage : 
        image:Image * 
        point:Point -> unit

If the values of the Point are floating point numbers, you can use the following version:

member DrawImage : 
        image:Image * 
        point:PointF -> unit

The Size of a Picture

A picture usually appears as a geometric figure such as a rectangle:

A Picture

Through some manipulations, a picture can appear non-rectangular. Regardless of the perception, a picture is meant to fit a rectangular figure. As such, a picture has a size, represented by a width and a height, in pixels. The width of a picture is the distance from its left to its right borders. The height of a picture is the distance, in pixels, between its top and its bottom borders. The size of a picture can be illustrated as follows:

The Size of a Picture

When creating or designing a Bitmap object, you can specify its primary size. To do this, you can use the following constructor:

new :
        width:int *
        height:int -> Bitmap

The width and the height arguments are as we illustrated them above. Here is an example of using this constructor:

let btnPictureClick e =
    let bmpSample : Bitmap = new Bitmap(450, 350)

If you have a picture, you can find out what its size is. To assist you with knowing the width of a picture, the Image class, the parent of the Bitmap class, provides the Width property, which is of type integer. In the same way, to give you the height of a picture, the Image class is equipped with a property named Height, which also is an int type. Here is an example of getting the dimensions of a picture:

open System
open System.Drawing
open System.Windows.Forms

let mutable isSelecting = false

let exercise = new Form(MaximizeBox = true, Text = "Picture",
	ClientSize = new System.Drawing.Size(554, 400))

let dlgOpen : OpenFileDialog = new OpenFileDialog()

let btnPicture : Button = new Button(Text = "Load Picture...",
                                     Location = new Point(12, 12),
                                     Width = 99)
exercise.Controls.Add(new Label(Location = new Point(12, 54),
				AutoSize = true, Text = "Width:"))
let txtWidth = new TextBox(Location = new Point(62, 51), Width = 49)
exercise.Controls.Add txtWidth

exercise.Controls.Add(new Label(Location = new Point(12, 81),
				AutoSize = true, Text = "Height:") )
let txtHeight = new TextBox(Location = new Point(62, 78), Width = 49)
exercise.Controls.Add txtHeight

let btnPictureClick e =
    if dlgOpen.ShowDialog() = DialogResult.OK then
        let strFilename = dlgOpen.FileName
        let bmpPicture : Bitmap = new Bitmap(strFilename)
        let graph : Graphics = exercise.CreateGraphics()

        graph.DrawImage(bmpPicture, 120, 12)
        let width = bmpPicture.Width
        let height = bmpPicture.Height

        txtWidth.Text  <- string width
        txtHeight.Text <- string height

btnPicture.Click.Add btnPictureClick
exercise.Controls.Add btnPicture

[<STAThread>]
[<EntryPoint>]
let main argv = 
    Application.Run exercise
    0

The Size of a Picture

To get both the width and the height as one object, the Image class provides to its children, such as Bitmap, the Size property. As you may guess, the Size property is of type Size. Besides the Width, the Height, and the Size properties, to get the size of a bitmap, you can access the PhysicalDimensions property of the Image class. This property is of type SizeF but its values depend on the type of picture.

The Transparency of a Bitmap

We know that a graphic can be made of thousands to millions of colors. When you display a picture in your application, you can ask Microsoft Windows to "see through" one particular color. Seeing through is referred to as transparency. This is an operation regularly needed in graphics applications, the operating system is already equipped to select a default color it considers for transparency. In most cases, you can use that color. Otherwise, for your particular application, you can specify what color you want to use as "see through".

To support picture transparency, the Bitmap class is equipped with the MakeTransparent() method that is overloaded with two versions. The first version uses the following syntax:

member MakeTransparent : unit -> unit

When you call this method, it lets the operating system choose the color used for transparency. In most cases, the operating system selects white as the transparency color. Consequently, when you display the picture, wherever a white spot or area is shown on the picture, that area would disappear to show behind it. Here is an example:

Building
open System
open System.Drawing
open System.Windows.Forms

let mutable isSelecting = false

let exercise = new Form(MaximizeBox = true, Text = "Picture",
			ClientSize = new System.Drawing.Size(673, 448))

let exercisePaint(e : PaintEventArgs) =
    let bmpBuilding : Bitmap = new Bitmap(@"C:\Resources\building.bmp")
    let bmpMonument : Bitmap = new Bitmap(@"C:\Resources\monument.bmp")

    e.Graphics.DrawImage(bmpBuilding, 0, 0)
    bmpMonument.MakeTransparent()
    e.Graphics.DrawImage(bmpMonument, 200, 260)

exercise.Paint.Add exercisePaint

[<STAThread>]
[<EntryPoint>]
let main argv = 
    Application.Run exercise
    0

This would produce:

Instead of using the default transparency color of the operating system, you can specify your own color. To support this, the Bitmap class provides another version of the MakeTransparent() method. Its signature is:

member MakeTransparent : 
        transparentColor:Color -> unit

With this method, instead of letting the operating system determine the transparency color, you pass your own as argument. Here is an example:

Flying Bird
open System
open System.Drawing
open System.Windows.Forms

let mutable isSelecting = false

let exercise = new Form(MaximizeBox = true, Text = "Picture", ClientSize = new System.Drawing.Size(575, 420))

let exercisePaint(e : PaintEventArgs) =
    let bmpFlying : Bitmap = new Bitmap(@"C:\Resources\flying.bmp")
    let bmpGlobe  : Bitmap = new Bitmap(@"C:\Resources\globe.bmp")

    e.Graphics.DrawImage(bmpFlying, 0, 0)
    bmpGlobe.MakeTransparent(Color.Black)
    e.Graphics.DrawImage(bmpGlobe, 20, 120)

exercise.Paint.Add exercisePaint

[<STAThread>]
[<EntryPoint>]
let main argv = 
    Application.Run exercise
    0

This would produce:

Transparent

   
   
 

Previous Copyright © 2014-2015 FunctionX Next