GDI+ 在Delphi程序的应用 -- 文字描边与阴影扩展

自从文章《GDI+ 在Delphi程序的应用 -- 可调节的文字阴影特效》发表后，不少人问我怎样实现文字描边。由于我只是个业余编程爱好者，加上文化底蕴差，只要涉及算法和编程理论方面的东西，我就无能为力了，所以直到目前，我也不知道具体的描边算法是怎样的（网上搜索过N次，也没找到答案，可能这方面的东西是要卖钱的）。

因问得人多了，有时我也思索和研究一下，总算找了个方法可以实现，虽然同专业的图像软件（如PhotoShop）文字描边效果相比差强人意，但可以凑合凑合，作为研究心得，将代码贴在这里备查。

在《GDI+ 在Delphi程序的应用 -- 可调节的文字阴影特效》一文的内容的基础上，对文字阴影效果代码进行了改进和扩充，扩充的功能有2点：一是由原来只能产生黑色阴影扩充为任意颜色阴影；二是可以对阴影进行扩展。有了这2个功能，利用阴影效果也就可以进行文字描边了，推而广之，也可实现图像的描边。下面是具体的代码内容：

1. //备份图像。Data:GDI+位图数据，32位ARGB格式;Dest:备份目标;Color:阴影颜色
2. procedureBackImage(Data:TBitmapData;Dest:Pointer;Color:TARGB);
3. asm
4. pushesi
5. pushedi
7. movesi,[eax+16]//esi=Data.Scan0
8. movedi,edx//esi=Dest
9. movedx,ecx//edx=Color&0xffffff
10. andedx,0FFFFFFh
11. movecx,[eax]//ecx=Data.Height*Data.Width
12. imulecx,[eax+4]
13. cld
15. @Loop://for(;ecx>=0;ecx--)
16. or[esi],edx
17. movsd//*edi++=*esi++&0xff000000|edx
18. loop@Loop
20. popedi
21. popesi
22. end;
24. //扩展。Data:GDI+位图数据，32位ARGB格式;Source:复制的源
25. //ExpMatrix:卷积矩阵;MatrixSize：矩阵大小
26. procedureMakeExpand(Data:TBitmapData;Source,ExpMatrix:Pointer;
27. MatrixSize:LongWord);
28. var
29. Radius,mSize,rSize:LongWord;
30. x,y:LongWord;
31. Width,Height:Integer;
32. Matrix:Pointer;
33. Stride:LongWord;
34. asm
35. pushesi
36. pushedi
37. pushebx
39. movesi,edx//esi=Source
40. movedi,[eax+16]//edi=Data.Scan0+3(Alphabyte)
41. addedi,3
42. add ecx, 3
43. movMatrix,ecx//Matrix=ExpMatrix +3(Alphabyte)
44. movecx,MatrixSize
45. movedx,ecx
46. dececx
47. movebx,[eax]
48. subebx,ecx
49. movWidth,ebx//Width=Data.Width-(MatrixSize-1)
50. movebx,[eax+4]
51. subebx,ecx
52. movHeight,ebx//Height=Data.Height-(MatrixSize-1)
53. shrecx,1
54. movRadius,ecx//Radius=MatrixSize/2
55. moveax,[eax+8]
56. movStride,eax
57. movmSize,eax
58. shledx,2
59. submSize,edx//mSize=Data.Stride-MatrixSize*4
60. addeax,4
61. imuleax,ecx
62. addeax,3
63. addesi,eax//esi=esi+(Data.Stride*Radius+Radius*4+3)
64. shlecx,3
65. movrSize,ecx//rSize=Radius*2*4
67. movy,0//for(y=0;y<Height;y++)
68. @yLoop://{
69. movx,0//for(x=0;x<Width;x++)
70. @xLoop://{
71. test[esi],0ffh//if(*esi!=0)
72. jz@NextPixel//{
73. test[esi-4],0ffh
74. jz@001
75. test[esi+4],0ffh
76. jz@001
77. movebx,Stride
78. test[esi+ebx],0ffh
79. jz@001
80. negebx
81. test[esi+ebx],0ffh
82. jnz@NextPixel
83. @001:
84. pushedi//Save(edi)
85. movebx,Matrix//ebx=Matrix
86. movedx,MatrixSize//for(I=0;I<MatrixSize;I++)
87. @Loop3://{
88. movecx,MatrixSize//for(J=0;J<=MatrixSize;J++)
89. @Loop4://{
90. mov al,[ebx]//*edi=max(*ebx,*edi)
91. cmp al,[edi]
92. jb @002
93. mov[edi],al
94. @002:
95. addedi,4//edi+=4
96. addebx,4//ebx+=4
97. loop@Loop4//}
98. addedi,mSize//edi+=mSize
99. decedx
100. jnz @Loop3//}
101. popedi//Reset(edi)
102. @NextPixel://}
103. addedi,4//edi+=4
104. addesi,4//esi+=4
105. incx
106. moveax,x
107. cmpeax,Width
108. jl@xLoop//}
109. addesi,rSize
110. addedi,rSize
111. incy
112. moveax,y
113. cmpeax,Height
114. jl@yLoop//}
116. popebx
117. popedi
118. popesi
119. end;
121. procedureGdipShadow(Data:TBitmapData;Buf:Pointer;Radius:LongWord);
122. var
123. Gauss:arrayofInteger;
124. Q:Double;
125. x,y,n,z:Integer;
126. p:PInteger;
127. begin
128. //根据半径计算高斯模糊矩阵
129. Q:=Radius/2;
130. ifQ=0thenQ:=0.1;
131. n:=Radiusshl1+1;
132. SetLength(Gauss,n*n);
133. p:=@Gauss[0];
134. z:=0;
135. forx:=-RadiustoRadiusdo
136. fory:=-RadiustoRadiusdo
137. begin
138. p^:=Round(Exp(-(x*x+y*y)/(2.0*Q*Q))/(2.0*PI*Q*Q)*1000.0);
139. Inc(z,p^);
140. Inc(p);
141. end;
142. MakeShadow(Data,Buf,Gauss,n,z);
143. end;
145. procedureGdipBorder(Data:TBitmapData;Buf:Pointer;Expand:LongWord;Color:TARGB);
146. var
147. bmp:TGpBitmap;
148. bg:TGpGraphics;
149. Data1:TBitmapData;
150. Size:Integer;
151. begin
152. Size:=Expandshl1+1;
153. bmp:=TGpBitmap.Create(Size,Size,pf32bppARGB);
154. bg:=TGpGraphics.Create(bmp);
155. try
156. //制造一个直径=Size，消除锯齿后的圆作为描边（或扩展）的位图画笔
157. bg.SmoothingMode:=smAntiAlias;
158. bg.PixelOffsetMode:=pmHalf;
159. bg.FillEllipse(Brushs[Color],0,0,Size,Size);
160. Data1:=bmp.LockBits(GpRect(0,0,Size,Size),[imRead],pf32bppARGB);
161. try
162. //用位图画笔扩展图像
163. MakeExpand(Data,Buf,Data1.Scan0,Size);
164. finally
165. bmp.UnlockBits(Data1);
166. end;
167. finally
168. bg.Free;
169. bmp.Free;
170. end;
171. end;
173. procedureDrawShadow(constg:TGpGraphics;constBitmap:TGpBitmap;
174. constlayoutRect:TGpRectF;ShadowSize,Distance:LongWord;
175. Angle:Single;Color:TARGB;Expand:LongWord);
176. var
177. dr,sr:TGpRectF;
178. Data:TBitmapData;
179. Buf:Pointer;
180. SaveScan0:Pointer;
181. begin
182. Data:=Bitmap.LockBits(GpRect(0,0,Bitmap.Width,Bitmap.Height),
183. [imRead,imWrite],pf32bppARGB);
184. GetMem(Buf,Data.Height*Data.Stride);
185. try
186. BackImage(Data,Buf,Color);
187. ifExpand>ShadowSizethen
188. Expand:=ShadowSize;
189. ifExpand<>0then//处理文字阴影扩展
190. ifExpand<>ShadowSizethen
191. begin
192. SaveScan0:=Data.Scan0;
193. Data.Scan0:=Buf;
194. GdipBorder(Data,SaveScan0,Expand,Color);
195. Data.Scan0:=SaveScan0;
196. endelse
197. GdipBorder(Data,Buf,Expand,Color);
198. ifExpand<>ShadowSizethen//处理文字阴影效果
199. GdipShadow(Data,Buf,ShadowSize-Expand);
200. finally
201. FreeMem(Buf);
202. Bitmap.UnlockBits(Data);
203. end;
204. sr:=GpRect(0.0,0.0,Data.Width,Data.Height);
205. //sr:=GpRect(0.0,0.0,layoutRect.Width+ShadowSize*2+2,
206. //layoutRect.Height+ShadowSize*2+2);
207. dr:=GpRect(layoutRect.Point,sr.Size);
208. //根据角度计算阴影位图在目标画布的偏移量
209. Offset(dr,Cos(PI*Angle/180)*Distance-ShadowSize-1,
210. Sin(PI*Angle/180)*Distance-ShadowSize-1);
211. //输出阴影位图到目标画布
212. g.DrawImage(Bitmap,dr,sr.X,sr.Y,sr.Width,sr.Height,utPixel);
213. end;
215. //计算并输出文字阴影效果
216. //g:文字输出的画布;str要输出的文字;font:字体;layoutRect:限定的文字输出范围
217. //ShadowSize:阴影大小;Distance:阴影距离;
218. //Angle:阴影输出角度(左边平行处为0度。顺时针方向)
219. //ShadowAlpha:阴影文字的不透明度;format:文字输出格式
220. procedureDrawShadowString(constg:TGpGraphics;conststr:WideString;
221. constfont:TGpFont;constlayoutRect:TGpRectF;
222. ShadowSize,Distance:LongWord;Angle:Single=60;
223. Color:TARGB=$C0000000;Expand:LongWord=0;
224. constformat:TGpStringFormat=nil);overload;
225. var
226. Bmp:TGpBitmap;
227. Bg:TGpGraphics;
228. begin
229. //建立透明的32位ARGB阴影位图，大小为layoutRect长、宽度+ShadowSize*2+2
230. Bmp:=TGpBitmap.Create(Round(layoutRect.Width+0.5)+ShadowSizeshl1+2,
231. Round(layoutRect.Height+0.5)+ShadowSizeshl1+2,
232. pf32bppARGB);
233. Bg:=TGpGraphics.Create(Bmp);
234. try
235. Bg.TextRenderingHint:=thAntiAlias;
236. //以Color不透明度的黑色画刷，在ShadowSize+1处输出文字到位图画布。
237. //方便黑色以外的阴影颜色替换（直接用Color画，模糊处理后很难看）
238. Bg.DrawString(str,font,Brushs[Colorand$FF000000],
239. GpRect(ShadowSize+1,ShadowSize+1,
240. layoutRect.Width,layoutRect.Height),format);
241. DrawShadow(g,Bmp,layoutRect,ShadowSize,Distance,Angle,Color,Expand);
242. finally
243. Bg.Free;
244. Bmp.Free;
245. end;
246. end;
248. //计算并输出文字阴影效果，除以输出点origin替代上面布局矩形外，其他参数同上
249. procedureDrawShadowString(constg:TGpGraphics;conststr:WideString;
250. constfont:TGpFont;constorigin:TGpPointF;
251. ShadowSize,Distance:LongWord;Angle:Single=60;
252. Color:TARGB=$C0000000;Expand:LongWord=0;
253. constformat:TGpStringFormat=nil);overload;
254. begin
255. DrawShadowString(g,str,font,g.MeasureString(str,font,origin,format),
256. ShadowSize,Distance,Angle,Color,Expand,format);
257. end;

