关于groupShape.GetShapeRenderer().Save()的渲染问题

中文技术支持
1

我在使用如下代码将groupsharp保存为png图片，但是绘制内容质量不太行，是否有办法提高质量？

ImageSaveOptions saveOptions = new ImageSaveOptions(SaveFormat.Png)
{
    Resolution = 300,
    PaperColor = Color.Transparent,
    GraphicsQualityOptions = new GraphicsQualityOptions { UseTileFlipMode = true }
};
groupShape.GetShapeRenderer().Save(Path.Combine(Application.StartupPath, "math_sample", imageName2), saveOptions);

读取出来的图片，三角边绘制的参差不齐的。

1271×1097 10 KB

如下是word中原图另存为保存出来的，边缘很齐整，清晰。

1326×1184 20 KB

如下是word文件
test.docx (303.4 KB)

2

@Calvin95

如何提升 GroupShape.GetShapeRenderer().Save() 导出的 PNG 质量

下面的示例展示了几项可以显著改善渲染效果的设置。
如果仅仅提高 Resolution（分辨率）仍然出现锯齿或边缘不齐，通常是因为 图形渲染质量选项（GraphicsQualityOptions）默认没有开启足够的抗锯齿、文本平滑等功能。

1. 完整的代码示例

using Aspose.Words;
using Aspose.Words.Drawing;
using Aspose.Words.Saving;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Text;

// 假设已有 Document doc 并且获取了 GroupShape 对象
GroupShape groupShape = (GroupShape)doc.GetChild(NodeType.GroupShape, 0, true);

// ↑ 根据实际情况定位到目标 GroupShape

// ---------- 渲染选项 ----------
var saveOptions = new ImageSaveOptions(SaveFormat.Png)
{
    // 建议使用 300~600 DPI，数值越大渲染越细腻
    Resolution = 600,

    // 背景透明（如果需要的话）
    PaperColor = Color.Transparent,

    // 对 PNG 没有压缩质量选项，使用默认即可
    // 若需要后期压缩，可自行使用外部 PNG 优化工具

    // ------ 关键：图形质量选项 ------
    GraphicsQualityOptions = new GraphicsQualityOptions
    {
        // 开启抗锯齿（对几何图形、线条非常重要）
        AntialiasingMode = AntialiasingMode.AntiAlias,

        // 对文本使用更高质量的渲染（Math 公式里的字符受益）
        TextRenderingHint = TextRenderingHint.AntiAliasGridFit,

        // SmoothingMode 与 InterpolationMode 提供更细腻的平滑
        SmoothingMode = SmoothingMode.HighQuality,
        InterpolationMode = InterpolationMode.HighQualityBicubic,

        // 是否使用 TileFlipMode（通常在大图块渲染时使用），这里可关闭
        UseTileFlipMode = false
    }
};

// ---------- 保存 ----------
string outPath = Path.Combine(
    Application.StartupPath, "math_sample", "rendered_group.png");

groupShape.GetShapeRenderer().Save(outPath, saveOptions);

要点

  • Resolution：300 dpi 已经是常规打印质量，若仍出现锯齿，可尝试 600 dpi（或更高），随后使用图像编辑工具或代码自行降采样。
  • GraphicsQualityOptions 中的 AntialiasingMode、TextRenderingHint、SmoothingMode、InterpolationMode 是提升几何线条、曲线以及公式字符平滑度的关键。
  • UseTileFlipMode 在渲染非常大的图形时可以提升速度，但在小图或需要最高质量时建议关闭。

2. 为什么这些设置能改善质量？

参数 作用 对渲染结果的影响
Resolution 每英寸像素数（DPI） 更高 DPI → 更细腻的像素网格，减小锯齿。
AntialiasingMode 对所有矢量图形（线、形状、路径）进行抗锯齿 边缘更平滑、斜线不再出现明显阶梯。
TextRenderingHint 文本字符的渲染方式 文字（包括 Math 公式）更清晰、无毛刺。
SmoothingMode GDI+ 渲染时的平滑策略 对整体图形的平滑度提升。
InterpolationMode 位图放大/缩小时的插值方法 在高 DPI 降采样或放大时保留细节。
UseTileFlipMode 大图块渲染的性能选项 关闭可避免某些情况下的像素错位。

3. 其他可选方案

场景 替代办法
需要无损矢量输出 将 GroupShape 渲染为 EMF（矢量图元文件），随后使用 ImageSaveOptions（MetafileRenderingMode.Vector）转成 PNG。
仅保留数学公式 使用 Aspose.Words.Math 将公式导出为 MathML 或 SVG，然后自行转换为高分辨率 PNG。
后处理降噪 渲染完毕后使用 System.Drawing、ImageSharp 或其他图像库进行轻微的 Gaussian blur + 锐化，可进一步抚平细微锯齿。

示例：渲染为 EMF 再转 PNG

var emfOptions = new ImageSaveOptions(SaveFormat.Emf);
groupShape.GetShapeRenderer().Save("temp.emf", emfOptions);

// 读取 EMF 并以更高 DPI 保存为 PNG
var pngOptions = new ImageSaveOptions(SaveFormat.Png) { Resolution = 600 };
var doc = new Document(); // 空文档，仅用于加载 EMF
doc.FirstSection.Body.AppendChild(new Shape(doc, ShapeType.Image) { ImageData = ImageData.FromFile("temp.emf") });
doc.Save("final.png", pngOptions);

这种方式在极端对齐要求（例如数学公式的斜线）时往往能得到最满意的结果。

4. 常见问题排查

问题 检查点
仍然出现锯齿 ① 确认 GraphicsQualityOptions 已经全部设置（尤其 AntialiasingMode）。
② 把 Resolution 再提高到 800‑1200 DPI 进行对比。
渲染速度显著下降 高 DPI + 抗锯齿会消耗更多 CPU。可以先测试一次高 DPI，确认质量后再决定是否降低 DPI 再做后期放大。
透明背景显示为黑色 确认 PaperColor = Color.Transparent，并在使用的图片查看器或 UI 控件中开启透明背景显示。
Math 公式文字模糊 ① 使用 TextRenderingHint.AntiAliasGridFit（或 ClearTypeGridFit），
② 增加 DPI，或将公式单独导出为 SVG 再渲染。

参考文档

小结

  1. 提高 DPI（300 → 600+）是最直接的方式。
  2. 开启完整的 Anti‑Aliasing、TextRenderingHint、SmoothingMode、InterpolationMode，并关闭不必要的 UseTileFlipMode。
  3. 若仍有极致需求，可先渲染为 EMF（矢量），再转为 PNG，或单独导出公式为 SVG。

这样即可得到与 Word 中“另存为图片”几乎相同、边缘平整、清晰度高的 PNG 文件。祝您使用愉快！如果还有其他细节需要帮助，请随时告知。

3

@Calvin95
我们已在内部问题跟踪系统中创建了以下新工单，并将根据 免费支持政策 中提到的条款交付其修复。

问题 ID：WORDSNET-28985

如果您需要优先支持并直接联系付费支持管理团队，可以使用 付费支持服务。

4

@Calvin95 三角形的右侧并非完全垂直（略微倾斜 0.35 像素），这会导致转换为像素时出现“阶梯状”效果。这是一种称为锯齿的常见渲染瑕疵。要修复此问题并使边缘看起来平滑，您应该启用抗锯齿选项：

ImageSaveOptions opt = new ImageSaveOptions(SaveFormat.Png)
{
    Resolution = 300,
    PaperColor = Color.Transparent,

    // This option fixes rendering artifacts.
    UseAntiAliasing = true
};