Renderização de texto usando a biblioteca de fontes | .NET

Visão geral

Se você alguma vez quis ter o recurso de renderizar um texto em uma imagem, o artigo aqui ensinará como fazê -lo com fontes de qualquer formato, suportado pela Biblioteca de fontes usando a solução API ASPOPE.FONT. A biblioteca permite converter o texto facilmente em imagens e adicionar texto a qualquer imagem.

Renderizando texto

Utilize o método DrawText da classe RenderingUtils para desenhar texto numa imagem. O exemplo apresenta «Hello world» em Verdana e guarda o fluxo PNG em Text.png.

Defina DataDir como a pasta que contém TTF/verdana.ttf e TTF/LatoWeb-Regular.ttf, e OutputDir como uma pasta de saída existente. Os exemplos utilizam os espaços de nomes Aspose.Font, Aspose.Font.Sources, Aspose.Font.Renderers, System, System.IO. No projeto de testes, BaseTests fornece as pastas e a configuração da licença.

// Render text to a PNG image

string fontPath = Path.Combine(DataDir, "TTF", "verdana.ttf");
Font font = Font.Open(new FontDefinition(FontType.TTF, "ttf", new FileSystemStreamSource(fontPath)));
string text = "Hello world";
string outFile = Path.Combine(OutputDir, "Text.png");
using (Stream image = RenderingUtils.DrawText(font, text, 18))
{
    image.Position = 0;
    using FileStream output = File.Create(outFile);
    image.CopyTo(output);
}

Resultado da implementação:

O método DrawText permite definir o espaçamento da linha e executar o embrulho de texto de palavra por palavra automática.

No exemplo do código abaixo, especificamos o tipo de espaçamento de linha linespacingType.pixels e o definimos como 10, e definimos a largura máxima da imagem como 450.

Todo o texto que não pode ser exibido corretamente no intervalo especificado (no nosso caso é 450) será envolvido em uma nova linha.

O exemplo repete «Hello world» em Verdana para ultrapassar a largura de 450 píxeis e distribuir o texto por várias linhas. O resultado é guardado em WrappedText.png:

// Render wrapped text with pixel line spacing

string fontPath = Path.Combine(DataDir, "TTF", "verdana.ttf");
Font font = Font.Open(new FontDefinition(FontType.TTF, "ttf", new FileSystemStreamSource(fontPath)));
string text = "Hello world Hello world Hello world Hello world Hello world Hello world";
string outFile = Path.Combine(OutputDir, "WrappedText.png");
using (Stream image = RenderingUtils.DrawText(font, text, 22, RenderingUtils.LineSpacingType.Pixels, 10, 450))
{
    image.Position = 0;
    using FileStream output = File.Create(outFile);
    image.CopyTo(output);
}

Resultado da implementação:

DrawText() devolve um fluxo PNG. Os exemplos repõem a sua posição no início, copiam-no para um ficheiro e libertam ambos os fluxos.

A família de funções para o método DrawText() abrange texto padrão ou saída de texto multilina. Mas, em alguns casos, você pode precisar de uma saída personalizada do texto, por exemplo, quando deseja comprimir, esticar, girar o texto em um ângulo ou outra coisa. Nesse caso, você precisa personalizar a saída de acordo com suas necessidades.

Renderização de texto personalizada

Os exemplos seguintes desenham contornos de glifos com System.Drawing.Common no Windows, numa área de 960 x 720 píxeis a 300 DPI. Importe também os espaços de nomes Aspose.Font.Glyphs, Aspose.Font.Rendering, Aspose.Font.RenderingPath, System.Drawing, System.Drawing.Drawing2D, System.Drawing.Imaging.

Para desenhar glifos dentro de Aspose.font, usa um dos métodos RenderGlyph() da classe GlyphOutlineRenderer. Todos esses métodos sobrecarregados são declarados na interface IGlyphRenderer.

Como parâmetro, devemos passar para esses métodos uma referência à fonte, glifídeo ou índice de glifos e as coordenadas de saída do glifo. Para transferir o último parâmetro, uma matriz especial representada pelo objeto Aspose.font transformationMatrix é usada. Abaixo, mostramos como usar objetos da transformationMatrix tipo para passar as coordenadas de saída do glifo para os métodos da família RenderGlyph().

Portanto, para desenhar um glifo, precisamos criar um objeto do tipo GlyphOutlineRenderer. Mas esse objeto não pode desenhar um glifo por conta própria. Requer funcionalidade externa, descrita pela interface IGlyphOutlinePainter. Para usar o objeto GlyphOutlineRenderer, deve ser fornecido com uma implementação do IGlyphOutlinePainter. Abaixo, você pode ver uma implementação simples desta interface. Vamos criar a classeglyphoutlinepainterque requer um objeto de System.drawing.drawing2d.graphicsPath Tipo para objetivos de desenho gráfico.

A implementação da interface é apresentada abaixo. Adicione as sobrecargas de CustomDrawText() e o método FontWidthToImageWidth() apresentados a seguir à classe GlyphOutlinePainter. No projeto de exemplos, estes membros estão numa segunda declaração parcial da mesma classe.

// Implement a glyph outline painter

public partial class GlyphOutlinePainter : IGlyphOutlinePainter
{
    private readonly GraphicsPath path;
    private PointF currentPoint;

    public GlyphOutlinePainter(GraphicsPath path)
    {
        this.path = path;
    }

    public void MoveTo(MoveTo moveTo)
    {
        path.CloseFigure();
        currentPoint = new PointF((float)moveTo.X, (float)moveTo.Y);
    }

    public void LineTo(LineTo lineTo)
    {
        var next = new PointF((float)lineTo.X, (float)lineTo.Y);
        path.AddLine(currentPoint, next);
        currentPoint = next;
    }

    public void CurveTo(CurveTo curveTo)
    {
        var next = new PointF((float)curveTo.X3, (float)curveTo.Y3);
        path.AddBezier(currentPoint, new PointF((float)curveTo.X1, (float)curveTo.Y1),
            new PointF((float)curveTo.X2, (float)curveTo.Y2), next);
        currentPoint = next;
    }

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

Após a implementação IGlyphOutlinePainter, podemos usar objetos de seu tipo para renderizar um glifo individual, passando -os para o GlyphOutlineRenderer e chamando os métodos sobrecarregados correspondentes da família RenderGlyph().

Para renderizar uma sequência de texto, necessitamos de obter o glyphId para cada caractere e depois, utilizando um objeto do tipo GlyphOutlineRenderer, chamar um dos métodos da família RenderGlyph(), passando as coordenadas do glifo correspondente.

Vamos dar uma olhada em um exemplo de saída de uma linha de texto usando a biblioteca Aspose.font. Ele será construído na forma do método CustomDrawText(), que aceita parâmetros - *CustomDrawText *(texto da string, IFont, fontsize duplo, escova de fundo, pincel textbrush, string outfile).

Crie o método CustomDrawText() que atrai o texto especificado no objeto System.Drawing.bitmap e salva o bitmap resultante no disco.

Isso incluirá as seguintes etapas:

• Itera todos os símbolos em uma string de texto.
• Obtenha identificador de glifos para cada símbolo processado - GID.
• Crie um objeto do tipo glyphoutLinePainter, necessário pelo subsistema de renderização para desenhar o glifo atual.
• Crie um objeto do tipo aspose.font.renderers.GlyphOutlineRenderer e passe o objeto recém -criado de glyphoutlinePainter digite no construtor para GlyphOutlineRenderer. Este objeto GLYPHOUTLINERENDERER destina -se a renderizar glifos especificados.
• Atualmente, renderizou o glifo do processo usando o método GlyphOutlineRenderer.RenderGlyph(). TransformationMatrix O objeto é usado para especificar coordenadas glifos. O glifo para renderizar é especificado pelo parâmetro gid.

Etapas auxiliares para esta estratégia

• Na saída horizontal, a linha de base no eixo Y mantém-se constante; na saída vertical, desloca-se para cada glifo seguinte.
• Na saída horizontal, a coordenada X aumenta pela largura do glifo anterior e pelo kerning do par, multiplicados pelo coeficiente de espaçamento.
• As coordenadas ‘x’ e ‘y’ são passadas paraTransformationMatrixobjeto usado por GlyphOutlineRenderer para desenhar glifos.
• O avanço horizontal é calculado para cada glifo seguinte; na saída vertical, a coordenada X mantém-se fixa.
• O objeto do tipo GlyphOutlineRenderer desenha glifos com a ajuda de GlyphOutlinePainter não diretamente no Bitmap, mas no objeto GraphicsPath passado para o construtor de GlyphOutlinePainter, pelo que utilizamos o objeto do tipo System.Drawing.Graphics para desenhar GraphicsPath em Bitmap.
• O método FontWidthToImageWidth() converte a largura do glifo de unidades da fonte para píxeis.

A primeira sobrecarga cria e liberta um bitmap. A segunda recebe um bitmap pertencente ao código que chama o método e suporta espaçamento, coordenadas, sobreposições e saída vertical. Adicione ambas as sobrecargas a GlyphOutlinePainter:

// Render text with spacing, coordinates, overlays and vertical layout

public static void CustomDrawText(string text, IFont font, double fontSize,
    Brush backgroundBrush, Brush textBrush, string outFile)
{
    using var bitmap = new Bitmap(960, 720);
    CustomDrawText(text, font, fontSize, backgroundBrush, textBrush, outFile, bitmap);
}

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)
{
    const double dpi = 300;
    double scale = fontSize * dpi / 72;
    bitmap.SetResolution((float)dpi, (float)dpi);
    using (Graphics graphics = Graphics.FromImage(bitmap))
    {
        // A transparent background preserves an existing image for overlays.
        graphics.FillRectangle(backgroundBrush, 0, 0, bitmap.Width, bitmap.Height);
        graphics.SmoothingMode = SmoothingMode.HighQuality;
        GlyphId? previousGid = null;
        double glyphXCoordinate = coordinateX;
        double glyphYCoordinate = coordinateY + scale;

        foreach (char character in text)
        {
            GlyphId gid = font.Encoding.DecodeToGid(character);
            if (gid == null) continue;
            Glyph glyph = font.GlyphAccessor.GetGlyphById(gid);
            if (glyph == null) continue;

            if (previousGid != null)
            {
                if (topDown)
                    glyphYCoordinate += scale;
                else
                {
                    double advance = FontWidthToImageWidth(font.Metrics.GetGlyphWidth(previousGid),
                        glyph.SourceResolution, fontSize, dpi);
                    double kerning = font.Metrics.GetKerningValue(previousGid, gid)
                        / (double)glyph.SourceResolution * scale;
                    // Like the source example, the coefficient scales the whole advance.
                    glyphXCoordinate += (advance + kerning) * kerningCoefficient;
                }
            }

            using var path = new GraphicsPath();
            var painter = new GlyphOutlinePainter(path);
            var renderer = new GlyphOutlineRenderer(painter);
            var matrix = new TransformationMatrix(new double[]
            {
                scale, 0, 0, -scale, glyphXCoordinate, glyphYCoordinate
            });
            renderer.RenderGlyph(font, gid, matrix);
            path.FillMode = FillMode.Winding;
            graphics.FillPath(textBrush, path);
            previousGid = gid;
        }
    }
    // The caller owns the supplied bitmap and may reuse it for another overlay.
    bitmap.Save(outFile, ImageFormat.Png);
}

