分享动态生成文字图片解决方案
大家都知道我们如果想把网页上的文字做出比较炫的效果,便只能用POTOSHOP、FIREWORK等图像处理软件把文字做成图片来实现,因为这样才不会依赖浏览者的字体、浏览器类型等。可是在我们的WEB应用中又往往是动态的文字,我们便不能用图像处理软件来处理了,只能让WEB程序动态生成,幸运地是.Net Framework给我们提供了便利,下面我们就利用System.Drawing命名空间下的Bitmap类与Graphics类来编写一个生成文字图片的类,使用该类生成图片时能满足以下需求:
1、可以指定文字字体、大小和颜色(注:指定的文字在WEB服务器上需要有该字库);
2、可以加文字阴影;
3、可以指定文字的透明度;
4、可以指定背景图片或背景颜色;
5、可以指定生成的图片大小(宽度与高度);
6、可以指定文字的位置(左边距和上边距);
7、当用户设定的文字字号太大,能自动调整文字大小使之能适应生成图片的大小。
该类实现代码如下:
1
using System.Drawing;
2
using System.Drawing.Drawing2D;
3
using System.Drawing.Imaging;
4![](/Images/OutliningIndicators/None.gif)
5
namespace Ycweb.Controls.Utility
6
{
7
/// <summary>
8
/// WaterMark
9
/// </summary>
10
public class Watermark
11
{
12
private int _width;
13
private int _height;
14
private string _fontFamily;
15
private int _fontSize;
16
private bool _adaptable;
17
private FontStyle _fontStyle;
18
private bool _shadow;
19
private string _backgroundImage;
20
private Color _bgColor;
21
private int _left;
22
private string _resultImage;
23
private string _text;
24
private int _top;
25
private int _alpha;
26
private int _red;
27
private int _green;
28
private int _blue;
29
private long _quality;
30![](/Images/OutliningIndicators/InBlock.gif)
31![](/Images/OutliningIndicators/InBlock.gif)
32![](/Images/OutliningIndicators/InBlock.gif)
33
public Watermark()
34
{
35
//
36
// TODO: Add constructor logic here
37
//
38
_width=460;
39
_height=30;
40
_fontFamily = "华文行楷";
41
_fontSize = 20;
42
_fontStyle=FontStyle.Regular;
43
_adaptable=true;
44
_shadow=false;
45
_left = 0;
46
_top = 0;
47
_alpha = 255;
48
_red = 0;
49
_green = 0;
50
_blue = 0;
51
_backgroundImage="";
52
_quality=100;
53
_bgColor=Color.FromArgb(255,229,229,229);
54
55
}
56![](/Images/OutliningIndicators/InBlock.gif)
57
/// <summary>
58
/// 字体
59
/// </summary>
60
public string FontFamily
61
{
62
set { this._fontFamily = value; }
63
}
64![](/Images/OutliningIndicators/InBlock.gif)
65
/// <summary>
66
/// 文字大小
67
/// </summary>
68
public int FontSize
69
{
70
set { this._fontSize = value; }
71
}
72![](/Images/OutliningIndicators/InBlock.gif)
73
/// <summary>
74
/// 文字风格
75
/// </summary>
76
public FontStyle FontStyle
77
{
78
get{return _fontStyle;}
79
set{_fontStyle = value;}
80
}
81![](/Images/OutliningIndicators/InBlock.gif)
82
/// <summary>
83
/// 透明度0-255,255表示不透明
84
/// </summary>
85
public int Alpha
86
{
87
get { return _alpha; }
88
set { _alpha = value; }
89
}
90![](/Images/OutliningIndicators/InBlock.gif)
91
/// <summary>
92
/// 水印文字是否使用阴影
93
/// </summary>
94
public bool Shadow
95
{
96
get { return _shadow; }
97
set { _shadow = value; }
98
}
99![](/Images/OutliningIndicators/InBlock.gif)
100
public int Red
101
{
102
get { return _red; }
103
set { _red = value; }
104
}
105![](/Images/OutliningIndicators/InBlock.gif)
106
public int Green
107
{
108
get { return _green; }
109
set { _green = value; }
110
}
111![](/Images/OutliningIndicators/InBlock.gif)
112
public int Blue
113
{
114
get { return _blue; }
115
set { _blue = value; }
116
}
117![](/Images/OutliningIndicators/InBlock.gif)
118
/// <summary>
119
/// 底图
120
/// </summary>
121
public string BackgroundImage
122
{
123
set { this._backgroundImage = value; }
124
}
125![](/Images/OutliningIndicators/InBlock.gif)
126
/// <summary>
127
/// 水印文字的左边距
128
/// </summary>
129
public int Left
130
{
131
set { this._left = value; }
132
}
133![](/Images/OutliningIndicators/InBlock.gif)
134
135
/// <summary>
136
/// 水印文字的顶边距
137
/// </summary>
138
public int Top
139
{
140
set { this._top = value; }
141
}
142![](/Images/OutliningIndicators/InBlock.gif)
143
/// <summary>
144
/// 生成后的图片
145
/// </summary>
146
public string ResultImage
147
{
148
set { this._resultImage = value; }
149
}
150![](/Images/OutliningIndicators/InBlock.gif)
151
/// <summary>
152
/// 水印文本
153
/// </summary>
154
public string Text
155
{
156
set { this._text = value; }
157
}
158![](/Images/OutliningIndicators/InBlock.gif)
159
160
/// <summary>
161
/// 生成图片的宽度
162
/// </summary>
163
public int Width
164
{
165
get { return _width; }
166
set { _width = value; }
167
}
168![](/Images/OutliningIndicators/InBlock.gif)
169
/// <summary>
170
/// 生成图片的高度
171
/// </summary>
172
public int Height
173
{
174
get { return _height; }
175
set { _height = value; }
176
}
177![](/Images/OutliningIndicators/InBlock.gif)
178
/// <summary>
179
/// 若文字太大,是否根据背景图来调整文字大小,默认为适应
180
/// </summary>
181
public bool Adaptable
182
{
183
get { return _adaptable; }
184
set { _adaptable = value; }
185
}
186![](/Images/OutliningIndicators/InBlock.gif)
187
public Color BgColor
188
{
189
get { return _bgColor; }
190
set { _bgColor = value; }
191
}
192![](/Images/OutliningIndicators/InBlock.gif)
193
/// <summary>
194
/// 输出图片质量,质量范围0-100,类型为long
195
/// </summary>
196
public long Quality
197
{
198
get { return _quality; }
199
set { _quality = value; }
200
}
201![](/Images/OutliningIndicators/InBlock.gif)
202
/// <summary>
203
/// 立即生成水印效果图
204
/// </summary>
205
/// <returns>生成成功返回true,否则返回false</returns>
206
public bool Create()
207
{
208
try
209
{
210
Bitmap bitmap;
211
Graphics g;
212![](/Images/OutliningIndicators/InBlock.gif)
213
//使用纯背景色
214
if(this._backgroundImage.Trim()=="")
215
{
216
bitmap = new Bitmap(this._width, this._height, PixelFormat.Format64bppArgb);
217
g = Graphics.FromImage(bitmap);
218
g.Clear(this._bgColor);
219
}
220
else
221
{
222
bitmap = new Bitmap(Image.FromFile(this._backgroundImage));
223
g = Graphics.FromImage(bitmap);
224
}
225
g.SmoothingMode = SmoothingMode.HighQuality;
226
g.InterpolationMode = InterpolationMode.HighQualityBicubic;
227
g.CompositingQuality=CompositingQuality.HighQuality;
228![](/Images/OutliningIndicators/InBlock.gif)
229
Font f = new Font(_fontFamily, _fontSize,_fontStyle);
230
SizeF size = g.MeasureString(_text, f);
231
232
// 调整文字大小直到能适应图片尺寸
233
while(_adaptable==true && size.Width > bitmap.Width)
234
{
235
_fontSize--;
236
f = new Font(_fontFamily, _fontSize, _fontStyle);
237
size = g.MeasureString(_text, f);
238
}
239
240
Brush b = new SolidBrush(Color.FromArgb(_alpha, _red, _green, _blue));
241
StringFormat StrFormat = new StringFormat();
242
StrFormat.Alignment = StringAlignment.Near;
243![](/Images/OutliningIndicators/InBlock.gif)
244
if(this._shadow)
245
{
246
Brush b2=new SolidBrush(Color.FromArgb(90, 0, 0, 0));
247
g.DrawString(_text, f, b2,_left+2, _top+1);
248
}
249
g.DrawString(_text, f, b, new PointF(_left, _top), StrFormat);
250
251
bitmap.Save(this._resultImage, ImageFormat.Jpeg);
252
bitmap.Dispose();
253
g.Dispose();
254
return true;
255
}
256
catch
257
{
258
return false;
259
}
260
}
261
}
262![](/Images/OutliningIndicators/InBlock.gif)
263![](/Images/OutliningIndicators/InBlock.gif)
264
}
![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/None.gif)
4
![](/Images/OutliningIndicators/None.gif)
5
![](/Images/OutliningIndicators/None.gif)
6
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
7
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
8
![](/Images/OutliningIndicators/InBlock.gif)
9
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
10
![](/Images/OutliningIndicators/InBlock.gif)
11
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
12
![](/Images/OutliningIndicators/InBlock.gif)
13
![](/Images/OutliningIndicators/InBlock.gif)
14
![](/Images/OutliningIndicators/InBlock.gif)
15
![](/Images/OutliningIndicators/InBlock.gif)
16
![](/Images/OutliningIndicators/InBlock.gif)
17
![](/Images/OutliningIndicators/InBlock.gif)
18
![](/Images/OutliningIndicators/InBlock.gif)
19
![](/Images/OutliningIndicators/InBlock.gif)
20
![](/Images/OutliningIndicators/InBlock.gif)
21
![](/Images/OutliningIndicators/InBlock.gif)
22
![](/Images/OutliningIndicators/InBlock.gif)
23
![](/Images/OutliningIndicators/InBlock.gif)
24
![](/Images/OutliningIndicators/InBlock.gif)
25
![](/Images/OutliningIndicators/InBlock.gif)
26
![](/Images/OutliningIndicators/InBlock.gif)
27
![](/Images/OutliningIndicators/InBlock.gif)
28
![](/Images/OutliningIndicators/InBlock.gif)
29
![](/Images/OutliningIndicators/InBlock.gif)
30
![](/Images/OutliningIndicators/InBlock.gif)
31
![](/Images/OutliningIndicators/InBlock.gif)
32
![](/Images/OutliningIndicators/InBlock.gif)
33
![](/Images/OutliningIndicators/InBlock.gif)
34
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
35
![](/Images/OutliningIndicators/InBlock.gif)
36
![](/Images/OutliningIndicators/InBlock.gif)
37
![](/Images/OutliningIndicators/InBlock.gif)
38
![](/Images/OutliningIndicators/InBlock.gif)
39
![](/Images/OutliningIndicators/InBlock.gif)
40
![](/Images/OutliningIndicators/InBlock.gif)
41
![](/Images/OutliningIndicators/InBlock.gif)
42
![](/Images/OutliningIndicators/InBlock.gif)
43
![](/Images/OutliningIndicators/InBlock.gif)
44
![](/Images/OutliningIndicators/InBlock.gif)
45
![](/Images/OutliningIndicators/InBlock.gif)
46
![](/Images/OutliningIndicators/InBlock.gif)
47
![](/Images/OutliningIndicators/InBlock.gif)
48
![](/Images/OutliningIndicators/InBlock.gif)
49
![](/Images/OutliningIndicators/InBlock.gif)
50
![](/Images/OutliningIndicators/InBlock.gif)
51
![](/Images/OutliningIndicators/InBlock.gif)
52
![](/Images/OutliningIndicators/InBlock.gif)
53
![](/Images/OutliningIndicators/InBlock.gif)
54
![](/Images/OutliningIndicators/InBlock.gif)
55
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
56
![](/Images/OutliningIndicators/InBlock.gif)
57
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
58
![](/Images/OutliningIndicators/InBlock.gif)
59
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
60
![](/Images/OutliningIndicators/InBlock.gif)
61
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
62
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
63
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
64
![](/Images/OutliningIndicators/InBlock.gif)
65
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
66
![](/Images/OutliningIndicators/InBlock.gif)
67
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
68
![](/Images/OutliningIndicators/InBlock.gif)
69
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
70
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
71
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
72
![](/Images/OutliningIndicators/InBlock.gif)
73
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
74
![](/Images/OutliningIndicators/InBlock.gif)
75
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
76
![](/Images/OutliningIndicators/InBlock.gif)
77
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
78
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
79
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
80
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
81
![](/Images/OutliningIndicators/InBlock.gif)
82
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
83
![](/Images/OutliningIndicators/InBlock.gif)
84
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
85
![](/Images/OutliningIndicators/InBlock.gif)
86
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
87
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
88
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
89
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
90
![](/Images/OutliningIndicators/InBlock.gif)
91
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
92
![](/Images/OutliningIndicators/InBlock.gif)
93
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
94
![](/Images/OutliningIndicators/InBlock.gif)
95
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
96
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
97
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
98
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
99
![](/Images/OutliningIndicators/InBlock.gif)
100
![](/Images/OutliningIndicators/InBlock.gif)
101
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
102
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
103
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
104
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
105
![](/Images/OutliningIndicators/InBlock.gif)
106
![](/Images/OutliningIndicators/InBlock.gif)
107
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
108
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
109
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
110
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
111
![](/Images/OutliningIndicators/InBlock.gif)
112
![](/Images/OutliningIndicators/InBlock.gif)
113
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
114
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
115
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
116
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
117
![](/Images/OutliningIndicators/InBlock.gif)
118
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
119
![](/Images/OutliningIndicators/InBlock.gif)
120
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
121
![](/Images/OutliningIndicators/InBlock.gif)
122
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
123
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
124
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
125
![](/Images/OutliningIndicators/InBlock.gif)
126
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
127
![](/Images/OutliningIndicators/InBlock.gif)
128
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
129
![](/Images/OutliningIndicators/InBlock.gif)
130
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
131
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
132
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
133
![](/Images/OutliningIndicators/InBlock.gif)
134
![](/Images/OutliningIndicators/InBlock.gif)
135
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
136
![](/Images/OutliningIndicators/InBlock.gif)
137
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
138
![](/Images/OutliningIndicators/InBlock.gif)
139
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
140
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
141
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
142
![](/Images/OutliningIndicators/InBlock.gif)
143
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
144
![](/Images/OutliningIndicators/InBlock.gif)
145
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
146
![](/Images/OutliningIndicators/InBlock.gif)
147
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
148
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
149
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
150
![](/Images/OutliningIndicators/InBlock.gif)
151
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
152
![](/Images/OutliningIndicators/InBlock.gif)
153
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
154
![](/Images/OutliningIndicators/InBlock.gif)
155
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
156
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
157
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
158
![](/Images/OutliningIndicators/InBlock.gif)
159
![](/Images/OutliningIndicators/InBlock.gif)
160
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
161
![](/Images/OutliningIndicators/InBlock.gif)
162
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
163
![](/Images/OutliningIndicators/InBlock.gif)
164
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
165
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
166
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
167
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
168
![](/Images/OutliningIndicators/InBlock.gif)
169
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
170
![](/Images/OutliningIndicators/InBlock.gif)
171
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
172
![](/Images/OutliningIndicators/InBlock.gif)
173
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
174
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
175
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
176
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
177
![](/Images/OutliningIndicators/InBlock.gif)
178
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
179
![](/Images/OutliningIndicators/InBlock.gif)
180
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
181
![](/Images/OutliningIndicators/InBlock.gif)
182
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
183
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
184
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
185
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
186
![](/Images/OutliningIndicators/InBlock.gif)
187
![](/Images/OutliningIndicators/InBlock.gif)
188
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
189
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
190
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
191
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
192
![](/Images/OutliningIndicators/InBlock.gif)
193
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
194
![](/Images/OutliningIndicators/InBlock.gif)
195
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
196
![](/Images/OutliningIndicators/InBlock.gif)
197
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
198
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
199
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
200
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
201
![](/Images/OutliningIndicators/InBlock.gif)
202
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
203
![](/Images/OutliningIndicators/InBlock.gif)
204
![](/Images/OutliningIndicators/InBlock.gif)
205
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
206
![](/Images/OutliningIndicators/InBlock.gif)
207
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
208
![](/Images/OutliningIndicators/InBlock.gif)
209
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
210
![](/Images/OutliningIndicators/InBlock.gif)
211
![](/Images/OutliningIndicators/InBlock.gif)
212
![](/Images/OutliningIndicators/InBlock.gif)
213
![](/Images/OutliningIndicators/InBlock.gif)
214
![](/Images/OutliningIndicators/InBlock.gif)
215
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
216
![](/Images/OutliningIndicators/InBlock.gif)
217
![](/Images/OutliningIndicators/InBlock.gif)
218
![](/Images/OutliningIndicators/InBlock.gif)
219
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
220
![](/Images/OutliningIndicators/InBlock.gif)
221
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
222
![](/Images/OutliningIndicators/InBlock.gif)
223
![](/Images/OutliningIndicators/InBlock.gif)
224
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
225
![](/Images/OutliningIndicators/InBlock.gif)
226
![](/Images/OutliningIndicators/InBlock.gif)
227
![](/Images/OutliningIndicators/InBlock.gif)
228
![](/Images/OutliningIndicators/InBlock.gif)
229
![](/Images/OutliningIndicators/InBlock.gif)
230
![](/Images/OutliningIndicators/InBlock.gif)
231
![](/Images/OutliningIndicators/InBlock.gif)
232
![](/Images/OutliningIndicators/InBlock.gif)
233
![](/Images/OutliningIndicators/InBlock.gif)
234
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
235
![](/Images/OutliningIndicators/InBlock.gif)
236
![](/Images/OutliningIndicators/InBlock.gif)
237
![](/Images/OutliningIndicators/InBlock.gif)
238
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
239
![](/Images/OutliningIndicators/InBlock.gif)
240
![](/Images/OutliningIndicators/InBlock.gif)
241
![](/Images/OutliningIndicators/InBlock.gif)
242
![](/Images/OutliningIndicators/InBlock.gif)
243
![](/Images/OutliningIndicators/InBlock.gif)
244
![](/Images/OutliningIndicators/InBlock.gif)
245
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
246
![](/Images/OutliningIndicators/InBlock.gif)
247
![](/Images/OutliningIndicators/InBlock.gif)
248
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
249
![](/Images/OutliningIndicators/InBlock.gif)
250
![](/Images/OutliningIndicators/InBlock.gif)
251
![](/Images/OutliningIndicators/InBlock.gif)
252
![](/Images/OutliningIndicators/InBlock.gif)
253
![](/Images/OutliningIndicators/InBlock.gif)
254
![](/Images/OutliningIndicators/InBlock.gif)
255
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
256
![](/Images/OutliningIndicators/InBlock.gif)
257
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
258
![](/Images/OutliningIndicators/InBlock.gif)
259
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
260
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
261
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
262
![](/Images/OutliningIndicators/InBlock.gif)
263
![](/Images/OutliningIndicators/InBlock.gif)
264
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
调用则相当简单,在此不予赘述,特把我使用的效果抓个图,以供大家参考
如果你有好的建议或疑惑都可以跟我联系MSN:AspSir#hotmail.com