Rendering di testo usando la libreria di caratteri | .NET

Panoramica

Se hai mai desiderato avere la funzionalità di rendere il testo in un’immagine, l’articolo qui ti insegnerà come farlo con caratteri di qualsiasi formato, supportato dalla libreria di caratteri usando la soluzione API Aspose.Font. La libreria consente di convertire facilmente il testo in immagini e aggiungere testo a qualsiasi immagine.

Rendering Testo

Per inserire il testo in un’immagine dovrai utilizzare il metodo DrawText della classe RenderingUtils. Il codice seguente mostra come aggiungere il testo “Hello World” scritto in font Arial a un’immagine chiamata “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);

Il risultato dell’implementazione:

Il metodo DrawText consente di impostare la spaziatura della linea ed eseguire un avvolgimento di testo word-by-word automatico.

Nell’esempio di codice seguente, abbiamo specificato il tipo di spaziatura della linea linepacingType.pixels e impostarlo su 10 e abbiamo impostato la larghezza massima dell’immagine su 450.

Tutto il testo che non può essere visualizzato correttamente nell’intervallo dato (nel nostro caso è 450) verrà avvolto su una nuova linea.

Il codice snippato mostra come rendere il testo “Hello World” in Arial Caranza con la confezione alla riga successiva:

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

Il risultato dell’implementazione:

In questo esempio, hai visto come trasformare il testo in un’immagine con una sola riga di codice.

La famiglia di funzioni per il metodo DrawText() copre il testo standard o l’output di testo multiline. Ma, in alcuni casi, potrebbe essere necessario un output personalizzato del testo, ad esempio, quando si desidera comprimere, allungare, ruotare il testo ad angolo o qualcos’altro. In questo caso, è necessario personalizzare l’output in base alle tue esigenze.

Rendering di testo personalizzato

Il prossimo esempio mostra un modo più avanzato (personalizzato) per convertire il testo in un’immagine.

Per disegnare glifi in Aspose.Font, si utilizza uno dei metodi RenderGlyph() della classe GlyphOutlineRenderer. Tutti questi metodi sovraccaricati sono dichiarati nell’interfaccia IGlyphRenderer.

Come parametro, dobbiamo passare a questi metodi un riferimento all’indice di carattere, glyphid o glyph e coordinate di output del glifo. Per trasferire l’ultimo parametro, viene utilizzata una matrice speciale rappresentata dall’oggetto Aspose.Font TransformationMatrix. Di seguito mostriamo come utilizzare gli oggetti del tipo TransformationMatrix per passare le coordinate di output del glifo ai metodi della famiglia renderglyph().

Quindi, per disegnare un glifo, dobbiamo creare un oggetto del tipo Glyphoutlinerender. Ma un tale oggetto non può disegnare un glifo da solo. Richiede funzionalità esterne, che è descritta dall’interfaccia iglyphoutlinepainter. Per utilizzare l’oggetto glyphoutlinerender dovrebbe essere fornito con un’implementazione del iglyphoutlinePainter. Di seguito puoi vedere una semplice implementazione di questa interfaccia. Creiamo la classeGlyphoutLinePainterche richiede un oggetto di System.Drawing.Drawing2d.Graphicspath per gli obiettivi di disegno grafico.

L’implementazione è illustrata di seguito.

    GlyphoutLinePainter di classe pubblica: iglyphoutlinepainter
    {
        Private GraphicsPath _Path;
        punto privato _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();
        }
    }

Dopo l’implementazione di iglyphoutlinepainter, possiamo usare oggetti del suo tipo per rendere un singolo glifo passandoli alla famiglia Glyphoutlinerender e chiamando i corrispondenti metodi sovraccarichi del renderglyph() Famiglia.

Per rendere una stringa di testo, dobbiamo ottenere il glyphid per ogni carattere e quindi, usando un oggetto di glyphoutlinerender di tipo Chiama uno dei metodi della famiglia renderglyph(), passando le coordinate del Glyph corrispondente.

Diamo un’occhiata a un esempio di produzione di una riga di testo usando la libreria Aspose.Font. Sarà costruito nella forma del metodo CustomDrawText(), che accetta parametri - *CustomDrawText *(testo di stringa, font ifont, doppio fontsize, spazzole, brusco, cespuglio di textbrush, outfile della stringa).

Crea il metodo CustomDrawText() che disegna il testo specificato nell’oggetto System.Drawing.bitmap e salva la bitmap risultante sul disco.

Ciò includerà i seguenti passaggi:

• Iterare tutti i simboli in una stringa di testo.
• Ottieni l’identificatore di glifi per ogni simbolo elaborato - GID.
• Creare un oggetto di * Tipo di GlyphoutLinePainter * richiesto dal sottosistema di rendering per disegnare il glifo corrente.
• Crea un oggetto del tipo aspose.font.renders.glyphoutlinerender e passa l’oggetto appena creato diGlyphoutlinePainterTipo nel costruttore per Glyphoutlinerender. Questo oggetto Glyphoutlinerender è destinato a rendere glifi specificati.
• Esegue il rendering del glifo attualmente elaborato utilizzando il metodo GlyphOutlineRenderer.RenderGlyph(). L’oggetto Aspose.Fonts.Matrix viene utilizzato per specificare le coordinate del glifo. Il glifo da visualizzare è specificato dal parametro gid.

