Візуалізація тексту за допомогою бібліотеки шрифтів | .NET

Огляд

Якщо ви коли-небудь хотіли мати функцію відтворення тексту в зображенні, ця стаття навчить вас, як це робити зі шрифтами будь-якого формату, які підтримуються бібліотекою шрифтів за допомогою Aspose.Font API Solution. Бібліотека дозволяє легко перетворювати текст на зображення, а також додавати текст до будь-якого зображення.

Візуалізація тексту

Щоб вставити текст у зображення, вам потрібно буде використати метод DrawText класу RenderingUtils. Код нижче показує, як додати текст «Hello world», написаний шрифтом Arial, до зображення з назвою «arial.png».

    var dataDir = @"C:\Temp\";
    var fileName = dataDir + "arial.ttf"; //Font file name with full path
    var outFile = dataDir + "arial.png";
    var fontDefinition = new FontDefinition(FontType.TTF, new FontFileDefinition("ttf", new FileSystemStreamSource(fileName)));
    var ttfFont = Font.Open(fontDefinition) as TtfFont;

    var stream = Aspose.Font.Renderers.RenderingUtils.DrawText(ttfFont, "Hello world", 18);

    var bitmap = new Bitmap(stream);
    bitmap.Save(outFile);

Результат впровадження:

Метод DrawText дозволяє встановлювати міжрядковий інтервал і виконувати автоматичний перенесення тексту слово за словом.

У наведеному нижче прикладі коду ми вказали тип міжрядкового інтервалу LineSpacingType.Pixels і встановили для нього значення 10, а максимальну ширину зображення встановили 450.

Увесь текст, який не можна правильно відобразити в заданому діапазоні (у нашому випадку це 450), буде перенесено на новий рядок.

Фрагмент коду показує, як відобразити текст «Hello world» шрифтом Arial із переносом на наступний рядок:

    var dataDir = @"C:\Temp\";
    var fileName = dataDir + "arial.ttf"; //Font file name with full path
    var outFile = dataDir + "arial.png";
    var fontDefinition = new FontDefinition(FontType.TTF, new FontFileDefinition("ttf", new FileSystemStreamSource(fileName)));
    var ttfFont = Font.Open(fontDefinition) as TtfFont;
    var lineSpacingType = LineSpacingType.Pixels;

    var stream = DrawText(ttfFont, "Hello world", 22, lineSpacingType, 10, 450);

    var bitmap = new Bitmap(stream);

    bitmap.Save(outFile);

Результат впровадження:

У цьому прикладі ви побачили, як можна перетворити текст на зображення за допомогою лише одного рядка коду.

Сімейство функцій для методу DrawText() охоплює вихід стандартного тексту або багаторядкового тексту. Але в деяких випадках вам може знадобитися налаштований вивід тексту, наприклад, коли ви хочете стиснути, розтягнути, повернути текст під кутом або щось інше. У цьому випадку вам потрібно налаштувати вихід відповідно до ваших потреб.

Візуалізація тексту на замовлення

У наступному прикладі показано більш просунутий (спеціальний) спосіб перетворення тексту на зображення.

Для малювання гліфів у Aspose.Font використовується один із методів RenderGlyph() класу GlyphOutlineRenderer. Усі ці перевантажені методи оголошено в інтерфейсі IGlyphRenderer.

Як параметр ми повинні передати цим методам посилання на шрифт, гліфId або індекс гліфа та вихідні координати гліфа. Для передачі останнього параметра використовується спеціальна матриця, представлена ​​об’єктом Aspose.Font TransformationMatrix. Нижче ми покажемо, як використовувати об’єкти типу TransformationMatrix для передачі вихідних координат гліфів методам сімейства RenderGlyph().

Отже, щоб намалювати гліф, нам потрібно створити об’єкт типу GlyphOutlineRenderer. Але такий об’єкт не може самостійно намалювати гліф. Для цього потрібна зовнішня функціональність, яку описує інтерфейс IGlyphOutlinePainter. Для використання об’єкта GlyphOutlineRenderer має бути забезпечена реалізація IGlyphOutlinePainter.

Нижче ви можете побачити просту реалізацію цього інтерфейсу.

Давайте створимо клас GlyphOutlinePainter, який потребує об’єкт типу System.Drawing.Drawing2D.GraphicsPath для цілей графічного малювання.