Adicione à mesma classe o método auxiliar que converte a largura de unidades da fonte para píxeis:

// Convert font units to image pixels

private static double FontWidthToImageWidth(double width, int fontSourceResolution,
    double fontSize, double dpi = 300)
{
    return width / fontSourceResolution * fontSize * dpi / 72;
}

O exemplo apresenta «Hello world» em Verdana preto sobre branco e em Lato azul sobre amarelo. Guarda Custom_Verdana.png e Custom_Lato.png:

// Render two fonts with a custom glyph painter

string verdanaPath = Path.Combine(DataDir, "TTF", "verdana.ttf");
string latoPath = Path.Combine(DataDir, "TTF", "LatoWeb-Regular.ttf");
Font verdana = Font.Open(new FontDefinition(FontType.TTF, "ttf", new FileSystemStreamSource(verdanaPath)));
Font lato = Font.Open(new FontDefinition(FontType.TTF, "ttf", new FileSystemStreamSource(latoPath)));
string verdanaOutput = Path.Combine(OutputDir, "Custom_Verdana.png");
string latoOutput = Path.Combine(OutputDir, "Custom_Lato.png");
GlyphOutlinePainter.CustomDrawText("Hello world", verdana, 24, Brushes.White, Brushes.Black, verdanaOutput);
GlyphOutlinePainter.CustomDrawText("Hello world", lato, 24, Brushes.Yellow, Brushes.Blue, latoOutput);

Resultado da implementação:

Verdana

Lato

Kerning

O método obtém o kerning dos pares da fonte. kerningCoefficient: 1.25 aumenta em 25% todo o avanço horizontal (largura do glifo anterior mais o kerning do par). O exemplo utiliza Verdana e guarda IncreasedSpacing.png:

// Increase the horizontal glyph advance

string fontPath = Path.Combine(DataDir, "TTF", "verdana.ttf");
Font font = Font.Open(new FontDefinition(FontType.TTF, "ttf", new FileSystemStreamSource(fontPath)));
string outFile = Path.Combine(OutputDir, "IncreasedSpacing.png");
using var bitmap = new Bitmap(960, 720);
GlyphOutlinePainter.CustomDrawText("Hello world", font, 18, Brushes.White, Brushes.Black,
    outFile, bitmap, kerningCoefficient: 1.25);

Resultado da implementação:

Verdana com coeficiente de espaçamento 1.25

Renderizar texto por coordenadas

Posicione o texto com coordinateX e coordinateY. Para obter a primeira linha de base, o método adiciona fontSize * 300 / 72 píxeis a coordinateY. A 18 pontos, coordinateX: 300 e coordinateY: 225 colocam-na em (300, 300). O resultado é guardado em PositionedText.png:

// Position text at explicit coordinates

string fontPath = Path.Combine(DataDir, "TTF", "verdana.ttf");
Font font = Font.Open(new FontDefinition(FontType.TTF, "ttf", new FileSystemStreamSource(fontPath)));
string outFile = Path.Combine(OutputDir, "PositionedText.png");
using var bitmap = new Bitmap(960, 720);
// At 18 points and 300 DPI the 75-pixel baseline offset makes the baseline Y=300.
GlyphOutlinePainter.CustomDrawText("Hello world", font, 18, Brushes.White, Brushes.Black,
    outFile, bitmap, coordinateX: 300, coordinateY: 225);

Resultado da implementação:

Verdana, primeira linha de base em X=300 e Y=300

Como adicionar o texto a uma imagem

Para adicionar texto a uma imagem existente, passe um bitmap e um pincel de fundo transparente ao método comum. O pincel transparente preserva os píxeis existentes.

A sobrecarga de CustomDrawText() que aceita um bitmap já suporta este cenário. Desenha na imagem fornecida e guarda-a em PNG; o bitmap continua a pertencer ao código que chama o método.

O exemplo cria OverlayBase.png em OutputDir, abre a imagem e adiciona uma sombra cinzenta e uma anotação castanha. Guarda separadamente Shadow.png e ShadowAnnotated.png; não é necessária uma imagem de entrada externa:

// Add a shadow and annotation to an existing image

string fontPath = Path.Combine(DataDir, "TTF", "verdana.ttf");
Font font = Font.Open(new FontDefinition(FontType.TTF, "ttf", new FileSystemStreamSource(fontPath)));
string inputImagePath = Path.Combine(OutputDir, "OverlayBase.png");
GlyphOutlinePainter.CustomDrawText("Hello world", font, 17, Brushes.White, Brushes.Black, inputImagePath);
using var bitmap = new Bitmap(inputImagePath);
string shadowFile = Path.Combine(OutputDir, "Shadow.png");
GlyphOutlinePainter.CustomDrawText("Hello world", font, 17, Brushes.Transparent, Brushes.Gray,
    shadowFile, bitmap, coordinateX: -3);
string annotatedFile = Path.Combine(OutputDir, "ShadowAnnotated.png");
GlyphOutlinePainter.CustomDrawText("<= Shadow effect", font, 17, Brushes.Transparent, Brushes.Brown,
    annotatedFile, bitmap, coordinateX: 400);

Resultado da implementação:

Verdana com sombra

Verdana com sombra e anotação. A anotação é cortada na margem direita da área de 960 píxeis de largura.

Emitindo o texto de cima para baixo

A mesma sobrecarga suporta saída vertical com topDown: true. Coloca o primeiro glifo na linha de base inicial e desloca cada glifo seguinte fontSize * 300 / 72 píxeis para baixo.

O exemplo apresenta «Top down» em Verdana em X=400 e guarda TopDown.png. Com coordinateY igual a zero e tamanho de 18 pontos, a primeira linha de base fica em Y=75 píxeis:

// Render text vertically from top to bottom

string fontPath = Path.Combine(DataDir, "TTF", "verdana.ttf");
Font font = Font.Open(new FontDefinition(FontType.TTF, "ttf", new FileSystemStreamSource(fontPath)));
string outFile = Path.Combine(OutputDir, "TopDown.png");
using var bitmap = new Bitmap(960, 720);
GlyphOutlinePainter.CustomDrawText("Top down", font, 18, Brushes.White, Brushes.Black,
    outFile, bitmap, coordinateX: 400, topDown: true);

Resultado da implementação:

Verdana, de cima para baixo

Informações adicionais

O método utiliza 300 DPI. scale = fontSize * dpi / 72 converte o tamanho da fonte de pontos para píxeis. glyphXCoordinate e glyphYCoordinate definem a posição da linha de base do glifo. Na saída horizontal, o avanço seguinte inclui a largura do glifo anterior e o kerning do par obtido da fonte; kerningCoefficient multiplica a sua soma.