Passaggi ausiliari per questa strategia

• Le coordinate glifo per l’asse ‘y’ sono costanti per questo frammento di codice.
• Le coordinate di glifi per l’asse ‘X’ sono calcolate per ogni glifo elaborato.
• Entrambe le coordinate ‘x’ e ‘y’ vengono passate nell’oggettoaspose.fonts.matrixusato da glyphoutlinerender per disegnare glifi.
• La distanza tra glifi giusti e precedentemente elaborati viene calcolata in ogni fase di iterazione. Colpisce ogni coordinata di glifi ‘x’.
• L’oggetto di tipo GlyphOutlineRenderer disegna glifi con l’aiuto di GlyphOutlinePainter non direttamente in Bitmap, ma nell’oggetto GraphicsPath passato al costruttore per GlyphOutlinePainter, quindi utilizziamo l’oggetto di tipo System.Drawing.Graphics per disegnare GraphicsPath in Bitmap.
• Il metodo fontWidThToImageWith() calcola la larghezza del glifo per il sistema di coordinate BitMap.

L’implementazione del metodo CustomDrawText() è mostrata di seguito.

    Public Static Void CustomDrawText (testo di stringa, font ifont, doppio fontsize, brush sfondo, brush textbrush, outfile della stringa)
    {
        // Ottieni identificatori di glifi per ogni simbolo nella riga di testo
        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);
    }

Metodo di utilità per convertire la larghezza del carattere in larghezza dell’immagine

    Double fontThtoImage con doppio fontThtoImage (doppia larghezza, int fonsourceResulution, doppia fontsize, doppio dpi = 300)
    {
        a doppia risoluzione correzione = dpi / 72; // 72 è il DPI interno di Font

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

Lo snippet del codice successivo mostra come rendere il metodo “Hello World” del testo usando il metodo customDrawText().

var datadir = @"c: \ temp \";
    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");

Implementazione del codice otterremo il seguente risultato:

Il risultato dell’implementazione:

Arial

Calibri

Kerning

Usando il valore della variabile kerning è possibile modificare la distanza tra glifi. Ora riscriviamo il codice nel prossimo modo:

 
    // Posizionamento del glifo - Aumenta la coordinata glifo X in base alla distanza di kerning
    kerning *= 1.25;
    glyphxcoordinate += kerning;

Il prossimo risultato sarà ottenuto:

Il risultato dell’implementazione:

Arial kernint

Calibri kerning

Rendering Testo per coordinate

Le variabili glyphXCoordinate e glyphYCoordinate sono responsabili delle coordinate dell’output del testo. Modificando il codice come segue:

    // Dichiara le variabili di coordinate e il GID precedente
    Glyphid Precedentegid = null;
    doppio glyphxcoordinate = 300;
    doppio glyfycoordinate = 300;

Il prossimo risultato sarà ottenuto:

Il risultato dell’implementazione:

Arial x=300 y=300

Calibri x=300 y=300

Come aggiungere il testo a un’immagine

Puoi anche visualizzare il testo su un’immagine esistente. Per questo, riscriveremo il codice come segue:

 
    Vuoto statico pubblico CustomDrawText (testo stringa, font ifont, doppio fontsize, brush brush, brush textbrush, outfile della stringa, bitmap bitmap, doppio kerningcoefficient = 1, double coordinatex = 0, double coordinatey = 0)
    {
        // Ottieni identificatori di glifi per ogni simbolo nella riga di testo
        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);
    }

Modifichiamo il modo in cui il metodo viene chiamato:

    var datadir = @"c: \ temp \";
    var fileName1 = datadir + "Arial.ttf"; // Nome file di carattere con percorso completo

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

Il risultato dell’implementazione:

Arial shadow effect

Output del testo dall’alto verso il basso

Per visualizzare il testo dall’alto verso il basso, apportiamo le seguenti modifiche al metodo CustomDrawText().

    Vuoto statico pubblico CustomDrawText (testo di stringa, font ifont, doppio fontsize, brush brush, brush textbrush, outfile della stringa, bitmap bitmap, doppio kerningcoefficient = 1, double coordinatex = 0, double coordinatey = 0, bool topdown = false)
    {
        // Ottieni identificatori di glifi per ogni simbolo nella riga di testo
        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);
    }

Il codice per la chiamata del metodo avrà il prossimo sguardo:

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

Il risultato dell’implementazione:

Arial top to down

Ulteriori informazioni

    doppio dpi; // punti per pollice
    a doppia risoluzione correzione = dpi / 72; // 72 è il DPI interno di Font
    // Variabili di coordinate
    doppio glyphxcoordinate; // X
    doppio glyfycoordinate; // y;
    // kerning - spaziatura orizzontale tra due lettere
    Double Kerning = 0;