上面代码中MakeShadow过程的代码在《GDI+ 在Delphi程序的应用 -- 可调节的文字阴影特效》一文中，本文没有贴出。由于代码中已经有了较详细的注释，故不再解释。下面贴出测试代码：

2. procedureTextPaint(g:TGpGraphics);
3. var
4. brush:TGpLinearGradientBrush;
5. font:TGpFont;
6. fontFamily:TGpFontFamily;
7. r:TGpRect;
8. begin
9. fontFamily:=TGpFontFamily.Create({'TimesNewRoman'}'华文行楷');
10. font:=TGpFont.Create(fontFamily,55,[fsBold],utPixel);
11. r:=GpRect(Form1.PaintBox1.ClientRect);
12. brush:=TGpLinearGradientBrush.Create(r,kcBlue,kcAliceBlue,90);
13. g.FillRectangle(Brush,r);
15. DrawShadowString(g,'文字阴影特效',font,GpPoint(10,r.Height/3),5,10,60,$C0000000,1);
16. DrawShadowString(g,'文字阴影特效',font,GpPoint(10,r.Height/3),1,0,60,$FFFF0000,1);
18. //DrawShadowString(g,'文字阴影特效',font,GpPoint(10,r.Height/3),5,12,60,$C0000000,1);
19. //DrawShadowString(g,'文字阴影特效',font,GpPoint(10,r.Height/3),2,3,60,$FFc00000,1);
20. g.TextRenderingHint:=thAntiAlias;
21. g.DrawString('文字阴影特效',font,Brushs.White,10,r.Height/3);
22. font.Free;
23. fontFamily.Free;
24. Brush.Free;
25. end;

