Rendu de texte à l'aide de la bibliothèque de polices | .NET

Aperçu

Si vous avez toujours souhaité pouvoir restituer du texte dans une image, l’article ici vous apprendra comment le faire avec des polices de n’importe quel format, prises en charge par la bibliothèque de polices utilisant la solution API Aspose.Font. La bibliothèque vous permet de convertir facilement du texte en images et d’ajouter du texte à n’importe quelle image.

Rendu du texte

Pour insérer du texte dans une image, vous devrez utiliser la méthode DrawText de la classe RenderingUtils. Le code ci-dessous montre comment ajouter le texte « Bonjour tout le monde » écrit en police Arial à une image nommée « 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);

Le résultat de la mise en œuvre :

La méthode DrawText vous permet de définir l’espacement des lignes et d’effectuer un habillage automatique du texte mot par mot.

Dans l’exemple de code ci-dessous, nous avons spécifié le type d’espacement des lignes LineSpacingType.Pixels et l’avons défini sur 10, et nous avons défini la largeur maximale de l’image sur 450.

Tout le texte qui ne peut pas être affiché correctement dans la plage donnée (dans notre cas, il s’agit de 450) sera renvoyé sur une nouvelle ligne.

Le code extrait montre comment restituer le texte « Hello World » en police Arial avec retour à la ligne suivante :

    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);

Le résultat de la mise en œuvre :

Dans cet exemple, vous avez vu comment transformer du texte en image avec une seule ligne de code.

La famille de fonctions pour la méthode DrawText() couvre la sortie de texte standard ou de texte multiligne. Mais, dans certains cas, vous aurez peut-être besoin d’une sortie personnalisée du texte, par exemple lorsque vous souhaitez compresser, étirer, faire pivoter le texte selon un angle ou autre chose. Dans ce cas, vous devez personnaliser la sortie en fonction de vos besoins.

Rendu de texte personnalisé

L’exemple suivant montre une manière plus avancée (personnalisée) de convertir du texte en image.

Pour dessiner des glyphs dans Aspose.Font, utilisez l’une des méthodes RenderGlyph() de la classe GlyphOutlineRenderer. Toutes ces méthodes surchargées sont déclarées dans l’interface IGlyphRenderer.

En paramètre, nous devons passer à ces méthodes une référence à la police, au glyphId ou à l’index du glyphe, et aux coordonnées de sortie du glyphe. Pour transférer le dernier paramètre, une matrice spéciale représentée par l’objet Aspose.Font TransformationMatrix est utilisée. Ci-dessous, nous montrons comment utiliser des objets de type TransformationMatrix pour transmettre les coordonnées de sortie des glyphes aux méthodes de la famille RenderGlyph().

Ainsi, pour dessiner un glyphe, nous devons créer un objet de type GlyphOutlineRenderer. Mais un tel objet ne peut pas dessiner à lui seul un glyphe. Il nécessite une fonctionnalité externe, qui est décrite par l’interface IGlyphOutlinePainter. Pour utiliser l’objet GlyphOutlineRenderer, il faut fournir une implémentation de IGlyphOutlinePainter.

Ci-dessous vous pouvez voir une implémentation simple de cette interface. Créons la classe GlyphOutlinePainter qui nécessite un objet de type System.Drawing.Drawing2D.GraphicsPath pour les objectifs de dessin graphique.

La mise en œuvre est illustrée ci-dessous.

    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();
        }
    }

Après l’implémentation de IGlyphOutlinePainter, nous pouvons utiliser des objets de ce type pour restituer un glyphe individuel en les passant au GlyphOutlineRenderer et en appelant les méthodes surchargées correspondantes de RenderGlyph() famille.

Afin de restituer une chaîne de texte, nous devons obtenir le glyphId pour chaque caractère puis, à l’aide d’un objet de type GlyphOutlineRenderer, appeler l’une des méthodes de la famille RenderGlyph(), en passant les coordonnées du glyphe correspondant.

