前言
这篇文章是 gdi+ 总结系列的第三篇，如果对 gdi+ 的基础使用不熟悉的朋友可以先看第一篇文章《c# 使用 gdi+ 画图》。
需求
需求是要实现给图片添加任意角度旋转的文字，文字的旋转中心要是在文字区域中央，就像 css 的 rotate 函数一样的效果。如下：
分析&思路
graphics 类有个 rotatetransform 方法，可以传入任意角度的值来旋转画板。但是这个方法的旋转中心是画板的左上角，所以直接单单用这个方法不能满足我们的需求。此外， graphics 类还有个 translatetransform 方法可以改变坐标的原点，而且这个方法是沿着矩形的x,y轴平移的，即就算图片旋转了一定的角度后，再调用 translatetransform 方法，它还是沿着x,y轴平移。于是通过以下三个步骤即可实现图片中心旋转。
- 把画板(graphics对象)原点平移到矩形中心位置(x, y)
- 在(x, y)位置绕原点旋转画板n度
- 画板退回(-x, -y)的距离
还是看不懂的同学看下面的图应该就明白了
明白了原理，那不容易推断出，如果要旋转的中心不是图片中心而是文字中心，那步骤还是一样的，只是把(x, y)改为文字中心的坐标就好了。
除了上面说的方法，其实还有一个方法可以实现中心旋转，那就是使用 matrix 类。 matrix 类的 rotateat 方法可以指定矩阵旋转的中心位置。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
// // 摘要: // 沿 point 参数中指定的点并通过预先计算该旋转，来顺时针旋转此 system.drawing.drawing2d.matrix。 // // 参数: // angle: // 旋转角度（范围）（单位：度）。 // // point: // 一个 system.drawing.pointf，表示旋转中心。 [targetedpatchingoptout("performance critical to inline this type of method across ngen image boundaries")] public void rotateat(float angle, pointf point); |
graphics 类的 transform 属性返回的就是 matrix 对象，该属性可以 get 、 set 。因此我们先获取原来的画板的矩阵，然后使用 rotateat 方法旋转该矩阵，再把旋转后的矩阵赋值给画板就好了。
具体实现
添加任意角度文字方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
/// <summary>/// 图片添加任意角度文字(文字旋转是中心旋转，角度顺时针为正)/// </summary>/// <param name="imgpath">图片路径</param>/// <param name="locationlefttop">文字左上角定位(x1,y1)</param>/// <param name="fontsize">字体大小，单位为像素</param>/// <param name="text">文字内容</param>/// <param name="angle">文字旋转角度</param>/// <param name="fontname">字体名称</param>/// <returns>添加文字后的bitmap对象</returns>public bitmap addtext(string imgpath, string locationlefttop, int fontsize, string text, int angle = 0, string fontname = "华文行楷"){ image img = image.fromfile(imgpath); int width = img.width; int height = img.height; bitmap bmp = new bitmap(width, height); graphics graphics = graphics.fromimage(bmp); // 画底图 graphics.drawimage(img, 0, 0, width, height); font font = new font(fontname, fontsize, graphicsunit.pixel); sizef sf = graphics.measurestring(text, font); // 计算出来文字所占矩形区域 // 左上角定位 string[] location = locationlefttop.split(','); float x1 = float.parse(location[0]); float y1 = float.parse(location[1]); // 进行文字旋转的角度定位 if (angle != 0) { #region 法一：translatetransform平移 + rotatetransform旋转 /* * 注意： * graphics.rotatetransform的旋转是以graphics对象的左上角为原点，旋转整个画板的。 * 同时x，y坐标轴也会跟着旋转。即旋转后的x，y轴依然与矩形的边平行 * 而graphics.translatetransform方法，是沿着x，y轴平移的 * 因此分三步可以实现中心旋转 * 1.把画板(graphics对象)平移到旋转中心 * 2.旋转画板 * 3.把画板平移退回相同的距离(此时的x，y轴仍然是与旋转后的矩形平行的) */ //// 把画板的原点(默认是左上角)定位移到文字中心 //graphics.translatetransform(x1 + sf.width / 2, y1 + sf.height / 2); //// 旋转画板 //graphics.rotatetransform(angle); //// 回退画板x,y轴移动过的距离 //graphics.translatetransform(-(x1 + sf.width / 2), -(y1 + sf.height / 2)); #endregion #region 法二：矩阵旋转 matrix matrix = graphics.transform; matrix.rotateat(angle, new pointf(x1 + sf.width / 2, y1 + sf.height / 2)); graphics.transform = matrix; #endregion } // 写上自定义角度的文字 graphics.drawstring(text, font, new solidbrush(color.black), x1, y1); graphics.dispose(); img.dispose(); return bmp;} |
ps：这里简单解释一下为什么文字中心是 (x1 + sf.width / 2, y1 + sf.height / 2) ，因为 (x, y) 是左上角，而 sf.width 、 sf.height 是文字矩形区域宽、高。如图：
测试调用
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
private static void main(string[] args){ try { console.writeline("start drawing ..."); drawingentity drawing = new drawingentity(); system.drawing.bitmap bmp = drawing.addtext(@"d:\test\1.png", "176.94,150.48", 66, "写点啥好呢", 30); bmp.save(@"d:\test\output.png"); bmp.dispose(); console.writeline("done!"); } catch (system.exception ex) { console.writeline(ex.tostring()); } finally { system.console.writeline("\npress any key to continue ..."); system.console.readkey(); }} |
最终效果
没有旋转时
中心旋转30度
总结
以上所述是小编给大家介绍的c# 使用 gdi+ 实现添加中心旋转(任意角度)的文字，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对服务器之家网站的支持！
原文链接：http://www.cnblogs.com/dandelion-drq/p/csharp_use_gdiplus_to_rotate_text.html
