使用字体库的文本渲染| .NET

概述

如果您想将文本渲染到图像中的功能，则此处的文章将教您如何使用任何格式的字体进行操作，并在字体库中使用Aspose.font API解决方案支持。该库允许您轻松地将文本转换为图像，并将文本添加到任何图像中。

渲染文字

要在图像中绘制文本，请使用 RenderingUtils 类的 DrawText 方法。本例使用 Verdana 绘制“Hello world”，并将 PNG 流保存为 Text.png。

将 DataDir 设为包含 TTF/verdana.ttf 和 TTF/LatoWeb-Regular.ttf 的目录，将 OutputDir 设为现有的输出目录。示例使用的命名空间为 Aspose.Font, Aspose.Font.Sources, Aspose.Font.Renderers, System, System.IO。在测试项目中，BaseTests 提供这些目录和许可证设置。

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

实现结果：

drawText方法允许您设置线间距并执行自动逐字文本包装。

在下面的代码示例中，我们指定了线间距类型 lines -pacingtype.pixels并将其设置为10，然后将图像的最大宽度设置为450。

在给定范围内无法正确显示的所有文本(在我们的情况下为450)将包裹在新线路上。

本例用 Verdana 重复绘制“Hello world”，使文本超出 450 像素的宽度并自动换行。结果保存为 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);
}

实现结果：

DrawText() 返回 PNG 流。示例将流的位置重置到开头，复制到文件，然后释放两个流。

drawText()方法的函数家族涵盖标准文本或多行文本输出。但是，在某些情况下，您可能需要文本的自定义输出，例如，当您想以角度或其他方式压缩，伸展，旋转文本时。在这种情况下，您需要根据需要自定义输出。

自定义文本渲染

以下示例在 Windows 上使用 System.Drawing.Common，以 300 DPI 在 960 x 720 像素的画布上绘制字形轮廓。除上述命名空间外，还需导入 Aspose.Font.Glyphs, Aspose.Font.Rendering, Aspose.Font.RenderingPath, System.Drawing, System.Drawing.Drawing2D, System.Drawing.Imaging。

在aspose.font中绘制 glyphs使用 glyphoutlinererer类的方法之一。所有这些超载方法均在 iglyphrenderer接口中声明。

我们必须将字体的引用、字形ID或字形索引以及字形输出坐标作为参数传递给这些方法。为了传输最后一个参数，我们使用了一个由 Aspose.Font TransformationMatrix 对象表示的特殊矩阵。 下面我们将展示如何使用 TransformationMatrix 类型的对象将字形输出坐标传递给 RenderGlyph() 系列方法。

因此，要绘制字形，我们需要创建一个 GlyphOutlineRenderer 类型的对象。但此类对象无法自行绘制字形。它需要外部功能，该功能由 IGlyphOutlinePainter 接口描述。要使用 GlyphOutlineRenderer 对象，需要提供 IGlyphOutlinePainter 接口的实现。

下面您可以看到此接口的一个简单实现。 让我们创建 GlyphOutlinePainter 类，它需要一个 System.Drawing.Drawing2D.GraphicsPath 类型的对象来实现图形绘制目标。

下面是接口的实现。请将后面展示的 CustomDrawText() 重载和 FontWidthToImageWidth() 方法添加为 GlyphOutlinePainter 类的成员。示例项目将这些成员放在同一个类的第二个分部声明中。

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

在 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() 方法渲染当前处理的字形。TransformationMatrix 对象用于指定字形坐标。要渲染的字形由 gid 参数指定。

此策略的辅助步骤

• 在水平模式下，Y 轴上的基线保持不变；在垂直模式下，基线随每个后续字形移动。
• 在水平模式下，X 坐标的增量为前一个字形的宽度与字偶间距之和，再乘以间距系数。
• “X”和“Y”坐标均会传入 GlyphOutlineRenderer 使用的 TransformationMatrix 对象，用于绘制字形。
• 每个后续字形都会计算水平前进量；在垂直模式下，X 坐标保持不变。
• GlyphOutlineRenderer 类型的对象借助 GlyphOutlinePainter 绘制字形，而不是直接绘制到 Bitmap 中，而是绘制到传递给 GlyphOutlinePainter 构造函数的 GraphicsPath 对象中，因此我们使用 System.Drawing.Graphics 类型的对象来绘制 GraphicsPath 到位图中。
• FontWidthToImageWidth() 方法将字形宽度从字体单位转换为像素。

第一个重载创建并释放位图。第二个重载接受由调用方拥有的位图，支持间距、坐标、叠加绘制和垂直输出。请将两个重载都添加到 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);
}

将以下辅助方法添加到同一个类中，以将字体单位的宽度转换为像素：

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

本例使用 Verdana 以白底黑字绘制“Hello world”，并使用 Lato 以黄底蓝字绘制相同文本。结果保存为 Custom_Verdana.png 和 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);

实现结果：

Verdana

Lato

凯宁

辅助方法从字体中获取字偶间距。kerningCoefficient: 1.25 将整个水平前进量（前一个字形的宽度加上字偶间距）增大 25%。本例使用 Verdana，并保存为 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);

实现结果：

间距系数为 1.25 的 Verdana

通过坐标渲染文本

使用 coordinateX 和 coordinateY 设置文本位置。方法在 coordinateY 上加上 fontSize * 300 / 72 像素，得到第一条基线的位置。当字号为 18 点时，coordinateX: 300 和 coordinateY: 225 将其放在 (300, 300)。结果保存为 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);

实现结果：

Verdana，第一条基线位于 X=300、Y=300

如何将文本添加到图像

要在现有图像上添加文本，请将位图和透明背景画刷传给通用辅助方法。透明画刷会保留现有像素。

上面接受位图的 CustomDrawText() 重载已支持此场景。它在传入的图像上绘制并将其保存为 PNG；位图仍由调用方拥有。

本例先在 OutputDir 中创建 OverlayBase.png，然后打开该图像，添加灰色阴影和棕色注释。结果分别保存为 Shadow.png 和 ShadowAnnotated.png，无需外部输入图像：

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

实现结果：

带阴影的 Verdana

带阴影和注释的 Verdana。注释在宽 960 像素画布的右边缘被截断。

从上到下输出文本

同一个重载可通过 topDown: true 实现从上到下的输出。它将第一个字形放在初始基线上，然后将每个后续字形向下移动 fontSize * 300 / 72 像素。

本例在 X=400 处使用 Verdana 绘制“Top down”，并保存为 TopDown.png。当 coordinateY 为零且字号为 18 点时，第一条基线位于 Y=75 像素：

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

实现结果：

Verdana，从上到下绘制

附加信息

辅助方法使用 300 DPI。scale = fontSize * dpi / 72 将字号从点转换为像素。glyphXCoordinate 和 glyphYCoordinate 指定字形基线的位置。在水平模式下，下一个前进量包含前一个字形的宽度和字体提供的字偶间距；kerningCoefficient 对两者之和进行缩放。