需求
这篇文章是 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
| [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
|
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旋转
#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(); } }
|
最终效果
相关链接(侵删)
- C# 使用 GDI+ 实现添加中心旋转(任意角度)的文字
=================我是分割线=================
欢迎到公众号来唠嗑: