Representación de texto usando la biblioteca de fuentes | .NET

Descripción general

Si alguna vez quiso tener la función de representar texto en una imagen, el artículo aquí le enseñará cómo hacerlo con fuentes de cualquier formato, compatibles con la biblioteca de fuentes utilizando la solución API Aspose.Font. La biblioteca le permite convertir fácilmente texto en imágenes, así como agregar texto a cualquier imagen.

Representación de texto

Utilice el método DrawText de la clase RenderingUtils para dibujar texto en una imagen. El ejemplo muestra «Hello world» en Verdana y guarda el flujo PNG como Text.png.

Configure DataDir como el directorio que contiene TTF/verdana.ttf y TTF/LatoWeb-Regular.ttf, y OutputDir como un directorio de salida existente. Los ejemplos utilizan los espacios de nombres Aspose.Font, Aspose.Font.Sources, Aspose.Font.Renderers, System, System.IO. En el proyecto de pruebas, BaseTests proporciona los directorios y la configuración de la licencia.

// 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 de la implementación:

El método DrawText le permite establecer el interlineado y realizar un ajuste automático del texto palabra por palabra.

En el siguiente ejemplo de código, especificamos el tipo de interlineado LineSpacingType.Pixels y lo configuramos en 10, y configuramos el ancho máximo de la imagen en 450.

Todo el texto que no se pueda mostrar correctamente en el rango dado (en nuestro caso es 450) se ajustará en una nueva línea.

El ejemplo repite «Hello world» en Verdana para superar el ancho de 450 píxeles y distribuir el texto en varias líneas. El resultado se guarda como 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 de la implementación:

DrawText() devuelve un flujo PNG. Los ejemplos sitúan su posición al principio, lo copian a un archivo y liberan ambos flujos.

La familia de funciones para el método DrawText() cubre texto estándar o salida de texto multilínea. Pero, en algunos casos, es posible que necesite una salida personalizada del texto, por ejemplo, cuando desee comprimir, estirar, rotar el texto en ángulo o algo más. En este caso, deberá personalizar la salida según sus necesidades.

Representación de texto personalizada

Los siguientes ejemplos dibujan contornos de glifos con System.Drawing.Common en Windows, sobre un lienzo de 960 x 720 píxeles a 300 DPI. Importe también los espacios de nombres Aspose.Font.Glyphs, Aspose.Font.Rendering, Aspose.Font.RenderingPath, System.Drawing, System.Drawing.Drawing2D, System.Drawing.Imaging.

Para dibujar glifos dentro de Aspose.Font se utiliza uno de los métodos RenderGlyph() de la clase GlyphOutlineRenderer. Todos estos métodos sobrecargados se declaran en la interfaz IGlyphRenderer.

Como parámetro debemos pasar a estos métodos una referencia a la fuente, glyphId o índice de glifo y las coordenadas de salida del glifo. Para transferir el último parámetro, se utiliza una matriz especial representada por el objeto Aspose.Font TransformationMatrix. A continuación mostramos cómo usar objetos del tipo TransformationMatrix para pasar coordenadas de salida de glifos a métodos de la familia RenderGlyph().

Entonces, para dibujar un glifo, necesitamos crear un objeto del tipo GlyphOutlineRenderer. Pero un objeto así no puede dibujar un glifo por sí solo. Requiere funcionalidad externa, que se describe en la interfaz IGlyphOutlinePainter. Para utilizar el objeto GlyphOutlineRenderer se debe proporcionar una implementación de IGlyphOutlinePainter.

A continuación puede ver una implementación simple de esta interfaz. Creemos la clase GlyphOutlinePainter que requiere un objeto de tipo System.Drawing.Drawing2D.GraphicsPath para objetivos de dibujo gráfico.

A continuación se muestra la implementación de la interfaz. Añada las sobrecargas de CustomDrawText() y el método FontWidthToImageWidth() mostrados más adelante a la clase GlyphOutlinePainter. El proyecto de ejemplos sitúa estos miembros en una segunda declaración parcial de la misma clase.

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

Después de la implementación de IGlyphOutlinePainter, podemos usar objetos de su tipo para representar un glifo individual pasándolos al GlyphOutlineRenderer y llamando a los métodos sobrecargados correspondientes de RenderGlyph() familia.

Para representar una cadena de texto, necesitamos obtener el glyphId para cada carácter y luego, usando un objeto de tipo GlyphOutlineRenderer llamar a uno de los métodos de la familia RenderGlyph(), pasando las coordenadas del glifo correspondiente. Echemos un vistazo a un ejemplo de cómo generar una línea de texto usando la biblioteca Aspose.Font. Se creará en forma de método CustomDrawText(), que acepta parámetros: CustomDrawText(texto de cadena, fuente IFont, tamaño de fuente doble, pincel de fondo, pincel de texto, pincel de salida de cadena).

