Sharing Information: Tutorial : Graphics in VB.NET Part 2

Tutorial : Graphics in VB.NET Part 2 - Graphics

2:48 AM |

Diposkan oleh Plunturan Bersatu |

In this 4 parts long tutorial series I will introduce you to graphics in VB.NET. The four parts is meant to be in order so I recomend you to read them in order to be able to understand the later parts.

Creating Graphics

A Graphics(the data type) is used to modify images. There's 5 ways to create one but we'll only do it in one of them, we'll create it from an image. Then when we use our Graphics the look of the original image will be changed.

[highlight=VB.NET] Dim Img As New Bitmap(50, 50)

Dim g As Graphics = Graphics.FromImage(Img)[/highlight]

After declaring a Bitmap as we did in the last part we'll also creating a Graphics from that image.

Resizing a Bitmap

The first thing we'll do with the Graphics is how to resize the bitmap. To do tis we're going to use two bitmap (one with the original image and one with the resized one) and a Graphics to do the resizing:

[highlight=VB.NET] Dim OriginalImg As New Bitmap("C:\test.jpg")

Dim Img As New Bitmap(50, 50)

Dim g As Graphics = Graphics.FromImage(Img)

g.InterpolationMode = Drawing2D.InterpolationMode.HighQualityBicubic

g.DrawImage(OriginalImg, 0, 0, Img.Width, Img.Height)

g.Dispose()[/highlight]
So after using this code we have a 50x50 pixels version of C:\test.jpg stored in the variable Img. What the codes do is to first declare to bitmaps, one from a file and one empty with the dimensions 50 times 50. After that it declares a Graphics with a Graphics from the empty image since it's that one we want to modify. Then we set the quality the Graphics will use when scaling/rotating its image which is what we'll do later. And then we're resizing the image from the OriginalImg. At the end we just dispose the graphics.

What we're actually doing is drawing the image

Code:

g.DrawImage(OriginalImg, 0, 0, Img.Width, Img.Height)

in our graphic at the top left corner

Code:

g.DrawImage(OriginalImg, 0, 0, Img.Width, Img.Height)

with the size of the Image of the Graphics

Code:

g.DrawImage(OriginalImg, 0, 0, Img.Width, Img.Height)

Merging and Adding Images

DrawImage can be used for more things then just resizing an Image, since it can draw an image on another image. So you can use it to add an image to a be a part of another or add many to the same image. If you don't want to resize the image you use you can instead use DrawImageUnscaled, then you don't have to add its size since it uses the same as it already has.

This example below shows how to use four images to make 2x2 image collage, since the test images I'm using is not a good size for this I wrote a function (resizeImg) which resizes the images to a good size, this function works exactly as the resizing we did above:

[highlight=VB.NET] Dim WholeImg As New Bitmap(800, 800)

Dim Images(3) As Bitmap

Images(0) = resizeImg(New Bitmap("C:\test1.jpg"), 400, 400)

Images(1) = resizeImg(New Bitmap("C:\test2.jpg"), 400, 400)

Images(2) = resizeImg(New Bitmap("C:\test3.jpg"), 400, 400)

Images(3) = resizeImg(New Bitmap("C:\test4.jpg"), 400, 400)

Dim g As Graphics = Graphics.FromImage(WholeImg)

g.DrawImageUnscaled(Images(0), 0, 0)

g.DrawImageUnscaled(Images(1), 400, 0)

g.DrawImageUnscaled(Images(2), 0, 400)

g.DrawImageUnscaled(Images(3), 400, 400)

g.Dispose()

Me.BackgroundImage = WholeImg [/highlight]

And the function:

[highlight=VB.NET] Private Function resizeImg(ByVal Img As Bitmap, ByVal width As Integer, ByVal height As Integer)

As Bitmap

Dim newImg As New Bitmap(width, height)

Dim g As Graphics = Graphics.FromImage(newImg)

g.InterpolationMode = Drawing2D.InterpolationMode.HighQualityBicubic

g.DrawImage(Img, 0, 0, newImg.Width, newImg.Height)

g.Dispose()

Return newImg

End Function[/highlight]

So in the example I first declared a Bitmap which will store the result of the merging, then a bitmap array where I then store four images(from files) after resizing them with the function. Then after creating a Graphics for the "result bitmap" we draws the images at the right coordinates using DrawImageUnscaled since the bitmaps already have been resizes.

I used the four Windows XP example images and then I got this result:

So by using this you can merge images at the side of each others but by just edit the coordinates you can add them at top of each other. This was all for now, in the next part I'll show how to use graphics together with colors to draw images without needing any images.