Реалізацію показано нижче.

    public class GlyphOutlinePainter : IGlyphOutlinePainter
    {
        private GraphicsPath _path;
        private PointF _currentPoint;

        public GlyphOutlinePainter(GraphicsPath path)
        {
            _path = path;
        }

        public void MoveTo(MoveTo moveTo)
        {
            _path.CloseFigure();
            _currentPoint.X = (float)moveTo.X;
            _currentPoint.Y = (float)moveTo.Y;
        }

        public void LineTo(LineTo lineTo)
        {
            float x = (float)lineTo.X;
            float y = (float)lineTo.Y;
            _path.AddLine(_currentPoint.X, _currentPoint.Y, x, y);
            _currentPoint.X = x;
            _currentPoint.Y = y;
        }

        public void CurveTo(CurveTo curveTo)
        {
            float x3 = (float)curveTo.X3;
            float y3 = (float)curveTo.Y3;

            _path.AddBezier(
                _currentPoint.X,
                _currentPoint.Y,
                (float)curveTo.X1,
                (float)curveTo.Y1,
                (float)curveTo.X2,
                (float)curveTo.Y2,
                x3,
                y3);

            _currentPoint.X = x3;
            _currentPoint.Y = y3;
        }

        public void ClosePath()
        {
            _path.CloseFigure();
        }
    }

Після реалізації IGlyphOutlinePainter ми можемо використовувати об’єкти цього типу для відтворення окремого гліфа, передавши їх до GlyphOutlineRenderer і викликавши відповідні перевантажені методи RenderGlyph() родина.

Щоб відобразити рядок тексту, нам потрібно отримати glyphId для кожного символу, а потім за допомогою об’єкта типу GlyphOutlineRenderer викликати один із методів сімейства RenderGlyph(), передаючи координати відповідного гліфа.

Давайте розглянемо приклад виведення рядка тексту за допомогою бібліотеки Aspose.Font. Він буде побудований у вигляді методу CustomDrawText(), який приймає параметри - CustomDrawText(string text, IFont font, double fontSize, Brush backgroundBrush, Brush textBrush, string outFile).

Створіть метод CustomDrawText(), який малює вказаний текст в об’єкт System.Drawing.Bitmap і зберігає отримане растрове зображення на диску.

Це включатиме наступні кроки:

• Ітерація всіх символів у текстовому рядку.
• Отримати ідентифікатор гліфа для кожного обробленого символу — gid.
• Створіть об’єкт типу GlyphOutlinePainter, який потрібен підсистемі візуалізації для малювання поточного гліфа.
• Створіть об’єкт типу Aspose.Font.Renderers.GlyphOutlineRenderer і передайте щойно створений об’єкт типу GlyphOutlinePainter у конструктор для GlyphOutlineRenderer. Цей об’єкт GlyphOutlineRenderer призначений для відтворення вказаних гліфів.
• Відобразити поточний оброблений гліф за допомогою методу GlyphOutlineRenderer.RenderGlyph(). Об’єкт Aspose.Fonts.Matrix використовується для визначення координат гліфа. Гліф для візуалізації визначається параметром gid.

Допоміжні кроки для цієї стратегії

• Координати гліфа для осі Y є постійними для цього фрагмента коду.
• Координати гліфа для осі X обчислюються для кожного обробленого гліфа.
• Координати «X» і «Y» передаються в об’єкт Aspose.Fonts.Matrix, який використовується GlyphOutlineRenderer для малювання гліфів.
• Відстань між щойно та попередньо обробленими гліфами обчислюється на кожному кроці ітерації. Це впливає на кожну координату гліфа «X».
• Об’єкт типу GlyphOutlineRenderer малює гліфи за допомогою GlyphOutlinePainter не безпосередньо в Bitmap, а в об’єкт GraphicsPath, переданий у конструктор для GlyphOutlinePainter, тому ми використовуйте об’єкт типу System.Drawing.Graphics, щоб намалювати GraphicsPath у Bitmap.
• Метод FontWidthToImageWith() обчислює ширину гліфа для растрової системи координат.

