tag:blogger.com,1999:blog-53777160664995557802024-02-20T10:28:55.584-08:00GDI+ Windows Graphics Device Interface TutorialSumedhhttp://www.blogger.com/profile/11533458660230230361noreply@blogger.comBlogger8125tag:blogger.com,1999:blog-5377716066499555780.post-19036743470934182422008-08-28T22:23:00.000-07:002008-12-23T21:46:41.901-08:00What is GDI+ ?<p class="mybody">If you have programmed under Windows you are familiar with the term GDI (Graphical Device Interface). GDI simplifies drawing by providing an interface to the hardware devices like screen or printer such that the programmers don’t need to bother about hardware details and their differences. The same program can work on different display adapters, printers, keyboards, etc. without modifying it.<br /><br />.NET uses GDI+, an extension to GDI, which further simplifies drawing. GDI+ has added several new features like graphics paths, support to image file formats, image transformation, etc. GDI+ has also modified the programming model by introducing fundamental changes in the programming model used by GDI.<br /><br /><b>Changes In Programming Model<br /></b><br />GDI uses an idea of Device Context (DC). Device Context is a structure that stores all the drawing related information viz. features of display device and attributes that decide the appearance of the drawing. Every device context is associated with a window. To draw on a window, one must first obtain a device context of that window. If we want to change any attribute, say, pen color we first select it in the device context by calling the <b> SelectObject( )</b> method. Once selected all the drawing is done using this pen unless and until we select another pen in device context.<br /><br />GDI+ works with ‘graphics context’ that plays similar role as device context. The graphics context is also associated with a particular window and contains information specifying how drawing would be displayed. However, unlike device context it does not contain information about pen, brush, font, etc. If we want to draw with new <b> pen</b> we simply have to pass an object of <b> Pen</b> class to the <b> DrawLine( )</b> method (this method draws line on window). We can pass different <b> Pen</b> objects in each call to <b> DrawLine( )</b> method to draw the lines in different colors. Thus GDI uses a stateful model, whereas, GDI+ uses a stateless model. The <b> Graphics</b> class encapsulates the <b> graphics</b> context. Not surprisingly, most of the drawing is done by calling methods of the <b> Graphics</b> class.<br /><br /><b>Working</b> <b> With</b> <b> GDI</b><b>+<br /></b><br />We would see how to draw text and graphics using GDI+ by writing a small program. Create a Windows Application. Windows programmers know that a window receives WM_PAINT message when it is to be painted. We need to handle this message if we want to do any painting in the window. In .NET to do this we can either override the <b> virtual</b> method <b> OnPaint( )</b> of the Form<b> </b> class or write a handler for the Paint event. The base class implementation of<b> OnPaint( )</b> invokes the <b> Paint</b> event handler through delegate. Hence we should write our code in the <b> Paint</b> event handler.<br /><br />Add the <b> Paint</b> handler to the form. The <b> Form1_Paint( )</b> handler would look like this. </p> <p class="myprog">private void Form1_Paint ( object sender, PaintEventArgs e )<br />{<br />} </p> <p class="mybody">The first parameter passed to the <b> Form1_Paint( )</b> handler contains the reference to the object of a control that sends the event. The second parameter contains more information about the <b> Paint</b> event. We would first see how to display a string on the form. To display the string we would use <b> DrawString( </b> ) method of the <b> Graphics</b> class. </p> <p class="myprog">private void Form1_Paint ( object sender, PaintEventArgs e )<br />{ </p> <p class="myprog1in">Graphics g = e.Graphics ;<br /> Font myfont = new Font ( "Times New Roman", 60 ) ;<br /> StringFormat f = new StringFormat( ) ;<br /> f.Alignment = StringAlignment.Center ;<br /> f.LineAlignment = StringAlignment.Center ;<br /> g.DrawString ( "Hello!", myfont, Brushes.Blue, ClientRectangle, f ) ; </p> <p class="myprog">} </p> <p class="mybody">The <b> Graphics</b> property of the <b> PaintEventArgs</b> class contains reference to the <b> Graphics</b> object. We can use this reference for drawing. In a handler other than Paint event handler we can obtain the Graphics reference using the <b> CreateGraphics( )</b> method of the <b> Form</b> class. The<b> DrawString( )</b> method has several overloaded versions. We used one that allows us to display centrally aligned text in desired font and color. The first parameter passed to the <b> DrawString( )</b> method is the string we wish to display. The second parameter is the font in which text would get displayed. We have created a font by passing the font name and font size to the constructor of the <b> Font</b> class. The text gets filled with the brush color specified as the third parameter. The fourth parameter specifies the surrounding rectangle. We have passed <b> ClientRectangle</b> property of Form class that contains a rectangle representing the client area of the form. To centrally align the text we have used the <b> StringFormat</b> class. The Alignment and <b> LineAlignment</b> properties of this class contain horizontal and vertical alignment of text respectively.<br /><br />The <b> Graphics</b> class contains various methods to draw different shapes. This includes drawing rectangle, line, arc, bezier, curve, pie, etc. We would add the code in <b> Form1_Paint( )</b> handler that draws rectangles in different pens and brushes. You would be able to draw other shapes on similar lines.<br /><br />The following code draws a rectangle using green colored pen having line thickness of <b>3</b>. </p> <p class="myprog">Pen p = new Pen ( Color.Green, 3 ) ;<br />g.DrawRectangle ( p, 20, 20, 150, 100 ) ; </p> <p class="mybody">The <b> Pen</b> class encapsulates various styles of pens like solid, dash, dash-dot, etc. We can change the style of pen using the <b> DashStyle</b> property of the <b> Pen</b> class. This is shown in the following statement. </p> <p class="myprog">p.DashStyle = DashStyle.Dash ; </p> <p class="mybody">If we want, we can specify custom pen style by using the <b> DashPattern</b> property. There are several other properties of the <b> Pen</b> class that allow us to specify the pen type (hatch fill, gradient fill, solid color, etc), cap style, join style, etc.<br /><br />Unlike GDI, GDI+ provides separate methods for rectangle and filled rectangle. To fill the rectangle we need to pass a <b> Brush</b> object. This is shown below. </p> <p class="myprog">HatchBrush hb = new HatchBrush ( HatchStyle.BackwardDiagonal,Color.Red, Color.Black ) ;<br />g.FillRectangle ( hb, 200, 20, 150, 100 ) ; </p> <p class="mybody">We have used hatch brush to fill the rectangle. The hatch brush is created using the <b> HatchBrush</b> class. We have mentioned the hatch style as <b> BackwardDiagonal</b>. The rectangle will get filled with the hatch brush in red and black color combination. Like the <b> HatchBrush</b> class there are several other classes used to fill the shapes with viz. <b> SolidBrush</b>, <b> TextureBrush</b>, and <b> LinearGradientBrush</b>. Gradient brush is something that was not available in <b> GDI</b>. Let us see how to use it. </p> <p class="myprog">LinearGradientBrush gb = new LinearGradientBrush ( ClientRectangle,<br /> Color.BlanchedAlmond, Color.Aquamarine, 90 ) ;<br />g.FillRectangle ( gb, ClientRectangle ) ; </p> <p class="mybody">Here, we have created an object of the <b> LinearGradientBrush</b> class and passed to its constructor the rectangle to be filled, and two colors that form the gradient pattern. The last parameter specifies the angle from which we wish to draw. Specifying 90 would fill the window vertically.<br /><br /><b>Coordinates</b> <b> And</b> <b> Transformations<br /></b><br />In the Graphics methods we specify coordinates in two-dimensional coordinate system. The system has origin at left-top corner and <b> x</b> and <b> y </b> axes point to right and down respectively. All the methods take coordinates in pixels. The coordinates passed to <b> Graphics</b> methods are world coordinates. When we pass world coordinates to a method, they firstly get translated into page coordinates (logical coordinates) and then into device coordinates (physical coordinates). Ultimately, the shape gets drawn in device coordinates. In both the page and device coordinate system the measure of unit is same i.e pixels. We can customize the coordinate system by shifting the origin to some other place in client area and by setting a different measure of unit. Let us see how this can be achieved. We would first draw a horizontal line having 1 inch of width. Here is the code to do this. </p> <p class="myprog">private void Form1_Paint ( object sender, PaintEventArgs e )<br />{ </p> <p class="myprog1in">Graphics g = e.Graphics ;<br /> g.PageUnit = GraphicsUnit.Inch ;<br /> Pen p = new Pen ( Color.Green, 1 / g.DpiX ) ;<br /> g.DrawLine ( p, 0, 0, 1, 0 ) ; </p> <p class="myprog">} </p> <p class="mybody">Here firstly we have set the <b> PageUnit</b> property to <b>GraphicsUnit.Inch</b> specifying that the unit of measure is an inch. We have created a <b> Pen</b> object and set its width to <b> 1 / g.Dpix</b>. The <b> Dpix</b> property of the <b> Graphics</b> class indicates a value, in dots per inch, for the horizontal resolution supported by this <b> Graphics</b> object. Note that this is necessary because now <b> Pen</b> object also assumes 1 unit = 1 inch. So, if we don’t set the pen width like this, a line with 1 inch pen width would get drawn. Next we drew a line having one unit measure, which happens to be an inch.<br /><br />Let us now shift the origin to the center of the client area and draw the line again. </p> <p class="myprog">private void Form1_Paint ( object sender, PaintEventArgs e )<br />{ </p> <p class="myprog1in">Graphics g = e.Graphics ;<br /> g.PageUnit = GraphicsUnit.Inch ;<br /> g.TranslateTransform ( ( ClientRectangle.Width / g.DpiX ) / 2,<br /> ( ClientRectangle.Height / g.DpiY ) / 2 ) ;<br /> Pen p = new Pen ( Color.Green, 1 / g.DpiX ) ;<br /> g.DrawLine ( p, 0, 0, 1, 0 ) ; </p> <p class="myprog">} </p> <p class="mybody">Here, after setting the unit to an inch using the <b> PageUnit</b> property, we have called the <b> TranslateTransform( ) </b> method to shift the origin to the center of the client area. This method maps the world coordinates to page coordinates and so the transformation is called world transformation. The x and y values we have passed to the <b> TranslateTransform( )</b> method get added to every x and y values we pass to the <b> Graphics</b> methods. Finally, we have created a pen having proper width and drew the line.<br /><br />GDI+ also allows us to orient the x and y axes’s direction to the specified angle. For this, it provides the <b> RotateTransform( )</b> method. For example, if we call the <b> RotateTransform( )</b> method before drawing the line as shown below, </p> <p class="myprog">g.RotateTransform ( 30 ) ; </p> <p class="mybody">then line would get displayed slanting downwards, 30 degrees below the base line. We can use this functionality of the <b> RotateTransform</b><b>(</b> <b> )</b> method to create an application like analog clock.<br /><br /><b>Disposing</b> <b> Graphics</b> <b> Objects<br /></b><br />Whenever we open a file, we close it after we have finished working with the file. This is because a handle is associated with the file that remains open if we don’t close it explicitly. Similarly, GDI+ resources like pens, brushes, fonts need to be disposed of because they encapsulate GDI+ handles in them. To release the GDI+ resources, we can call the <b> Dispose( )</b> method on every object that is to be released. For example, following statement would release the pen object represented by <b> penobject</b> using the <b> Dispose( )</b> method. </p> <p class="myprog">penobject.Dispose( ) ; </p> <p class="mybody">We must also release the <b> Graphics</b> object obtained by calling the <b> CreateGraphics</b><b>(</b> <b> )</b> method.<br /> </p> <p align="justify"> </p>Sumedhhttp://www.blogger.com/profile/11533458660230230361noreply@blogger.com0tag:blogger.com,1999:blog-5377716066499555780.post-14654841956574539562008-08-26T21:32:00.003-07:002008-12-23T21:46:41.901-08:00Antialiasing in GDI+<p align="left"><span style="font-family:Arial;font-size:85%;">Look at the difference between the following texts:</span></p><p align="center"><img src="http://www.kicit.com/freebies/csharp_net_source_code/GDI+/gdi7.h16.jpg" width="413" border="0" height="337" /></p><p align="left"><span style="font-family:Arial;font-size:85%;">A careful observation will make us aware that the first string has a jagged effect and the second is smooth. (The effect will be more visible in the actual output). This is because we used antialiasing in the second one. The screen is divided into small pixels. When we try to draw curved objects on the screen they don�t perfectly map to a grid of pixels. This results in a jagged effect or �jaggies�. To remove this we use a technique called antialiasing Following is the code for this program:</span></p><p style="margin: 0pt;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;">protected void Form1_Paint ( object sender, System.WinForms.PaintEventArgs e )<br /> {</span></p><p style="margin: 0pt 0pt 0pt 20px;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;"> Graphics g = e.Graphics ;<br /> SolidBrush mybrush = new SolidBrush ( Color.Blue ) ;<br /> Font myfont = new Font ( "Times new Roman", 25,<br /> FontStyle.BoldItalic ) ;<br /> Matrix mymat = new Matrix ( ) ;<br /> <br /> mymat.Scale ( 5, 5 ) ;<br /> g.Transform = mymat ;<br /> <br /> g.DrawString ( "Cool", myfont, mybrush, 0, 0 ) ;<br /> g.TextRenderingHint = TextRenderingHint.AntiAlias;<br /> g.DrawString ( "Cool", myfont, mybrush, 0, 30 ) ;</span></p><p style="margin: 0pt;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;">}</span></p><p align="left"><span style="font-family:Arial;font-size:85%;"><br /> The <b> TextRenderingHint</b> is an enumeration which specifies the quality of text rendering. We equate the <b> AntiAlias</b> member of this enumeration to the <b> TextRenderingHint</b> property of the <b> Graphics</b> class.</span> </p> <p align="justify"> </p>Sumedhhttp://www.blogger.com/profile/11533458660230230361noreply@blogger.com0tag:blogger.com,1999:blog-5377716066499555780.post-82365492075202497422008-08-26T21:32:00.001-07:002008-12-23T21:46:41.901-08:00Trasformations in GDI+<p align="left"><span style="font-family:Arial;font-size:85%;">Transforming an object includes Translation, Rotation, Scaling and Shearing. We plan to apply these transformations to our text. We plan to do something like this<br /> </span> </p><p align="center"><img src="http://www.kicit.com/freebies/csharp_net_source_code/GDI+/gdi6.h15.jpg" width="408" border="0" height="247" /> </p><p align="left"><span style="font-family:Arial;font-size:85%;">In this program we have drawn the shadow first and then the text, so that the text overlaps the shadow making the shadow appear as if it is behind the text. We have drawn the shadow using the same font as the original text and using gray color. The shadow should be half the size of the original text and must be sheared in the x direction.</span> </p><p align="left"><span style="font-family:Arial;font-size:85%;">The code for this program is</span> </p><p style="margin: 0pt;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;">protected void Form1_Paint (object sender, System.WinForms.PaintEventArgs e)<br /> {</span> </p><p style="margin: 0pt 0pt 0pt 20px;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;">Graphics g = e.Graphics ;<br /> Font myfont = new Font ( "Times New Roman", 100 ) ;<br /> <br /> Matrix mymat = new Matrix ( );<br /> mymat.Shear ( -1.4f, 0f ) ;<br /> mymat.Scale ( 1, 0.5f ) ;<br /> mymat.Translate ( 236, 170 ) ;<br /> <br /> g.Transform = mymat ;<br /> <br /> SolidBrush mybrush = new SolidBrush ( Color.Gray ) ;<br /> g.DrawString ( "K", myfont, mybrush, 50, 50 ) ;<br /> g.DrawString ( "I", myfont, mybrush, 150, 50 ) ;<br /> g.DrawString ( "C", myfont, mybrush, 200, 50 ) ;<br /> g.DrawString ( "I", myfont, mybrush, 300, 50 ) ;<br /> g.DrawString ( "T", myfont, mybrush, 350, 50 ) ;<br /> g.ResetTransform ( ) ;<br /> <br /> mybrush.Color = Color.DarkMagenta ;<br /> g.DrawString ( "K", myfont, mybrush, 50, 50 ) ;<br /> <br /> mybrush.Color = Color.FromArgb ( 150, 0, 255, 255 ) ;<br /> g.DrawString ( "I", myfont, mybrush, 150, 50 ) ;<br /> <br /> LinearGradientBrush lgb = new LinearGradientBrush ( new<br /> Point ( 200, 50 ), new Point ( 350, 200 ), Color.Brown,<br /> Color.Yellow ) ;<br /> g.DrawString ( "C", myfont, lgb, 200, 50 ) ;<br /> <br /> HatchBrush hb = new HatchBrush(<br /> HatchStyle.DiagonalCross, Color.Blue, Color.Red ) ;<br /> g.DrawString ( "I", myfont, hb, 300, 50 ) ;<br /> <br /> Image myimg = Image.FromFile ( @"C:\test.bmp" );<br /> TextureBrush tb = new TextureBrush ( myimg ) ;<br /> g.DrawString ( "T", myfont, tb, 350, 50 ) ;</span> </p><p style="margin: 0pt;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;">}</span> </p><p style="margin: 0pt;" align="justify"> </p><p style="margin: 0pt;" align="justify"><span style="font-family:Arial;font-size:85%;">We have created an object of the Matrix class. Transformations are always applied using Matrices. Matrix addition and multiplication result in various transformations.</span> </p><p style="margin: 0pt;" align="justify"><span style="font-family:Arial;font-size:85%;">We have applied shearing by �1.4 in x direction using the <b> Shear( )</b> method. Next we have scaled the matrix by half, using the <b> Scale( )</b> method. Passing a 0.5 as the second coordinate results in reduction in the y direction by half. After doing all this, the coordinate column of the matrix also gets multiplied by some factor resulting in some different coordinates. These coordinates have to be brought to their actual positions. We did this using the T<b>ranslate( ) </b> method.</span> </p><p style="margin: 0pt;" align="justify"><span style="font-family:Arial;font-size:85%;"> </span> </p><p style="margin: 0pt;" align="justify"><span style="font-family:Arial;font-size:85%;">After applying all the transformations to the Matrix, we have set the Transform property of the Graphics class to this matrix. The Transform property of the Graphics class sets or gets the world transform for the Graphics object.</span> </p><p style="margin: 0pt;" align="justify"><span style="font-family:Arial;font-size:85%;"> </span> </p><p style="margin: 0pt;" align="justify"><span style="font-family:Arial;font-size:85%;">Under such a transformed scenario we have drawn the strings at the specified positions using the specified Brush and Font. Using the <b> DrawString( )</b> method. This will fully create the shadow part.</span> </p><p style="margin: 0pt;" align="justify"><span style="font-family:Arial;font-size:85%;"> </span> </p><p style="margin: 0pt;" align="justify"><span style="font-family:Arial;font-size:85%;">The original text drawing is simple; we must get rid of the transformations applied. This is done by resetting the Transformation world by using the <b> ResetTransform( )</b> method.</span> </p><p style="margin: 0pt;" align="justify"><span style="font-family:Arial;font-size:85%;"> </span> </p><p style="margin: 0pt;" align="justify"><span style="font-family:Arial;font-size:85%;">To draw a �<b>K</b>� we have used a solid brush with a <b> DarkMegenta</b> Color.To draw the �<b>I</b>� we have used a <b> Transparent</b> Brush. A Brush can be made Transparent by setting the alpha component of its color to a value less than 255 using the <b> FromArgb( ) </b> method.. The alpha value ranges from 0 (fully transparent) to 255(fully opaque). The default is opaque.We have drawn �<b>C</b>� with a <b> GradientBrush</b>, while �<b>I</b>� with a <b> HatchBrush</b>. To draw the �<b>T</b>�, we have used an image in a <b> TextureBrush</b>.</span> </p>Sumedhhttp://www.blogger.com/profile/11533458660230230361noreply@blogger.com0tag:blogger.com,1999:blog-5377716066499555780.post-33583933502742998342008-08-26T21:31:00.002-07:002008-12-23T21:46:41.902-08:00Mirror Images using Transformation<p style="margin: 0pt;" align="justify"><span style="font-family:Arial;font-size:85%;">In the following program we plan to draw a mirror image of an existing image</span></p> <p style="margin: 0pt;" align="justify"><span style="color:#0000ff;">namespace immageprocessing<br /> {</span></p> <p style="margin: 0pt;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;"><br /> using System ;<br /> using System.Drawing ;<br /> using System.Drawing.Text ;<br /> using System.Drawing.Drawing2D ;<br /> using System.Collections ;<br /> using System.ComponentModel ;<br /> using System.WinForms ;<br /> using System.Data ;</span></p> <p style="margin: 0pt;" align="justify"> </p> <p style="margin: 0pt 0pt 0pt 20px;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;"> public class Form1 : System.WinForms.Form<br /> {</span></p> <p style="margin: 0pt 0pt 0pt 40px;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;"><br /> private System.ComponentModel.Container components ;<br /> public Form1 ( )<br /> {</span></p> <p style="margin: 0pt 0pt 0pt 60px;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;"> InitializeComponent ( ) ;</span></p> <p style="margin: 0pt 0pt 0pt 40px;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;"> }</span></p> <p style="margin: 0pt 0pt 0pt 40px;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;"> public override void Dispose ( )<br /> {</span></p> <p style="margin: 0pt 0pt 0pt 60px;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;"> base.Dispose ( ) ;<br /> components.Dispose ( ) ;</span></p> <p style="margin: 0pt 0pt 0pt 40px;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;"> }</span></p> <p style="margin: 0pt 0pt 0pt 40px;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;"> private void InitializeComponent ( )<br /> {</span></p> <p style="margin: 0pt 0pt 0pt 60px;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;"> this.components = new<br /> System.ComponentModel.Container ( ) ;<br /> this.Text = "Form1" ;<br /> this.AutoScaleBaseSize = new System.Drawing.Size ( 5,13 ) ;<br /> this.ClientSize = new System.Drawing.Size ( 792, 549 ) ;<br /> this.Paint += new System.WinForms.PaintEventHandler ( this.Form1_Paint ) ;<br /> }</span></p> <p style="margin: 0pt 0pt 0pt 40px;" align="justify"> </p> <p style="margin: 0pt 0pt 0pt 40px;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;"> protected void Form1_Paint ( object sender, System.WinForms.PaintEventArgs e )<br /> {</span></p> <p style="margin: 0pt 0pt 0pt 60px;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;"> Graphics g = e.Graphics ;<br /> Image myimg = Image.FromFile ( @"C:\fcode.jpg" ) ;<br /> Matrix mymat = new Matrix ( ) ;<br /> mymat.Translate ( 50, 50 ) ;<br /> mymat.Scale ( -1.0f, 1 ) ;<br /> mymat.Translate ( -450, -50 ) ;<br /> g.Transform = mymat ;<br /> g.DrawImage ( myimg, 50, 50 ) ;<br /> g.ResetTransform ( ) ;</span></p> <p style="margin: 0pt 0pt 0pt 40px;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;"> }</span></p> <p style="margin: 0pt 0pt 0pt 40px;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;"> public static void Main(string[] args)<br /> {</span></p> <p style="margin: 0pt 0pt 0pt 60px;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;"> Application.Run(new Form1());</span></p> <p style="margin: 0pt 0pt 0pt 40px;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;"> }</span></p> <p style="margin: 0pt 0pt 0pt 20px;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;"> }</span></p> <p style="margin: 0pt;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;">}</span></p> <p align="center"><img src="http://www.kicit.com/freebies/csharp_net_source_code/GDI+/gdi5.h14.jpg" width="384" border="0" height="224" /></p>Sumedhhttp://www.blogger.com/profile/11533458660230230361noreply@blogger.com0tag:blogger.com,1999:blog-5377716066499555780.post-21076558184770120662008-08-26T21:31:00.001-07:002008-12-23T21:46:41.902-08:00DrawString( ) Demo<span style="font-family:Arial;font-size:85%;">The main work of displaying text is done by the <b> DrawString( )</b> method. The <b> DrawString( )</b> method has many overloads but what we have used here is this</span> <p align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;">public void DrawString(string, Font, Brush, float, float);</span></p> <p align="justify"><span style="font-family:Arial;font-size:85%;">The first parameter represents the string to be draw. Second and third parameters specify the <b> Font</b> and <b> Brush</b> to draw with. The last two parameters represent the x and y coordinates of the desired point at which string will be drawn.</span></p> <p align="justify"><span style="font-family:Arial;font-size:85%;">In this program we should be able to display text wherever we click with the mouse in the Form. Moreover the text should be of random <b>Font</b>, <b> Color</b> and <b>Size</b>. </span></p> <p align="justify"><span style="font-family:Arial;font-size:85%;">We have to add the <b> MouseDown</b> event. The code to add in the handler looks like this:</span></p> <p style="margin: 0pt;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;">protected void Form1_MouseDown (object sender, System.WinForms.MouseEventArgs e)<br />{</span></p> <p style="margin: 0pt 0pt 0pt 20px;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;"> Graphics g = CreateGraphics( );<br /> Random r = new Random ( );<br /> int x, y ;<br /> FontFamily[] f = FontFamily.Families ;<br /> int i = r.Next ( f.GetUpperBound ( 0 ) ) ;<br /><br /> x = e.X ;<br /> y = e.Y ;<br /><br /> Font myfont = new Font ( f[i] ,r.Next (14, 40 ) ) ;<br /> Color c1 = Color.FromArgb ( r.Next(255), r.Next(255), r.Next(255));<br /> SolidBrush mybrush = new SolidBrush ( c1 );<br /> g.DrawString ( "Hello", myfont, mybrush, x,y );</span></p> <p style="margin: 0pt;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;">}</span></p> <p align="justify"><span style="font-family:Arial;font-size:85%;">As we want some attributes to be random we have used an object of the Random class. The Random class represents a random number generator. A mathematical function is used here to generate random numbers. The <b> Next( )</b> method of this class returns a random number. If we pass an integer to this function it returns a positive random number less than the specified maximum range.</span></p> <p align="justify"><span style="font-family:Arial;font-size:85%;">The Families property of the <b> FontFamily</b> class returns an array that contains all of the <b> FontFamily</b> objects associated with the current graphics context.</span></p> <p align="justify"><span style="font-family:Arial;font-size:85%;">We have collected such a collection of font families in array f. To the<b> Next( )</b> method we passed the upper bound of the array whose return value will be used as an index.</span></p> <p align="justify"><span style="font-family:Arial;font-size:85%;">In x and y we store the x and y coordinates of the point where the mouse was pressed down.</span></p> <p align="justify"><span style="font-family:Arial;font-size:85%;">To create a random Font object we have passed the randomly generated index. This will pick any one of the font families from the array. The Color of the Brush is also generated randomly every time. If we pass 255 as a parameter to the <b> Next( )</b> method, it avoids generation of an invalid red, blue and green component. Now we can display the desired text at the x and y coordinates.</span></p> <p align="justify"><span style="font-family:Arial;font-size:85%;">The output is :</span></p> <p align="center"><img src="http://www.kicit.com/freebies/csharp_net_source_code/GDI+/gdi4.h13.jpg" width="412" border="0" height="270" /></p>Sumedhhttp://www.blogger.com/profile/11533458660230230361noreply@blogger.com0tag:blogger.com,1999:blog-5377716066499555780.post-71108260571439580432008-08-26T21:30:00.002-07:002008-12-23T21:46:41.902-08:00Pens in GDI+<p align="left"><span style="font-family:Arial;font-size:85%;">Consider the following code:</span> </p><p align="left"><span style="font-family:Arial;font-size:85%;"> </span> </p><p style="margin: 0pt;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;">protected void Form1_Paint (object sender, System.WinForms.PaintEventArgs e)<br /> {</span> </p><p style="margin: 0pt 0pt 0pt 20px;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;"> this.BackColor = Color.White ;<br /> Graphics g = e.Graphics;<br /> <br /> Pen p = new Pen ( Color.FromArgb ( 0 ,255, 0 ) ,3) ;<br /> g.DrawRectangle ( p, 20, 20, 150, 100 ) ;<br /> <br /> p.DashStyle = DashStyle.Dash ;<br /> g.DrawRectangle ( p, 20, 150, 150, 100 ) ;<br /> <br /> HatchBrush hb = new HatchBrush ( HatchStyle.BackwardDiagonal,<br /> Color.Red, Color.Black ) ;<br /> p.Brush = hb ;<br /> g.DrawRectangle ( p, 200, 20, 150, 100 ) ;<br /> <br /> p.SetLineCap ( LineCap.ArrowAnchor, LineCap.ArrowAnchor,<br /> DashCap.Triangle ) ;<br /> g.DrawRectangle ( p, 200, 150, 150 ,100 ) ;<br /> g.DrawRectangle ( p, 200, 150, 150 ,100 ) ;</span> </p><p style="margin: 0pt;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;">}</span> </p><p align="left"><span style="font-family:Arial;font-size:85%;">We can change the Background color of the Form by setting the <b> BackColor</b> property to some other color. We have created a Red <b> Pen</b> with <b> Width</b> 3.</span> </p><p align="left"><span style="font-family:Arial;font-size:85%;">We can change the style of Pen by setting its <b> DashStyle</b> property. The <b> DashStyle</b> Enumeration specifies the style of dashed lines drawn with a Pen. Here we have simply used the Dash member.</span> </p><p align="left"><span style="font-family:Arial;font-size:85%;">We can change the brush that determines the attributes of the Pen by setting the Brush property of the Pen to <b>HatchBrush</b>.</span> </p><p align="left"><span style="font-family:Arial;font-size:85%;">The <b> SetLineCap( )</b> sets the values that determine the style of cap used to end lines drawn by the Pen. The first two parameters passed represent the <b> startCap</b> and <b> endCap</b> that represent the cap style to use at the beginning and ending of lines drawn by the Pen. The last parameter represents the cap style to use at the beginning or end of dashed lines drawn with this Pen. So we have used only this parameter. <b> LineCap</b> is an enumeration specifying the cap style for the Pen. The output of this program is:</span> </p><p align="center"><img src="http://www.kicit.com/freebies/csharp_net_source_code/GDI+/gdi3.h12.jpg" width="384" border="0" height="300" /> </p><p align="left"><span style="font-family:Arial;font-size:85%;">Now suppose we want to fill the entire Form with an image, our code would simply be</span> </p><p align="left"><span style="font-family:Arial;font-size:85%;"> </span> </p><p style="margin: 0pt;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;">protected void Form1_Paint (object sender, System.WinForms.PaintEventArgs e)<br /> {</span> </p><p style="margin: 0pt 0pt 0pt 20px;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;"> Graphics g = e.Graphics ;<br /> Size sz = this.ClientSize ;<br /> Image img = Image.FromFile ( @"C:\fcode.jpg") ;<br /> TextureBrush t = new TextureBrush ( img ) ;<br /> for ( int h = 0 ; h <= sz.Height ;h += img.Height )<br /> for ( int w = 0 ; w <= sz.Width ; w += img.Width )<br /> g.FillRectangle( t, w, h, sz.Width, sz.Height ) ;</span> </p><p style="margin: 0pt;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;">}</span> </p><p align="left"><span style="font-family:Arial;font-size:85%;">The <b> ClientSize</b> property gets or sets the size of the client area of the form. The Size structure represents the size of a rectangular region with an ordered pair of width and height. Rest is very obvious.</span> </p>Sumedhhttp://www.blogger.com/profile/11533458660230230361noreply@blogger.com0tag:blogger.com,1999:blog-5377716066499555780.post-46259614036919480912008-08-26T21:30:00.001-07:002008-12-23T21:46:41.902-08:00Working with Brushes<span style="font-family:Arial;font-size:85%;">We have used four brushes <b>SolidBrush</b>, <b>HatchBrush</b>, <b>TextureBrush</b>, and <b> LinearGradientBrush</b> in the following program. Here is how the Paint event will be.<br /> </span> <p style="margin: 0pt;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;">protected void Form1_Paint (object sender, System.WinForms.PaintEventArgs e)<br /> {</span></p> <p style="margin: 0pt 0pt 0pt 20px;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;"> Graphics g = e.Graphics;<br /> Pen p = new Pen ( Color.Black, 4 ) ;<br /> <br /> SolidBrush mysb = new SolidBrush(Color.FromArgb ( 0 ,255, 0 ));<br /> g.FillRectangle ( mysb, 20, 20, 100, 200 ) ;<br /> g.DrawRectangle ( p, 20, 20, 100, 200 ) ;<br /> <br /> HatchBrush myhb = new HatchBrush (<br /> HatchStyle.DiagonalCross,Color.Black,Color.Red );<br /> g.FillRectangle ( myhb, 160, 20, 100, 200 ) ;<br /> g.DrawRectangle ( p, 160, 20, 100, 200 ) ;<br /> <br /> Image myimg = Image.FromFile( @"C:\fcode.jpg") ;<br /> TextureBrush mytb = new TextureBrush ( myimg ) ;<br /> g.FillRectangle ( mytb, 300, 20, 100, 200 ) ;<br /> g.DrawRectangle ( p, 300, 20, 100, 200 ) ;<br /> <br /> LinearGradientBrush mylgb = new LinearGradientBrush ( new<br /> Point(440,20), new Point(540, 220),Color.Yellow,Color.Brown );<br /> g.FillRectangle ( mylgb, 440, 20, 100, 200 ) ;<br /> g.DrawRectangle ( p, 440, 20, 100, 200 ) ;</span></p> <p style="margin: 0pt;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;">}</span></p> <p><span style="font-family:Arial;font-size:85%;">For using these brushes we need to add the Following code</span></p> <p><span style="font-family:Arial;font-size:85%;color:#0000ff;">using System.Drawing.Drawing2D ;</span></p> <p><span style="font-family:Arial;font-size:85%;">These brushes are defined in this namespace. Method for <b> SolidBrush</b> is the same.</span></p> <p><span style="font-family:Arial;font-size:85%;">For the <b> HatchBrush</b> we have specified the <b> HatchStyle</b> along with the Color. <b> HatchStyle</b> is an <b> enum</b> specifying different patterns available for <b> HatchBrush</b> objects</span></p> <p><span style="font-family:Arial;font-size:85%;">In the constructor of the <b> TextureBrush</b> class we need to pass an image. The Image object is created with the help of the <b> FromFile( )</b> method. Using such a <b> TextureBrush</b> we can fill the rectangle. </span></p> <p><span style="font-family:Arial;font-size:85%;">To the constructor of a <b> LinearGradientBrush</b> we have passed two Points and two Colors. The points specify the starting and ending point of the Gradient, while the Colors represent the starting and ending Colors of the Gradient. The output looks like this:</span></p> <p align="center"><img src="http://www.kicit.com/freebies/csharp_net_source_code/GDI+/gdi2.h11.jpg" width="413" border="0" height="198" /></p>Sumedhhttp://www.blogger.com/profile/11533458660230230361noreply@blogger.com0tag:blogger.com,1999:blog-5377716066499555780.post-91475408051359384472008-08-26T21:29:00.000-07:002008-12-23T21:46:41.902-08:00Drawing shapes with GDI+<p align="justify"><span style="font-family:Arial;font-size:85%;">The class that encapsulates a <b> GDI+</b> drawing surface is the <b> Graphics</b> class. It is in the <b> System.Drawing</b> namespace. We write all the drawing code in the <b> Form1_Paint( )</b> method. Lets look at the simplest example used to display various shapes in our form.</span></p> <p align="justify"><span style="font-family:Arial;font-size:85%;">The <b> Form1_Paint( )</b> event handler is called when a control is repainted. The <b> PaintEventArgs</b> class specifies the Graphics to use to paint the control. In this Paint event we plan to draw some shapes with the help of an object of the <b> Graphics</b> class. We have created a Graphics object g and initialized it to the Graphics property of the <b> PaintEventArgs</b> class. </span></p> <p style="margin: 0pt;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;">protected void Form1_Paint (object sender, System.WinForms.PaintEventArgs e)<br />{</span></p> <p style="margin: 0pt 0pt 0pt 20px;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;"> Graphics g = e.Graphics ;</span></p> <p style="margin: 0pt 0pt 0pt 20px;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;"> Pen mypen = new Pen( Color.Red, 5 ) ;<br /> SolidBrush mybrush = new SolidBrush ( Color.Blue ) ;<br /><br /> g.DrawLine( mypen, 20, 30, 200, 60 ) ;<br /><br /> g.FillRectangle( mybrush, 20, 70, 150, 100 );<br /> g.DrawRectangle( mypen, 20, 70, 150, 100 );<br /><br /> g.FillEllipse( mybrush, 20, 200, 150, 100);<br /> g.DrawEllipse( mypen, 20, 200, 150, 100);<br /><br /> mybrush.Color = Color.FromArgb(0,255,0) ;<br /><br /> g.FillPie ( mybrush, 210, 40, 100, 100, 0, 140 ) ;<br /> g.DrawPie ( mypen , 210, 40, 100, 100, 90, 140 ) ;<br /> mybrush.Color = Color.Yellow ;<br /><br /> Point[] p = {new Point(365,270), new Point(300,265),<br /> new Point( 240,255),new Point( 245,200),new Point( 340,190) } ;<br /> g.FillPolygon (mybrush, p ) ;<br /> g.DrawPolygon( mypen , p ) ;</span></p> <p style="margin: 0pt;" align="justify"><span style="font-family:Arial;font-size:85%;color:#0000ff;">}</span></p> <p align="justify"><span style="font-family:Arial;font-size:85%;"><br />First we have created a <b> Pen</b> with the specified <b> Color</b> and <b> Width</b> and a <b> SolidBrush</b> with the specified Color. Color is a structure. In C# the Brush class is an abstract class from which different kinds of brushes are derived. The <b> SolidBrush</b> class is one of them. We will see the other brushes later.</span></p> <p align="justify"><span style="font-family:Arial;font-size:85%;"> The <b>DrawLine( )</b> method draws a line with a specified Pen at the specified points. All the �<b>Fill</b>� methods draw the shapes with solid fill and hence a brush must be specified in such methods. All the �<b>Draw</b>� methods draw the outline of the shape and hence a pen must be passed in such methods.</span></p> <p align="justify"><span style="font-family:Arial;font-size:85%;">The second and third parameters passed to the <b> DrawRectangle( )</b> and the <b> FillRectangle( )</b> methods specify the upper-left corner�s x and y coordinates from where the rectangle would be drawn. The last two parameters denote the width and height of the rectangle.</span></p> <p align="justify"><span style="font-family:Arial;font-size:85%;">The second and third parameters passed to the <b> DrawEllipse( ) </b> and <b> FillEllipse( )</b> methods specify the upper-left corner�s x and y coordinate from where the bounding rectangle that defines the ellipse is drawn. The last two parameters denote the width and height of the bounding rectangle.</span></p> <p align="justify"><span style="font-family:Arial;font-size:85%;">The <b>DrawPie( )</b> draws the outline of a pie section defined by an ellipse and two radial lines. The second, third, fourth and fifth parameters specify the x-coordinate, y-coordinate width and height of the bounding rectangle that defines the ellipse. The last two parameters denote the <b>startAngle</b>, an angle measured clockwise from the x-axis to the first side of the pie section and the <b>sweepAngle</b>, an angle measured clockwise from the x axis to the second side of the pie section. When we Compile and execute it , we get this:</span></p> <p align="center"><img src="http://www.kicit.com/freebies/csharp_net_source_code/GDI+/gdi1.h10.jpg" width="376" border="0" height="336" /></p> <p align="left"><span style="font-family:Arial;font-size:85%;">There are two ways to change the <b> Color</b> of a <b> Pen</b> or <b>Brush</b>. Either equate it to a member of the struct <b>Color</b>, or use the <b> FromArgb( ) </b> method by passing 3 <b> ints</b> specifying the red, blue and green components of the desired <b>Color</b>.</span></p> <p align="left"><span style="font-family:Arial;font-size:85%;">We need to pass an array of type Point to the<b> DrawPolygon( )</b> and <b> FillPolygon( )</b> method, which define the points representing the Polygon.</span></p>Sumedhhttp://www.blogger.com/profile/11533458660230230361noreply@blogger.com0