集成

按平台快速上手

每个目标都使用来自 Rust 流水线的相同显示列表。选择您的技术栈，然后在 GitHub 上打开完整指南了解版本控制、字体和原生构建脚本。

更喜欢先在浏览器中试用公式？ 实时演示 · 数学图库

Web (WASM)

将 Rust 编译为 WebAssembly；Canvas 2D 绘制显示列表。使用已发布的 npm 包和可选的 ratex-formula Web 组件。

  1. 安装：npm install ratex-wasm
  2. 从包中加载 KaTeX 字体 CSS 并注册自定义元素或调用编程式 API。
<link rel="stylesheet" href="node_modules/ratex-wasm/fonts.css" />
<script type="module" src="node_modules/ratex-wasm/dist/ratex-formula.js"></script>
<ratex-formula latex="\frac{-b \pm \sqrt{b^2-4ac}}{2a}" font-size="48"></ratex-formula>
完整文档 npm

iOS (Swift)

通过 C ABI 构建 Swift / SwiftUI 视图；CoreGraphics 渲染显示列表。通过 GitHub 仓库使用 SPM。

  1. 在 Xcode 中：File → Add Package Dependencies → https://github.com/erweixin/RaTeX，选择 RaTeX 产品。
  2. 使用 RaTeXFormula / RaTeXView；字体在首次渲染时从包中加载。
// SwiftUI
RaTeXFormula(latex: #"\frac{-b \pm \sqrt{b^2-4ac}}{2a}"#, fontSize: 24)
完整文档

Android (Kotlin)

AAR 通过 JNI 链接到相同的原生库；Canvas 绘制字形和规则。已发布到 Maven 坐标。

  1. 添加 implementation("io.github.erweixin:ratex-android:…")（当前版本见 README）。
  2. 在 XML 或 Compose 中放置 RaTeXView 并在代码中设置 latex / fontSize。
binding.mathView.latex = """\frac{-b \pm \sqrt{b^2-4ac}}{2a}"""
binding.mathView.fontSize = 24f
完整文档

Flutter (Dart FFI)

Dart FFI 链接到 `libratex_ffi`；`CustomPainter` 渲染显示列表。预构建的 iOS XCFramework + Android `.so` 在 pub.dev 上。

  1. 在 pubspec.yaml 中添加 ratex_flutter 并运行 flutter pub get。
  2. 使用 RaTeXWidget(latex: r'…', fontSize: 28)。
RaTeXWidget(
  latex: r'\frac{-b \pm \sqrt{b^2-4ac}}{2a}',
  fontSize: 28,
  onError: (e) => debugPrint('RaTeX: ' + e.toString()),
)
完整文档 pub.dev

React Native

iOS 和 Android 上的原生视图；JS 打包 UI，Rust 在 `.a` / `.so` 中处理解析/排版。

  1. 安装：npm install ratex-react-native，然后 cd ios && pod install。
  2. 使用 RaTeXView / InlineTeX；字体随包一起发布。
import { RaTeXView } from 'ratex-react-native';

<RaTeXView
  latex="\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}"
  fontSize={24}
/>
完整文档 npm

Server / CLI (PNG)

使用 tiny-skia 将相同的显示列表光栅化为 PNG——CI 快照、后端或无头服务器——无需浏览器。

  1. 从仓库根目录使用 ratex-render crate（见 README“渲染为 PNG”）。
  2. 通过管道传入 LaTeX 标准输入或按文档传递参数；输出为 PNG 文件或标准输出。
echo '\frac{1}{2} + \sqrt{x}' | cargo run --release -p ratex-render
完整文档

架构概述

所有路径共享：词法分析 → 语法分析 → 排版 → 显示列表。原生 UI 和 WASM 将该列表映射到 CoreGraphics、Android Canvas、Flutter Canvas、Skia 或 Canvas 2D；服务器 crate 使用 tiny-skia 光栅化。

README — 架构