Cree el método CustomDrawText() que dibuja el texto especificado en el objeto System.Drawing.Bitmap y guarda el mapa de bits resultante en el disco.

Esto incluirá los siguientes pasos:

• Iterar todos los símbolos en una cadena de texto.
• Obtenga un identificador de glifo para cada símbolo procesado: gid.
• Cree un objeto de tipo GlyphOutlinePainter que es requerido por el subsistema de renderizado para dibujar el glifo actual.
• Cree un objeto del tipo Aspose.Font.Renderers.GlyphOutlineRenderer y pase el objeto recién creado del tipo GlyphOutlinePainter al constructor de GlyphOutlineRenderer. Este objeto GlyphOutlineRenderer está destinado a representar glifos específicos.
• Renderizar el glifo actualmente procesado usando el método GlyphOutlineRenderer.RenderGlyph(). El objeto TransformationMatrix se utiliza para especificar las coordenadas del glifo. El glifo a representar se especifica mediante el parámetro gid.

Pasos auxiliares para esta estrategia

• En modo horizontal, la línea base permanece constante en el eje Y; en modo vertical, se desplaza para cada glifo siguiente.
• En modo horizontal, la coordenada X aumenta según el ancho del glifo anterior y el kerning del par, multiplicados por el coeficiente de espaciado.
• Tanto las coordenadas ‘X’ como ‘Y’ se pasan al objeto TransformationMatrix utilizado por GlyphOutlineRenderer para dibujar glifos.
• El avance horizontal se calcula para cada glifo siguiente; en modo vertical, la coordenada X permanece fija.
• El objeto del tipo GlyphOutlineRenderer dibuja glifos con la ayuda de GlyphOutlinePainter no directamente en Bitmap, sino en el objeto GraphicsPath pasado al constructor de GlyphOutlinePainter, por lo que use el objeto de tipo System.Drawing.Graphics para dibujar GraphicsPath en Bitmap.
• El método FontWidthToImageWidth() convierte el ancho del glifo de unidades de fuente a píxeles.

La primera sobrecarga crea y libera un mapa de bits. La segunda acepta uno que pertenece al código que llama al método y admite espaciado, coordenadas, superposiciones y salida vertical. Añada ambas 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);
}

Añada a la misma clase el método auxiliar que convierte el ancho de unidades de fuente a píxeles:

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

El ejemplo muestra «Hello world» en Verdana negro sobre blanco y en Lato azul sobre amarillo. Guarda Custom_Verdana.png y 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 de la implementación:

Verdana

Lato

Interletraje

El método obtiene el kerning de pares de la fuente. kerningCoefficient: 1.25 aumenta un 25 % todo el avance horizontal (ancho del glifo anterior más kerning del par). El ejemplo utiliza Verdana y 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 de la implementación:

Verdana con un coeficiente de espaciado de 1.25

Representar texto por coordenadas

Posicione el texto con coordinateX y coordinateY. Para obtener la primera línea base, el método suma fontSize * 300 / 72 píxeles a coordinateY. A 18 puntos, coordinateX: 300 y coordinateY: 225 la sitúan en (300, 300). El resultado se guarda como 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 de la implementación:

Verdana, primera línea base en X=300 e Y=300

Cómo agregar el texto a una imagen.

Para añadir texto a una imagen existente, pase un mapa de bits y un pincel de fondo transparente al método común. El pincel transparente conserva los píxeles existentes.

La sobrecarga de CustomDrawText() que acepta un mapa de bits ya admite este escenario. Dibuja sobre la imagen recibida y la guarda como PNG; la imagen sigue perteneciendo al código que llama al método.

El ejemplo crea OverlayBase.png en OutputDir, abre esa imagen y añade una sombra gris y una anotación marrón. Guarda por separado Shadow.png y ShadowAnnotated.png; no necesita una imagen 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 de la implementación:

Verdana con sombra

Verdana con sombra y anotación. La anotación queda recortada en el borde derecho del lienzo de 960 píxeles de ancho.

Salida del texto de arriba a abajo

La misma sobrecarga permite la salida vertical con topDown: true. Sitúa el primer glifo en la línea base inicial y desplaza cada glifo siguiente fontSize * 300 / 72 píxeles hacia abajo.

El ejemplo muestra «Top down» en Verdana en X=400 y guarda TopDown.png. Con coordinateY igual a cero y un tamaño de 18 puntos, la primera línea base se encuentra en Y=75 píxeles:

// 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 de la implementación:

Verdana, de arriba abajo

información adicional

El método utiliza 300 DPI. scale = fontSize * dpi / 72 convierte el tamaño de fuente de puntos a píxeles. glyphXCoordinate y glyphYCoordinate definen la posición de la línea base del glifo. En modo horizontal, el siguiente avance incluye el ancho del glifo anterior y el kerning del par obtenido de la fuente; kerningCoefficient multiplica su suma.