开发日记 · 2026-09-26
攻克公式导出的终极痛点：移动端 KaTeX 矢量光栅化与无损导出
传统 Markdown 工具在导出 PDF 或 Word 时，LaTeX 公式往往变成乱码或低清失真。本文介绍我们如何在 Flutter 移动端实现 KaTeX 高分辨率矢量光栅化渲染，并精准注入 PDF 与 Word OpenXML 架构。
结论先说
学术与数学公式是严谨思考不可或缺的基石。在市面大多数笔记软件中，LaTeX 公式在屏幕上看着正常，但一旦点击“导出为 PDF”或“导出为 Word”，公式就会变成难以辨认的低像素截图、乱码符号甚至直接消失。我们在 Accrue Notes 中研发了一整套公式矢量光栅化与 OpenXML 结构无损映射流水线，让导出的文档达到学术期刊级出版标准。
核心挑战
- 移动端跨平台排版引擎限制：Flutter 原生并不自带 MathML 或 TeX 矢量排版引擎；
- PDF 矢量文本嵌入痛点：PDF 渲染流中若缺少专用数学字体字形（如 AMS 符号），导出的公式字符会全部变成方块问号；
- Word (.docx) 的复杂 XML 嵌套：Word 要求行内图片或公式必须精确计算 baseline 对齐偏移量，否则公式会漂浮在文字行上方或遮挡下行文本。
架构实现：双通道光栅化流水线
我们在底层集成高性能 KaTeX 引擎，并在用户点击导出时启动无头渲染管道：
Markdown 正文
├── 行内公式: $E=mc^2$
└── 块级公式: $$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$
│
▼
[KaTeX 抽象语法树解析 & 布局测量]
│
├──► 计算精确公式宽高与基线深度 (Baseline Descent)
│
▼
[4x 超采样高分辨率离屏光栅化 (High-DPI Rasterizer)]
│
├──► 导出 PDF: 转换为高清透明通道图片，按物理点阵缩放嵌入矢量流
│
└──► 导出 Word: 生成 docx 内联图形，写入 wp:inline 及基线偏移量成果验证
经过优化后，包含 50+ 复杂矩阵与微积分公式的研报文档，导出 PDF 仅需不到 1.2 秒。在 Retina 高清屏与高精度打印机下放大 400%，公式边缘依旧锋利平滑，与正文字符自然对齐。