Нижче показано реалізацію методу CustomDrawText().

    public static void CustomDrawText(string text, IFont font, double fontSize, Brush backgroundBrush, Brush textBrush, string outFile)
    {
        //Get glyph identifiers for every symbol in the text line
        GlyphId[] gids = new GlyphId[text.Length];

        for (int i = 0; i < text.Length; i++)
            gids[i] = font.Encoding.DecodeToGid(text[i]);

        // Set common drawing settings
        double dpi = 300;
        double resolutionCorrection = dpi / 72; // 72 is font's internal dpi

        // Prepare output bitmap                
        Bitmap outBitmap = new Bitmap(960, 720);


        outBitmap.SetResolution((float)dpi, (float)dpi);

        Graphics outGraphics = Graphics.FromImage(outBitmap);
        outGraphics.FillRectangle(backgroundBrush, 0, 0, outBitmap.Width, outBitmap.Height);
        outGraphics.SmoothingMode = SmoothingMode.HighQuality;

        //Declare coordinate variables and a previous gid
        GlyphId previousGid = null;
        double glyphXCoordinate = 0;
        double glyphYCoordinate = fontSize * resolutionCorrection;

        // The loop paints every glyph in gids
        foreach (GlyphId gid in gids)
        {
            // if the font contains the gid
            if (gid != null)
            {
                Glyph glyph = font.GlyphAccessor.GetGlyphById(gid);
                if (glyph == null)
                    continue;

                // The path that accepts drawing instructions
                GraphicsPath path = new GraphicsPath();

                // Create IGlyphOutlinePainter implementation
                GlyphOutlinePainter outlinePainter = new GlyphOutlinePainter(path);

                // Create the renderer
                Aspose.Font.Renderers.IGlyphRenderer renderer = new Aspose.Font.Renderers.GlyphOutlineRenderer(outlinePainter);

                // Get common glyph properties
                double kerning = 0;

                // Get kerning value

                if (previousGid != null)
                {
                    kerning = (font.Metrics.GetKerningValue(previousGid, gid) / glyph.SourceResolution) * fontSize * resolutionCorrection;
                    kerning += FontWidthToImageWith(font.Metrics.GetGlyphWidth(previousGid), glyph.SourceResolution, fontSize);
                }

                // Glyph positioning - increase glyph X coordinate according to kerning distance
                glyphXCoordinate += kerning;

                // Glyph placement matrix
                TransformationMatrix glyphMatrix = new TransformationMatrix(
                        new double[]
                                { fontSize * resolutionCorrection,
                            0,
                            0,
                        // negative because of the bitmap coordinate system begins from the top
                            - fontSize*resolutionCorrection,
                            glyphXCoordinate,
                            glyphYCoordinate
                                });

                // Render the current glyph
                renderer.RenderGlyph(font, gid, glyphMatrix);

                // Fill the path
                path.FillMode = FillMode.Winding;

                outGraphics.FillPath(textBrush, path);
            }

            //Set current gid as previous to get correct kerning for next glyph
            previousGid = gid;
        }

        //Save the results
        outBitmap.Save(outFile);
    }

Метод утиліти для перетворення ширини шрифту в ширину зображення

    static double FontWidthToImageWith(double width, int fontSourceResulution, double fontSize, double dpi = 300)
    {
        double resolutionCorrection = dpi / 72; // 72 is font's internal dpi

        return (width / fontSourceResulution) * fontSize * resolutionCorrection;
    }

У наступному фрагменті коду показано, як відобразити текст «Hello world» за допомогою методу CustomDrawText().

    var dataDir = @"C:\Temp\";
    var fileName1 = dataDir + "arial.ttf"; //Font file name with full path
    var fileName2 = dataDir + "calibrii.ttf"; //Font file name with full path

    var fontDefinition1 = new FontDefinition(FontType.TTF, new FontFileDefinition("ttf", new FileSystemStreamSource(fileName1)));
    var ttfFont1 = Font.Open(fontDefinition1) as TtfFont;

    var fontDefinition2 = new FontDefinition(FontType.TTF, new FontFileDefinition("ttf", new FileSystemStreamSource(fileName2)));
    var ttfFont2 = Font.Open(fontDefinition2) as TtfFont;

    GlyphOutlinePainter.CustomDrawText("Hello world", ttfFont1, 24, Brushes.White, Brushes.Black, dataDir + "Hello_Arial_out.png");
    GlyphOutlinePainter.CustomDrawText("Hello world", ttfFont2, 24, Brushes.Yellow, Brushes.Blue, dataDir + "Hello_Calibri_out.png");

Реалізуючи код, ми отримаємо наступний результат:

Результат впровадження:

Arial

Калібрі

Кернінг

Використовуючи значення змінної kerning, ви можете змінити відстань між гліфами. Тепер давайте перепишемо код наступним чином:

 
    //Glyph positioning - increase glyph X coordinate according to the kerning distance
    kerning *= 1.25;
    glyphXCoordinate += kerning;

Буде отримано наступний результат:

Результат впровадження:

Arial kernint

Кернінг Calibri

Відтворення тексту за координатами

Змінні glyphXCoordinate і glyphYCoordinate відповідають за координати виведення тексту. Змінивши код таким чином:

    //Declare coordinate variables and the previous gid
    GlyphId previousGid = null;
    double glyphXCoordinate = 300;
    double glyphYCoordinate = 300;

Буде отримано наступний результат:

Результат впровадження:

Arial x=300 y=300

