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 = 0, maxHeight = 0;

                float fontSize = fontBitmap.GlyphFont.Size;

                using (var bitmap = new Bitmap(1, 1, 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(0, 0, (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(0, 0, 0, 0);
                        foreach (var item in fontBitmap.GlyphInfoDictionary)
                        {
                            if (item.Key == ' ' || item.Key == '	' || item.Key == '
' || item.Key == '
') { continue; }

                            graphics.Clear(clearColor);
                            graphics.DrawString(item.Key.ToString(), fontBitmap.GlyphFont, Brushes.White, 0, 0);
                            BitmapData data = bitmap.LockBits(new Rectangle(0, 0, 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 * 3;
            return (*addr == 0 && *(addr + 1) == 0 && *(addr + 2) == 0);
        }

        /// <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 - 1; endX >= 0; 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 = 0;
            }
            else
            {
                glyph.xoffset = startX;
                glyph.width = endX - startX + 1;
            }
        }

如下图所示，这是经过这一步后得到的字形信息：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 = 0;
                        Color clearColor = Color.FromArgb(0, 0, 0, 0);
                        foreach (KeyValuePair<char, GlyphInfo> item in fontBitmap.GlyphInfoDictionary)
                        {
                            glyphGraphics.Clear(clearColor);
                            glyphGraphics.DrawString(item.Key.ToString(), fontBitmap.GlyphFont,
                                Brushes.White, 0, 0);
                            // 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;
        }

结果示意图如下。

Demo

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

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

 

总结

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