Android插入方程技术方案分析

Android插入方程技术方案分析

上一回《iOS Pages插入方程功能分析》中,我们分析了iOS Pages插入方程的用户交互过程。

这一回开始,开始分析Android如何实现插入方程的功能。

一、目标

分析Android插入方程的技术实现方案,为『神马笔记』插入方程功能扫除技术障碍。

二、技术问题

编写数学公式常用的2种语言是LaTeXMathML,从手机端编辑的角度来看,LaTeX优于MathML,MathML作为XML的子集,需要编写大量的标签元素,不太适合手机编辑。

因此,选择LaTeX来实现插入数学公式。

  • 使用LaTeX需要解决的技术问题
问题 描述
解析 通过解析LaTeX公式,从而判断是否有效,是否为空。
渲染 渲染解析后的LaTeX
  • 使用MathML需要解决的技术问题
问题 描述
解析 通过解析MathML,从而判断有效性。
转换 将MathML转换为LaTeX,从而进行渲染。

三、实现方案

1. 解析LaTeX

方案 描述 参考资料
JMathTeX LaTeX的Java解析渲染库,并对MathML提供了有限支持。 http://jmathtex.sourceforge.net/
jlatexmath A Java API to render LaTeX https://github.com/opencollab/jlatexmath
jlatexmath-android aJLaTeXMath Library - Displays LaTeX commands in android OS. https://github.com/mksmbrtsh/jlatexmath-android
JLaTexMath-andriod JLaTexMath for Android
完美支持、数学、物理、化学公式、汉字解析、图文混排

本项目借鉴自jlatexmath-android(由java Api 转化来的Android版本)

本项目针对化学、生物类的中文公式做了优化。
https://github.com/sixgodIT/JLaTexMath-andriod
jlatexmath-android This is a fork of jlatextmath project that brings rendering of LaTeX math to Android. https://github.com/noties/jlatexmath-android

2. 渲染LaTeX

除了解析LaTeX代码库自带的渲染功能外,还可以通过网页方式渲染LaTeX。

方案 描述 参考资料
MathJax Beautiful math in all browsers
A JavaScript display engine for mathematics that works in all browsers.
https://www.mathjax.org/
KaTeX Fast math typesetting for the web. https://katex.org/
https://github.com/KaTeX/KaTeX

3. 解析MathML

MathML是XML的子集,因此所有解析XML的代码库都可以用于解析MathML。

方案 描述 参考资料
PULL PULL解析器小巧轻便,解析速度快,简单易用,非常适合在Android移动设备中使用,Android系统内部在解析各种XML时也是用PULL解析器,Android官方推荐开发者们使用Pull解析技术 https://www.cnblogs.com/guolingyun/p/6148462.html
SAX Simple API XML。
一种基于事件的解析器,事件驱动的流式解析方式是,从文件的开始顺序解析到文档的结束,不可暂停或倒退。
https://www.jianshu.com/p/4e6eeec47b27
DOM Document Object Model。
DOM,即对象文档模型,它是将整个XML文档载入内存(所以效率较低,不推荐使用),每一个节点当做一个对象,结合代码分析。
https://blog.csdn.net/d_shadow/article/details/55253586

4. 转换MathML

我们通过LaTeX工具库完成了公式渲染,因此只需要将MathML转换为LaTeX,即可渲染MathML。

方案 描述 参考资料
xsltml XSLT MathML Library http://xsltml.sourceforge.net/
https://www.jianshu.com/p/b4caef5bf1ab
mml2tex Converts MathML to LaTeX https://github.com/transpect/mml2tex
mathml Processing MathML with Java https://github.com/moisko/mathml
mathml-converter MathML2Text https://github.com/imanneee/mathml-converter

四、实现过程

序号 过程 描述
1 测试技术方案 我们针对提出来的技术问题寻找了相应的技术解决方案,但是否确实可行,仍然需要通过测试才能最终确定。因此,第一步完成技术方案的测试。
2 方程编辑 整合技术方案,完成独立的LaTeX方程编辑器。
3 方程操作 以方程为单位进行操作,从笔记中插入、编辑、删除、……
4 快捷输入 实现快捷输入栏,辅助方程编辑
5 支持MathML 支持MathML格式的方程
6 样式 为方程指定文字大小、颜色、……等样式属性