Calibri x=300 y=300

Як додати текст до зображення

Ви також можете відобразити текст на наявному зображенні. Для цього ми перепишемо код наступним чином:

 
    public static void CustomDrawText(string text, IFont font, double fontSize, Brush backgroundBrush, Brush textBrush, string outFile, Bitmap bitmap, double kerningCoefficient = 1, double coordinateX = 0, double coordinateY = 0)
    {
        //Get glyph identifiers for every symbol in the text line
        GlyphId[] gids = new GlyphId[text.Length];

        for (int i = 0; i < text.Length; i++)
            gids[i] = font.Encoding.DecodeToGid(text[i]);

        // Set common drawing settings
        double dpi = 300;
        double resolutionCorrection = dpi / 72; // 72 is font's internal dpi

        // Prepare the output bitmap                
        Bitmap outBitmap = bitmap;

        outBitmap.SetResolution((float)dpi, (float)dpi);

        Graphics outGraphics = Graphics.FromImage(outBitmap);
        outGraphics.FillRectangle(backgroundBrush, 0, 0, outBitmap.Width, outBitmap.Height);
        outGraphics.SmoothingMode = SmoothingMode.HighQuality;

        //Declare coordinate variables and the previous gid
        GlyphId previousGid = null;
        double glyphXCoordinate = coordinateX;
        double glyphYCoordinate = coordinateY;

        glyphYCoordinate += fontSize * resolutionCorrection;

        //The loop paints every glyph in gids
        foreach (GlyphId gid in gids)
        {
            // if the font contains the gid
            if (gid != null)
            {
                Glyph glyph = font.GlyphAccessor.GetGlyphById(gid);
                if (glyph == null)
                    continue;

                // The path that accepts drawing instructions
                GraphicsPath path = new GraphicsPath();

                // Create the IGlyphOutlinePainter implementation
                GlyphOutlinePainter outlinePainter = new GlyphOutlinePainter(path);

                // Create the renderer
                Aspose.Font.Renderers.IGlyphRenderer renderer = new Aspose.Font.Renderers.GlyphOutlineRenderer(outlinePainter);

                // Get common glyph properties
                double kerning = 0;

                // Get the kerning value

                if (previousGid != null)
                {
                    kerning = (font.Metrics.GetKerningValue(previousGid, gid) / glyph.SourceResolution) * fontSize * resolutionCorrection;
                    kerning += FontWidthToImageWith(font.Metrics.GetGlyphWidth(previousGid), glyph.SourceResolution, fontSize);
                }

                // Glyph positioning - increase the glyph X coordinate according to the kerning distance
                glyphXCoordinate += kerning * kerningCoefficient;

                // Glyph placement matrix
                TransformationMatrix glyphMatrix = new TransformationMatrix(
                        new double[]
                                { fontSize * resolutionCorrection,
                            0,
                            0,
                        // negative because of the bitmap coordinate system begins from the top
                            - fontSize*resolutionCorrection,
                            glyphXCoordinate,
                            glyphYCoordinate
                                });

                // Render the current glyph
                renderer.RenderGlyph(font, gid, glyphMatrix);

                // Fill the path
                path.FillMode = FillMode.Winding;

                outGraphics.FillPath(textBrush, path);
            }

            //Set the current gid as previous to get the correct kerning for the next glyph
            previousGid = gid;
        }

        //Save the results
        outBitmap.Save(outFile);
    }

Давайте змінимо спосіб виклику методу:

    var dataDir = @"C:\Temp\";
    var fileName1 = dataDir + "arial.ttf"; //Font file name with full path

    var fontDefinition1 = new FontDefinition(FontType.TTF, new FontFileDefinition("ttf", new FileSystemStreamSource(fileName1)));
    var ttfFont1 = Font.Open(fontDefinition1) as TtfFont;

    var bitmap = new Bitmap(960, 720);

    GlyphOutlinePainter.CustomDrawText("Hello world", ttfFont1, 17, Brushes.White, Brushes.Black, dataDir + "Hello_Arial_out.png", bitmap);

    var inputImagePath = dataDir + "Hello_Arial_out.png";
    var bitmapAddText = new Bitmap(inputImagePath);

    GlyphOutlinePainter.CustomDrawText("Hello world", ttfFont1, 17, Brushes.Transparent, Brushes.Gray, dataDir + "Hello_Arial_Shadow_out.png", bitmapAddText, 1, -3);

    GlyphOutlinePainter.CustomDrawText("<= Shadow effect", ttfFont1, 17, Brushes.Transparent, Brushes.Brown, dataDir + "Hello_Arial_Shadow_out.png", bitmapAddText, 1, 400);

