CSharpGL(28)得到高精度可定制字形贴图的极简方法

CSharpGL(28)得到高精度可定制字形贴图的极简方法

回顾

以前我用SharpFont实现了解析TTF文件从而获取字形贴图的功能，并最终实现了用OpenGL渲染文字。

使用SharpFont，美中不足的是：

SharpFont太大了，有上千行代码，且逻辑复杂难懂。

SharpFont画出的字形精度有限，虽然也很高，但是确实有限。用OpenGL渲染出来后会发现边缘不是特别清晰。

SharpFont对加粗、斜体、下划线、删除线如何支持，能否支持？完全不知道。

Graphics+Font

最近我在分析GLGUI（https://github.com/bitzhuwei/GLGUI）的代码时，惊喜地发现它给出了一个极其简单的方案，就是SizeF MeasureString(string text, Font font);和DrawString(string s, Font font, Brush brush, float x, float y);。

Graphics.MeasureString()能够得到任意字符串的Size。

Graphics.DrawString()能把任意字符串写到Bitmap上。

单个字形

首先我们要得到每个字形的Size。

由于MeasureString()返回的字形宽度大于字形实际宽度，所以需要缩减一下。

         /// <summary>
         /// Get glyph's size by graphics.MeasureString().
         /// Then shrink glyph's size.
         /// xoffset now means offset in a single glyph's bitmap.
         /// </summary>
         /// <param name="fontBitmap"></param>
         /// <param name="charSet"></param>
         /// <param name="singleCharWidth"></param>
         /// <param name="singleCharHeight"></param>
         private static void PrepareInitialGlyphDict(FontBitmap fontBitmap, string charSet, out int singleCharWidth, out int singleCharHeight)
         {
             // Get glyph's size by graphics.MeasureString().
             {
                 int maxWidth = , maxHeight = ;

                 float fontSize = fontBitmap.GlyphFont.Size;

                 using (var bitmap = new Bitmap(, , PixelFormat.Format24bppRgb))
                 {
                     using (Graphics graphics = Graphics.FromImage(bitmap))
                     {
                         foreach (char c in charSet)
                         {
                             SizeF size = graphics.MeasureString(c.ToString(), fontBitmap.GlyphFont);
                             var info = new GlyphInfo(, , (int)size.Width, (int)size.Height);
                             fontBitmap.GlyphInfoDictionary.Add(c, info);
                             if (maxWidth < (int)size.Width) { maxWidth = (int)size.Width; }
                             if (maxHeight < (int)size.Height) { maxHeight = (int)size.Height; }
                         }
                     }
                 }
                 singleCharWidth = maxWidth;
                 singleCharHeight = maxHeight;
             }
             // shrink glyph's size.
             // xoffset now means offset in a single glyph's bitmap.
             {
                 using (var bitmap = new Bitmap(singleCharWidth, singleCharHeight))
                 {
                     using (var graphics = Graphics.FromImage(bitmap))
                     {
                         Color clearColor = Color.FromArgb(, , , );
                         foreach (var item in fontBitmap.GlyphInfoDictionary)
                         {
                             if (item.Key == ' ' || item.Key == '\t' || item.Key == '\r' || item.Key == '\n') { continue; }

                             graphics.Clear(clearColor);
                             graphics.DrawString(item.Key.ToString(), fontBitmap.GlyphFont, Brushes.White, , );
                             BitmapData data = bitmap.LockBits(new Rectangle(, , bitmap.Width, bitmap.Height), ImageLockMode.ReadOnly, PixelFormat.Format24bppRgb);
                             RetargetGlyphRectangleInwards(data, item.Value);
                             bitmap.UnlockBits(data);
                         }
                     }
                 }
             }
         }
         /// <summary>
         /// Returns true if the given pixel is empty (i.e. black)
         /// </summary>
         /// <param name="bitmapData"></param>
         /// <param name="x"></param>
         /// <param name="y"></param>
         private static unsafe bool IsEmptyPixel(BitmapData bitmapData, int x, int y)
         {
             var addr = (byte*)(bitmapData.Scan0) + bitmapData.Stride * y + x * ;
             return (*addr ==  && *(addr + ) ==  && *(addr + ) == );
         }

         /// <summary>
         /// shrink glyph's width to fit in exactly.
         /// </summary>
         /// <param name="bitmapData"></param>
         /// <param name="glyph"></param>
         private static void RetargetGlyphRectangleInwards(BitmapData bitmapData, GlyphInfo glyph)
         {
             int startX, endX;

             {
                 bool done = false;
                 for (startX = glyph.xoffset; startX < bitmapData.Width; startX++)
                 {
                     for (int j = glyph.yoffset; j < glyph.yoffset + glyph.height; j++)
                     {
                         if (!IsEmptyPixel(bitmapData, startX, j))
                         {
                             done = true;
                             break;
                         }
                     }
                     if (done) { break; }
                 }
             }
             {
                 bool done = false;
                 for (endX = glyph.xoffset + glyph.width - ; endX >= ; endX--)
                 {
                     for (int j = glyph.yoffset; j < glyph.yoffset + glyph.height; j++)
                     {
                         if (!IsEmptyPixel(bitmapData, endX, j))
                         {
                             done = true;
                             break;
                         }
                     }
                     if (done) { break; }
                 }
             }

             if (endX < startX)
             {
                 //startX = endX = glyph.xoffset;
                 glyph.width = ;
             }
             else
             {
                 glyph.xoffset = startX;
                 glyph.width = endX - startX + ;
             }
         }