Jetons un coup d’œil à un exemple de sortie d’une ligne de texte à l’aide de la bibliothèque Aspose.Font. Il sera construit sous la forme de la méthode CustomDrawText(), qui accepte les paramètres - CustomDrawText (texte de chaîne, police IFont, double fontSize, Brush backgroundBrush, Brush textBrush, string outFile).

Créez la méthode CustomDrawText() qui dessine le texte spécifié dans l’objet System.Drawing.Bitmap et enregistre le bitmap résultant sur le disque.

Cela comprendra les étapes suivantes :

• Itérer tous les symboles dans une chaîne de texte.
• Obtenez l’identifiant de glyphe pour chaque symbole traité - gid.
• Créez un objet de type GlyphOutlinePainter requis par le sous-système de rendu pour dessiner le glyphe actuel.
• Créez un objet de type Aspose.Font.Renderers.GlyphOutlineRenderer, et passez l’objet que vous venez de créer de type GlyphOutlinePainter dans le constructeur de GlyphOutlineRenderer. Cet objet GlyphOutlineRenderer est destiné à restituer les glyphes spécifiés.
• Rendre le glyphe actuellement traité à l’aide de la méthode GlyphOutlineRenderer.RenderGlyph(). L’objet Aspose.Fonts.Matrix est utilisé pour spécifier les coordonnées du glyphe. Le glyphe à restituer est spécifié par le paramètre gid.

Étapes auxiliaires pour cette stratégie

• Les coordonnées du glyphe pour l’axe « Y » sont constantes pour cet extrait de code.
• Les coordonnées du glyphe pour l’axe « X » sont calculées pour chaque glyphe traité.
• Les coordonnées ‘X’ et ‘Y’ sont transmises à l’objet Aspose.Fonts.Matrix utilisé par GlyphOutlineRenderer pour dessiner des glyphes.
• La distance entre les glyphes juste et précédemment traités est calculée à chaque étape d’itération. Cela affecte chaque coordonnée « X » de glyphe.
• L’objet de type GlyphOutlineRenderer dessine des glyphes à l’aide de GlyphOutlinePainter non pas directement dans Bitmap, mais dans l’objet GraphicsPath passé dans le constructeur pour GlyphOutlinePainter, donc nous utilisez l’objet de type System.Drawing.Graphics pour dessiner GraphicsPath dans Bitmap.
• La méthode FontWidthToImageWith() calcule la largeur du glyphe pour le système de coordonnées bitmap.

L’implémentation de la méthode CustomDrawText() est présentée ci-dessous.

    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);
    }

Méthode utilitaire pour convertir la largeur de la police en largeur de l’image

    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;
    }

L’extrait de code suivant montre comment restituer le texte « Bonjour tout le monde » à l’aide de la méthode 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");

En implémentant le code, nous obtiendrons le résultat suivant :

Le résultat de la mise en œuvre :

Arial

Calibre

Crénage

En utilisant la valeur de la variable crénage, vous pouvez modifier la distance entre les glyphes. Réécrivons maintenant le code de la manière suivante :

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

Le résultat suivant sera obtenu :

Le résultat de la mise en œuvre :

Arial kernint

Crénage Calibri

Rendu du texte par coordonnées

Les variables glyphXCoordonnée et glyphYCoordonnée sont responsables des coordonnées de la sortie du texte. En changeant le code comme suit :

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

Le résultat suivant sera obtenu :

Le résultat de la mise en œuvre :

Arial x=300 y=300

Calibre x=300 y=300

Comment ajouter le texte à une image

Vous pouvez également afficher du texte sur une image existante. Pour cela, nous allons réécrire le code comme suit :

 
    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);
    }

Modifions la façon dont la Méthode est appelée :

    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);

Le résultat de la mise en œuvre :

Effet d’ombre aérienne

Sortie du texte de haut en bas

Pour afficher le texte de haut en bas, apportons les modifications suivantes dans la méthode 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);
    }

Le code de l’appel de méthode aura l’apparence suivante :

    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);

Le résultat de la mise en œuvre :

Arial de haut en bas

Informations Complémentaires

    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;