Fills, shading and alignment with GDI+
page 1 of 1
Published: 05 Apr 2004
Unedited - Community Contributed
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): 17191/ 37

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



User Comments

Title: glow text   
Name: nizar
Date: 2008-09-08 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: 2005-12-12 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
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2017 ASPAlliance.com  |  Page Processed at 2017-03-23 4:08:40 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search