PrepareInitialGlyphDict

如下图所示，这是经过这一步后得到的字形信息：height、width和xoffset。这里xoffset暂时描述了单个字形的左边距，在最后，xoffset会描述字形左上角在整个贴图中的位置。

最后贴图的Size

由于在创建Bitmap对象时就得指定它的Size，所以这一步要先算出这个Size。

为了能够尽可能使用最小的贴图，我们按下图所示的方式依次排布所有字形。

如上图所示，每个黑框代表一个字形，尽量按正方形来排布，结束后就能得到所需的Size（width和height）

制作贴图

万事俱备，可以创建贴图了。

按照上一步的方式来排布各个字形，并且这次真的把字形贴上去。

         /// <summary>
         /// Print the final bitmap that contains all glyphs.
         /// And also setup glyph's xoffset, yoffset.
         /// </summary>
         /// <param name="fontBitmap"></param>
         /// <param name="singleCharWidth"></param>
         /// <param name="singleCharHeight"></param>
         /// <param name="width"></param>
         /// <param name="height"></param>
         private static void PrintBitmap(FontBitmap fontBitmap, int singleCharWidth, int singleCharHeight, int width, int height)
         {
             var bitmap = new Bitmap(width, height);
             using (var graphics = Graphics.FromImage(bitmap))
             {
                 using (var glyphBitmap = new Bitmap(singleCharWidth, singleCharHeight))
                 {
                     using (var glyphGraphics = Graphics.FromImage(glyphBitmap))
                     {
                         int currentX = leftMargin, currentY = ;
                         Color clearColor = Color.FromArgb(, , , );
                         foreach (KeyValuePair<char, GlyphInfo> item in fontBitmap.GlyphInfoDictionary)
                         {
                             glyphGraphics.Clear(clearColor);
                             glyphGraphics.DrawString(item.Key.ToString(), fontBitmap.GlyphFont,
                                 Brushes.White, , );
                             // move to new line if this line is full.
                             if (currentX + item.Value.width > width)
                             {
                                 currentX = leftMargin;
                                 currentY += singleCharHeight;
                             }
                             // draw the current glyph.
                             graphics.DrawImage(glyphBitmap,
                                 new Rectangle(currentX, currentY, item.Value.width, item.Value.height),
                                 item.Value.ToRectangle(),
                                 GraphicsUnit.Pixel);
                             // move line cursor to next(right) position.
                             item.Value.xoffset = currentX;
                             item.Value.yoffset = currentY;
                             // prepare for next glyph's position.
                             currentX += item.Value.width + glyphInterval;
                         }
                     }
                 }
             }

             fontBitmap.GlyphBitmap = bitmap;
         }

PrintBitmap

结果示意图如下。

Demo

为了便于debug和观看效果，我在CSharpGL.Demos里加了下面这个Demo。你可以指定任意字体，设置是否启用加粗、斜体、下划线、删除线等效果。

用OpenGL渲染文字时，边缘的效果也很令人满意了。

总结

由于使用了.NET自带的Graphics和Font类型，就完全去掉了SharpFont那上千行代码。CSharpGL.dll由此下降了200K。效果增强，体积下降，代码简化，各个方面都获得提升。