Fills, shading and alignment with GDI+: ASP Alliance

Print Add To Favorites Email To Friend Rate This Article
Fills, shading and alignment with GDI+

page 1 of 1

Published: 05 Apr 2004

Abstract
In this article we demonstrate aligning GDI+ text with stringalignment and fills and textures with TextureBrush

by Chris Garrett
Feedback

Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 16411/ 101

As you will no doubt have gathered if you have read my articles before, my favourite aspect of ASP.NET is its GDI+ System.Drawing capabilities! This is yet another example (sorry!).

These examples demonstrate creating texture-filled and aligned text. We use string alignment to center the text in the image by setting salign.alignment = stringalignment.center and using the TextureBrush (with a source image, "i") to create a bitmap textured fill for the text in example 2.

Shaded GDI+ text graphics 1
Example 1 in action

You will see as added little touches we have a graduated tint affect for the background, plus I have added highlights and drop-shadows to lift the text a little and give it a kinda 3d effect.

The background is a simple rectangle, the fill is acheived by using LinearGradientBrush with Points for the gradient start/end X,Y locations and the colours to be used.

The text shadowing is simply a case of drawing the text three times slightly offset.

1	<%@ Page Language="vb" %>
2	<%@ import namespace="system.drawing" %>
3	<%@ import namespace="system.drawing.imaging" %>
4	<%@ import namespace="system.drawing.drawing2d" %>
5	<%
6
7	' initialise objects
8	dim b as New system.drawing.bitmap(400, 100, pixelformat.Format16bppRgb555)
9	dim salign as New system.drawing.stringformat
10	dim g as graphics = graphics.fromimage(b)
11
12
13	g.clear(color.silver) ' blank the image
14	g.smoothingMode = smoothingMode.antiAlias ' antialias objects
15
16	g.FillRectangle(New linearGradientBrush(New point(0,0), New point(b.width,b.height), color.fromArgb(255,255,255,255),color.fromArgb(100,100,100,100)),0,0,b.width,b.height)
17
18	' shadow text
19	salign.alignment = stringalignment.center
20
21	g.drawString(date.now.ToString("T"), New font("arial black",24,fontstyle.italic),Brushes.black, 203,53, salign)
22	g.drawString(date.now.ToString("T"), New font("arial black",24,fontstyle.italic),Brushes.white, 201,51, salign)
23	g.drawString(date.now.ToString("T"), New font("arial black",24,fontstyle.italic),Brushes.lightblue, 202,52, salign)
24
25
26	' centered text
27	salign.alignment = stringalignment.center
28
29	' Set the content type
30	response.contenttype="image/gif"
31
32	' send the image to the viewer
33	b.save(response.outputstream, imageformat.gif)
34
35	' tidy up
36	b.dispose()
37
38	%>
39

Shaded GDI+ text graphics example 2
Example 2 in action

The main difference here (other than being a JPG) is that we have used a photographic image as a fill texture on the text. This is quite a pleasing effect, kinda makes it look like a chrome reflection.

To acheive this effect we need to create a new brush for DrawString to use rather than a solid colour brush that we would ordinarily use. This TextureBrush is supplied a source image (i) which will then be drawn as a pattern.

1	<%@ Page Language="vb" %>
2	<%@ import namespace="system.drawing" %>
3	<%@ import namespace="system.drawing.imaging" %>
4	<%@ import namespace="system.drawing.drawing2d" %>
5	<%
6
7	' initialise objects
8	dim b as New system.drawing.bitmap(400, 100, pixelformat.Format16bppRgb555)
9	dim salign as New system.drawing.stringformat
10	dim g as graphics = graphics.fromimage(b)
11	g.smoothingMode = smoothingMode.antiAlias ' antialias objects
12
13	g.clear(color.silver) ' blank the image
14
15
16	g.FillRectangle(New linearGradientBrush(New point(0,0), New point(b.width,b.height), color.fromArgb(255,255,255,255),color.fromArgb(100,100,100,100)),0,0,b.width,b.height)
17
18	' shadow text
19	salign.alignment = stringalignment.center
20
21	dim i as System.Drawing.Image
22	dim strFilename as String = server.mappath("../chris-fsck.jpg")
23	i = System.Drawing.Image.FromFile(strFilename)
24
25	dim myBrush as New TextureBrush(i)
26
27	g.drawString(date.now.ToString("T"), New font("arial black",40,fontstyle.italic),Brushes.black, 203,23, salign)
28	g.drawString(date.now.ToString("T"), New font("arial black",40,fontstyle.italic),Brushes.white, 201,21, salign)
29	g.drawString(date.now.ToString("T"), New font("arial black",40,fontstyle.italic),myBrush, 202,22, salign)
30
31
32	' centered text
33	salign.alignment = stringalignment.center
34
35	' Set the content type
36	response.contenttype="image/jpeg"
37
38	' send the image to the viewer
39	b.save(response.outputstream, imageformat.jpeg)
40
41	' tidy up
42	b.dispose()
43
44	%>
45

Article Feedback

Comment:
Title:
Name:
Url:	( Optional )

Please add 8 and 7 and type the answer here:

User Comments

Title: glow text
Name: nizar
Date: 9/8/2008 7:02:18 AM
Comment:
hi
can you help me writing glow text with GDI+ in c++
or c#
thanks

Title: picture clarity - for gdi+ generated image
Name: nisha
Date: 12/12/2005 6:36:14 AM
Comment:
ur article is very nice, also i have somedoubt regarding gdi+ image generation.

ive generated a image through gdi+ , but the image is outputted with lot of grains.. i need to know how to produce the smoother image

Product Spotlight