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

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

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

 

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

 

1. // 备份图像。Data: GDI+位图数据，32位ARGB格式; Dest: 备份目标; Color: 阴影颜色
2. procedure BackImage(Data: TBitmapData; Dest: Pointer; Color: TARGB);
3. asm
4.     push    esi
5.     push    edi
7.     mov     esi, [eax + 16]   // esi = Data.Scan0
8.     mov     edi, edx          // esi = Dest
9.     mov     edx, ecx          // edx = Color & 0xffffff
10.     and     edx, 0FFFFFFh
11.     mov     ecx, [eax]        // ecx = Data.Height * Data.Width
12.     imul    ecx, [eax + 4]
13.     cld
15.   @Loop:                       // for (; ecx >= 0; ecx --)
16.     or      [esi], edx
17.     movsd                      //   *edi++ = *esi++ & 0xff000000 | edx
18.     loop    @Loop
20.     pop     edi
21.     pop     esi
22. end;
24. // 扩展。Data: GDI+位图数据，32位ARGB格式; Source: 复制的源
25. // ExpMatrix: 卷积矩阵; MatrixSize：矩阵大小
26. procedure MakeExpand(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.     push    esi
36.     push    edi
37.     push    ebx
39.     mov     esi, edx          // esi = Source
40.     mov     edi, [eax + 16]   // edi = Data.Scan0 + 3 (Alpha byte)
41.     add     edi, 3
42.     add     ecx, 3
43.     mov     Matrix, ecx       // Matrix = ExpMatrix + 3 (Alpha byte)
44.     mov     ecx, MatrixSize
45.     mov     edx, ecx
46.     dec     ecx
47.     mov     ebx, [eax]
48.     sub     ebx, ecx
49.     mov     Width, ebx        // Width = Data.Width - (MatrixSize - 1)
50.     mov     ebx, [eax + 4]
51.     sub     ebx, ecx
52.     mov     Height, ebx       // Height = Data.Height - (MatrixSize - 1)
53.     shr     ecx, 1
54.     mov     Radius, ecx       // Radius = MatrixSize / 2
55.     mov     eax, [eax + 8]
56.     mov     Stride, eax
57.     mov     mSize, eax
58.     shl     edx, 2
59.     sub     mSize, edx        // mSize = Data.Stride - MatrixSize * 4
60.     add     eax, 4
61.     imul    eax, ecx
62.     add     eax, 3
63.     add     esi, eax          // esi = esi + (Data.Stride * Radius + Radius * 4 + 3)
64.     shl     ecx, 3
65.     mov     rSize, ecx        // rSize = Radius * 2 * 4
67.     mov     y, 0              // for (y = 0; y < Height; y ++)
68.   @yLoop:                     // {
69.     mov     x, 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.     mov     ebx, Stride
78.     test    [esi + ebx], 0ffh
79.     jz      @001
80.     neg     ebx
81.     test    [esi + ebx], 0ffh
82.     jnz     @NextPixel
83.   @001:
84.     push    edi               //       Save(edi)
85.     mov     ebx, Matrix       //       ebx = Matrix
86.     mov     edx, MatrixSize   //       for (I = 0; I < MatrixSize; I ++)
87.   @Loop3:                     //       {
88.     mov     ecx, 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.     add     edi, 4            //           edi += 4
96.     add     ebx, 4            //           ebx += 4
97.     loop    @Loop4            //         }
98.     add     edi, mSize        //         edi += mSize
99.     dec     edx
100.     jnz     @Loop3            //       }
101.     pop     edi               //       Reset(edi)
102.   @NextPixel:                 //     }
103.     add     edi, 4            //     edi += 4
104.     add     esi, 4            //     esi += 4
105.     inc     x
106.     mov     eax, x
107.     cmp     eax, Width
108.     jl      @xLoop            //   }
109.     add     esi, rSize
110.     add     edi, rSize
111.     inc     y
112.     mov     eax, y
113.     cmp     eax, Height
114.     jl      @yLoop            // }
116.     pop     ebx
117.     pop     edi
118.     pop     esi
119. end;
121. procedure GdipShadow(Data: TBitmapData; Buf: Pointer; Radius: LongWord);
122. var
123.   Gauss: array of Integer;
124.   Q: Double;
125.   x, y, n, z: Integer;
126.   p: PInteger;
127. begin
128.   // 根据半径计算高斯模糊矩阵
129.   Q := Radius / 2;
130.   if Q = 0 then Q := 0.1;
131.   n := Radius shl 1 + 1;
132.   SetLength(Gauss, n * n);
133.   p := @Gauss[0];
134.   z := 0;
135.   for x := -Radius to Radius do
136.     for y := -Radius to Radius do
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. procedure GdipBorder(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 := Expand shl 1 + 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. procedure DrawShadow(const g: TGpGraphics; const Bitmap: TGpBitmap;
174.     const layoutRect: 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.     if Expand > ShadowSize then
188.       Expand := ShadowSize;
189.     if Expand <> 0 then            // 处理文字阴影扩展
190.       if Expand <> ShadowSize then
191.       begin
192.         SaveScan0 := Data.Scan0;
193.         Data.Scan0 := Buf;
194.         GdipBorder(Data, SaveScan0, Expand, Color);
195.         Data.Scan0 := SaveScan0;
196.       end else
197.         GdipBorder(Data, Buf, Expand, Color);
198.     if Expand <> ShadowSize then   // 处理文字阴影效果
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. procedure DrawShadowString(const g: TGpGraphics; const str: WideString;
221.     const font: TGpFont; const layoutRect: TGpRectF;
222.     ShadowSize, Distance: LongWord; Angle: Single = 60;
223.     Color: TARGB = $C0000000; Expand: LongWord = 0;
224.     const format: 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) + ShadowSize shl 1 + 2,
231.                           Round(layoutRect.Height + 0.5) + ShadowSize shl 1 + 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[Color and $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. procedure DrawShadowString(const g: TGpGraphics; const str: WideString;
250.     const font: TGpFont; const origin: TGpPointF;
251.     ShadowSize, Distance: LongWord; Angle: Single = 60;
252.     Color: TARGB = $C0000000; Expand: LongWord = 0;
253.     const format: 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. procedure TextPaint(g: TGpGraphics);
3. var
4.   brush: TGpLinearGradientBrush;
5.   font: TGpFont;
6.   fontFamily: TGpFontFamily;
7.   r: TGpRect;
8. begin
9.   fontFamily := TGpFontFamily.Create({'Times New Roman'}'华文行楷');
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. procedure DrawImageBorder(const g: TGpGraphics; const Image: TGpImage;
6.     x, y: Single; BorderWidth: LongWord; Color: TARGB = kcWhite;
7.     Expand: LongWord = 0; const Attributes: 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 + BorderWidth shl 1 + 2,
16.                           Image.Height + BorderWidth shl 1 + 2,
17.                           pf32bppARGB);
18.   Bg := TGpGraphics.Create(Bmp);
19.   Attr := Attributes;
20.   if Attr = nil then
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.     if Attributes <> nil then
35.       Attr.ClearColorMatrix
36.     else
37.       Attr.Free;
38.     Bg.Free;
39.     Bmp.Free;
40.   end;
41. end;
43. procedure ImagePaint(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，可见扩展速度是不大理想的。今天对代码作了一点修改，对每个象素点都进行了判断，如果是边界像素，则作画笔矩阵填充，否则直接跳过，这样一来，速度应该提高不少（没作测试，增加的代码用红色标出，有兴趣者可以测试）。