神马笔记』的第一个方程实现方案,在技术方案可行的前提下,将实现方程编辑和操作2个过程,实现在笔记中插入数学公式。至于快捷输入、MathML支持、方程样式将在未来的后续版本中陆续实现。

五、示例方程

1.

\[ \frac{\partial f}{\partial x} = 2\,\sqrt{a}\,x \]

2.

1
\begin{array}{l}\forall\varepsilon\in\mathbb{R}_+^*\ \exists\eta>0\ |x-x_0|\leq\eta\Longrightarrow|f(x)-f(x_0)|\leq\varepsilon\\\det\begin{bmatrix}a_{11}&a_{12}&\cdots&a_{1n}\\a_{21}&\ddots&&\vdots\\\vdots&&\ddots&\vdots\\a_{n1}&\cdots&\cdots&a_{nn}\end{bmatrix}\overset{\mathrm{def}}{=}\sum_{\sigma\in\mathfrak{S}_n}\varepsilon(\sigma)\prod_{k=1}^n a_{k\sigma(k)}\\\sideset{_\alpha^\beta}{_\gamma^\delta}{\begin{pmatrix}a&b\\c&d\end{pmatrix}}\\\int_0^\infty{x^{2n} e^{-a x^2}\,dx} = \frac{2n-1}{2a} \int_0^\infty{x^{2(n-1)} e^{-a x^2}\,dx} = \frac{(2n-1)!!}{2^{n+1}} \sqrt{\frac{\pi}{a^{2n+1}}}\\\int_a^b{f(x)\,dx} = (b - a) \sum\limits_{n = 1}^\infty  {\sum\limits_{m = 1}^{2^n  - 1} {\left( { - 1} \right)^{m + 1} } } 2^{ - n} f(a + m\left( {b - a} \right)2^{-n} )\\\int_{-\pi}^{\pi} \sin(\alpha x) \sin^n(\beta x) dx = \textstyle{\left \{ \begin{array}{cc} (-1)^{(n+1)/2} (-1)^m \frac{2 \pi}{2^n} \binom{n}{m} & n \mbox{ odd},\ \alpha = \beta (2m-n) \\ 0 & \mbox{otherwise} \\ \end{array} \right .}\\L = \int_a^b \sqrt{ \left|\sum_{i,j=1}^ng_{ij}(\gamma(t))\left(\frac{d}{dt}x^i\circ\gamma(t)\right)\left(\frac{d}{dt}x^j\circ\gamma(t)\right)\right|}\,dt\\\begin{array}{rl} s &= \int_a^b\left\|\frac{d}{dt}\vec{r}\,(u(t),v(t))\right\|\,dt \\ &= \int_a^b \sqrt{u'(t)^2\,\vec{r}_u\cdot\vec{r}_u + 2u'(t)v'(t)\, \vec{r}_u\cdot\vec{r}_v+ v'(t)^2\,\vec{r}_v\cdot\vec{r}_v}\,\,\, dt. \end{array}\\\end{array}

3.

1
\text{A long division \longdiv{12345}{13}

4.

1
{a \bangle b} {c \brace d} {e \brack f} {g \choose h}

5.

1
\begin{array}{cc}\fbox{\text{A framed box with \textdbend}}&\shadowbox{\text{A shadowed box}}\cr\doublebox{\text{A double framed box}}&\ovalbox{\text{An oval framed box}}\cr\end{array}

6.

1
\frac{\partial f}{\partial x} = 2\,\sqrt{a}\,x

7.

1
\[Mn{{O}_{2}}/M{{n}_{2}}{{O}_{3}}+{{H}_{2}}\to M{{n}_{3}}{{O}_{4}}\]

8.

1
\[M{{n}_{3}}{{O}_{4}}+{{H}_{2}}\to MnO\]

9.

1
2
3
4
5
6
7
8
9
10
11
12
13
<math xmlns="http://www.w3.org/1998/Math/MathML">

<mrow>
<msup><mi>a</mi><mn>2</mn></msup>
<mo>+</mo>

<msup><mi>b</mi><mn>2</mn></msup>
<mo>=</mo>

<msup><mi>c</mi><mn>2</mn></msup>
</mrow>

</math>

六、Next

欲知技术方案是否可行,还请继续关注『神马笔记』。

七、Finally

~遥岑远目~献愁供恨~玉簪螺髻~