More Examples of Simplified Image Processing in GDI+

(Page 1 of 4 )

In the first part of this series, I explained why image processing in GDI+ is much easier than it was in GDI, and began to show you some examples of image processing tasks to illustrate the point. In this article, I will pick up where I left off, focusing on the DrawImage method.

Sample Five-Reflecting and Skewing

When using the DrawImage method to render an image, you can specify the upper left corner, upper right corner, and the bottom left corner of a source image. Corresponding to the original coordinates, the three locations in fact specify the mapping mode of the initial image at the target area, and the three points decide the final rendering position of the image.

Suppose the upper left corner, upper right corner, and the bottom left corner of a source image are respectively (0,0), (100,0), and (0,50), then if the coordinates of the three points are reset to (200,20), (110,100), and (250,30), then not only the rendering area will change but also the outlook of the image will be modified. Figure 5 gives the related sketch map.

Figure 5-the image map sketch

To draw the two pictures displayed in Figure 5, you can use the following code snippet:

private void ImageSkewing_Click(object sender, System.EventArgs e)

{

Graphics graphics=this.CreateGraphics();

graphics.Clear(Color.White);

//define the target rendering area of the image

Point[] destination=new Point[]

{

new Point(200, 20), //the upper left corner coordinate of the source image

new Point(110, 100), //the upper right corner coordinate of the source image

new Point(250, 30) //the bottom left corner coordinate of the source image

};

Bitmap image=new Bitmap("Stripes.bmp");

//render the original image

graphics.DrawImage(image, 0, 0);

//draw the new image

graphics.TranslateTransform(image.Width,0);

graphics.DrawImage(image, destination);

}

To gain a more complex and detailed understanding of image flipping, reflecting, and skewing, let us see another example of how to achieve cubic mapping.

As for cubic mapping, it in fact refers to posting images on the six planes of a cube, as is shown in Figure 6.

Figure 6-the cubic mapping effect

Those who have become familiar with GDI programming know that achieving cubic mapping may be difficult. However, with the help of the mapping support offered by GDI+, you will find it easy to tackle this kind of problem.

As indicated above, with the help of GDI+'s support in rotating, reflecting, and skewing images, you can display a picture inside any close region (here it's a parallelogram), and at the same time keep the edge of the picture consistent with the target area. As is well known, when you draw a cube on the screen, all the planes of the cube are displayed in the form of two-dimensional parallelograms, and only three planes can be seen. That is to say, to achieve the result of mapping a cube, we essentially draw three images onto the three related parallelograms.

Next, you can find out the how-tos in accomplishing the effect shown in Figure 6.

int WIDTH=200;

int LEFT=200;

int TOP=200;

Graphics graphics=this.CreateGraphics();

//use white as the background

graphics.Clear(Color.White);

//set up the interpolation mode-HighQualityBicubic

graphics.InterpolationMode=InterpolationMode.HighQualityBicubic;

//load the three pictures used as a map

Bitmap face=new Bitmap("rose.bmp");

Bitmap top=new Bitmap("flower.bmp");

Bitmap right=new Bitmap("yujinxiang.bmp");

//redefine the ordinates of the image posted in the front plane

Point[] destinationFace = new Point[]

{

new Point(LEFT,TOP),

new Point(LEFT+WIDTH, TOP),

new Point(LEFT, TOP+WIDTH)

};

//post the front side image

graphics.DrawImage(face,destinationFace);

//redefine the ordinates of the image posted in the top plane

PointF[] destinationTop= new PointF[]

{

new PointF(LEFT+WIDTH/2, TOP-WIDTH/2),

new PointF(LEFT+WIDTH/2+WIDTH, TOP-WIDTH/2),

new PointF(LEFT, TOP)

};

//post the top side image

graphics.DrawImage(top, destinationTop);

//redefine the ordinates of the image posted in the right plane

Point[] destinationRight= new Point[]

{

new Point(LEFT+WIDTH, TOP),

new Point(LEFT+WIDTH/2+WIDTH, TOP-WIDTH/2),

new Point(LEFT+WIDTH,TOP+WIDTH)

};

//post the right side image

graphics.DrawImage(right, destinationRight);

Looking more closely, you will find that the core coding lies in defining the coordinates of the cube and posting the three pictures onto it.

Next: Sample Six-Working with Thumbnail Images >>
 

More Windows Scripting Articles
More By Xianzhong Zhu

Comments On: More Examples of Simplified Image Processing in GDI+

>>> Be the FIRST to comment on this article!