以下是测试代码效果图，图一和图二都是文字描边（1个像素的边框）加阴影效果，其中图一没进行阴影扩展，即上面的15行的代码最后一个参数为0，图二是加了1个像素的阴影扩展效果（上述代码的“正宗”输出）：

图一

图二

利用改进的阴影效果，不仅可实现文字描边，也可显示类似立体文字的效果（改变显示距离），上面测试代码中，被注释的2句代码输出效果如下：

图三

至于图像的描边，似乎没有文字的描边效果好，究其原因，主要是图像的轮廓看起来好像是圆润平滑的，其实有很多半影锯齿，在Photoshop中，通过先选区后描边，可能对选区边缘作了处理，所以效果相当好（专业的软件，肯定有很好的算法）。下面是我对一张小图片作的描边处理代码和输出效果图：

1. //图像描边
2. //g:文字输出的画布;Image:图像;x,y:图像输出原点
3. //BorderWidth:总的边框宽度;Color:边框颜色;
4. //Expand:边框扩散大小;Attributes:图像显示属性
5. procedureDrawImageBorder(constg:TGpGraphics;constImage:TGpImage;
6. x,y:Single;BorderWidth:LongWord;Color:TARGB=kcWhite;
7. Expand:LongWord=0;constAttributes:TGpImageAttributes=nil);
8. var
9. Bmp:TGpBitmap;
10. Bg:TGpGraphics;
11. ColorMatrix:TColorMatrix;
12. Attr:TGpImageAttributes;
13. layoutRect:TGpRectF;
14. begin
15. Bmp:=TGpBitmap.Create(Image.Width+BorderWidthshl1+2,
16. Image.Height+BorderWidthshl1+2,
17. pf32bppARGB);
18. Bg:=TGpGraphics.Create(Bmp);
19. Attr:=Attributes;
20. ifAttr=nilthen
21. Attr:=TGpImageAttributes.Create;
22. try
23. FillChar(ColorMatrix,Sizeof(TColorMatrix),0);
24. ColorMatrix[3,3]:=1;
25. ColorMatrix[4,4]:=1;
26. //利用颜色矩阵将图像输出为黑色，以便边框颜色替换
27. Attr.SetColorMatrix(ColorMatrix);
28. layoutRect:=GpRect(x,y,Image.Width,Image.Height);
29. Bg.DrawImage(Image,
30. GpRect(BorderWidth+1,BorderWidth+1,layoutRect.Width,layoutRect.Height),
31. 0,0,layoutRect.Width,layoutRect.Height,utPixel,Attr);
32. DrawShadow(g,Bmp,layoutRect,BorderWidth,0,0,Color,BorderWidth-Expand);
33. finally
34. ifAttributes<>nilthen
35. Attr.ClearColorMatrix
36. else
37. Attr.Free;
38. Bg.Free;
39. Bmp.Free;
40. end;
41. end;
43. procedureImagePaint(g:TGpGraphics);
44. var
45. brush:TGpLinearGradientBrush;
46. r:TGpRect;
47. Image:TGpImage;
48. Attributes:TGpImageAttributes;
49. begin
50. r:=GpRect(Form1.PaintBox1.ClientRect);
51. brush:=TGpLinearGradientBrush.Create(r,kcBlue,kcAliceBlue,90);
52. g.FillRectangle(Brush,r);
53. Image:=TGpImage.Create('..\..\Media\Watermark.bmp');
54. //画原图
55. g.TranslateTransform(20,r.Height/3);
56. g.DrawImage(Image,0,0,Image.Width,Image.Height);
57. //设置图像透明色
58. Attributes:=TGpImageAttributes.Create;
59. Attributes.SetColorKey($ff00ff00,$ff00ff00);
60. //画2个像素的描边图
61. g.TranslateTransform(Image.Width+20,0);
62. DrawImageBorder(g,Image,0,0,2,kcWhite,0,Attributes);
63. g.DrawImage(Image,GpRect(0.0,0,Image.Width,Image.Height),
64. 0.0,0.0,Image.Width,Image.Height,utPixel,Attributes);
65. //画5个像素的描边图，其中扩散3像素
66. g.TranslateTransform(Image.Width+20,0);
67. DrawImageBorder(g,Image,0,0,5,kcWhite,3,Attributes);
68. g.DrawImage(Image,GpRect(0.0,0,Image.Width,Image.Height),
69. 0.0,0.0,Image.Width,Image.Height,utPixel,Attributes);
70. Attributes.Free;
71. Brush.Free;
72. Image.Free;
73. end;