Результат впровадження:

Ефект аріальної тіні

Виведення тексту зверху вниз

Щоб відобразити текст зверху вниз, давайте внесемо такі зміни в метод CustomDrawText().

    public static void CustomDrawText(string text, IFont font, double fontSize, Brush backgroundBrush, Brush textBrush, string outFile, Bitmap bitmap, double kerningCoefficient = 1, double coordinateX = 0, double coordinateY = 0, bool topDown = false)
    {
        //Get glyph identifiers for every symbol in the text line
        GlyphId[] gids = new GlyphId[text.Length];

        for (int i = 0; i < text.Length; i++)
            gids[i] = font.Encoding.DecodeToGid(text[i]);

        // Set common drawing settings
        double dpi = 300;
        double resolutionCorrection = dpi / 72; // 72 is font's internal dpi

        // Prepare the output bitmap                
        Bitmap outBitmap = bitmap;

        outBitmap.SetResolution((float)dpi, (float)dpi);

        Graphics outGraphics = Graphics.FromImage(outBitmap);
        outGraphics.FillRectangle(backgroundBrush, 0, 0, outBitmap.Width, outBitmap.Height);
        outGraphics.SmoothingMode = SmoothingMode.HighQuality;

        //Declare coordinate variables and the previous gid
        GlyphId previousGid = null;
        double glyphXCoordinate = coordinateX;
        double glyphYCoordinate = coordinateY;

        glyphYCoordinate += fontSize * resolutionCorrection;

        //The loop paints every glyph in gids
        foreach (GlyphId gid in gids)
        {
            // if the font contains the gid
            if (gid != null)
            {
                Glyph glyph = font.GlyphAccessor.GetGlyphById(gid);
                if (glyph == null)
                    continue;

                // The path that accepts drawing instructions
                GraphicsPath path = new GraphicsPath();

                // Create IGlyphOutlinePainter implementation
                GlyphOutlinePainter outlinePainter = new GlyphOutlinePainter(path);

                // Create the renderer
                Aspose.Font.Renderers.IGlyphRenderer renderer = new Aspose.Font.Renderers.GlyphOutlineRenderer(outlinePainter);

                // Get common glyph properties
                double kerning = 0;

                // Get kerning value                        
                if (previousGid != null && !topDown)
                {
                    kerning = (font.Metrics.GetKerningValue(previousGid, gid) / glyph.SourceResolution) * fontSize * resolutionCorrection;
                    kerning += FontWidthToImageWith(font.Metrics.GetGlyphWidth(previousGid), glyph.SourceResolution, fontSize);
                }

                if (topDown)
                {
                    glyphYCoordinate += fontSize * resolutionCorrection;
                }
                else
                {
                    // Glyph positioning - increase the glyph X coordinate according to kerning distance                       
                    glyphXCoordinate += kerning * kerningCoefficient;
                }

                // Glyph placement matrix
                TransformationMatrix glyphMatrix = new TransformationMatrix(
                        new double[]
                                { fontSize * resolutionCorrection,
                            0,
                            0,
                        // negative because the bitmap coordinate system begins from the top
                            - fontSize*resolutionCorrection,
                            glyphXCoordinate,
                            glyphYCoordinate
                                });

                // Render the current glyph
                renderer.RenderGlyph(font, gid, glyphMatrix);

                // Fill the path
                path.FillMode = FillMode.Winding;

                outGraphics.FillPath(textBrush, path);
            }

            //Set the current gid as previous to get correct kerning for the next glyph
            previousGid = gid;
        }

        //Save the results
        outBitmap.Save(outFile);
    }

Код для виклику методу матиме такий вигляд:

    var dataDir = @"C:\Temp\";
    var fileName1 = dataDir + "arial.ttf"; //Font file name with full path
    var fontDefinition1 = new FontDefinition(FontType.TTF, new FontFileDefinition("ttf", new FileSystemStreamSource(fileName1)));
    var ttfFont1 = Font.Open(fontDefinition1) as TtfFont;
    var bitmap = new Bitmap(960, 720);

    GlyphOutlinePainter.CustomDrawText("Top down", ttfFont1, 18, Brushes.White, Brushes.Black, dataDir + "Hello_Arial_TopDown.png", bitmap, 1, 400, 00, true);

Результат впровадження:

Arial зверху вниз

Додаткова інформація

    double dpi; // dots per inch
    double resolutionCorrection = dpi / 72; // 72 is font's internal dpi
    // Coordinate variables
    double glyphXCoordinate; // X
    double glyphYCoordinate; // Y;
    // Kerning - horizontal spacing between two letters
    double kerning = 0;