图四

上面的效果图中，左边是原图，中间是2个像素的描边图，右边是5个像素的描边图，其中有3像素的模糊扩散。从图中可以看出，我以$ff00ff00为透明色处理图像四个角后，在中间和右边的描边图中，还是很明显的看到四个角有很淡的绿色，正是这个原因，在中间图的圆角描边有明显的锯齿。

最后作几点说明：

1、本文纯属业余学习和研究的心得，并非什么正宗的算法；

2、因为本文代码是学习时即兴写的，并非优化代码，而且是以过程形式出现的，有兴趣的朋友可以自己进行优化改进，写成类或者元件更好（由于算法和功能都不是很完善，所以我没写成类的形式）；

3、例子中的GDI+版本系本人自己改写的，与网上流通的版本不完全兼容，如需使用本版本，请参照《GDI+ for VCL基础 -- GDI+ 与 VCL 》一文的下载地址，并请留意后面的修改说明。

4、如有好的建议，请来信：maozefa@hotmail.com

更新(2008-8-5 12:50)：在MakeExpand过程中，是按图象逐点用位图画笔矩阵填充的，每个像素点都要进行矩阵大小的操作，最小的1像素扩展的矩阵大小为3 * 3，可见扩展速度是不大理想的。今天对代码作了一点修改，对每个象素点都进行了判断，如果是边界像素，则作画笔矩阵填充，否则直接跳过，这样一来，速度应该提高不少（没作测试，增加的代码用红色标出，有兴趣者可以测试）。