文章目录
- 一、前言
- 二、效果展示
- 三、库文件
- 四、使用教程
- 五、MathML语法
- 5.1、顶层元素
- 5.2、字符/符号元素
- 5.3、通用布局元素
- 5.4、边标和角标元素
- 5.5、表格教学
- 5.6、数学符号
- 六、转换工具
- 6.1、手写转换公式工具myscript
- 6.2、截图转换公式工具Mathpix
一、前言
目前项目中需要显示数学公式，本来打算采用markdown，但是试了多种方式都不行，然后想过Latex，后面发现MathML，效果还不错，XML格式，然后XML解析的公式可以显示在QtMmlWidget控件中，也可以导出图片，显示在QLabel上。
二、效果展示
三、库文件
链接：https://pan.baidu.com/s/1bF4tuUA2FCfTnzabChVqkA
提取码：d33i
四、使用教程
//创建QtMmlWidget
m_mml_widget = new QtMmlWidget;
//打开文件槽函数
void MainWindow::openFile(const QString &mml_file_name)
{
//清除
//------------------------------------------------
m_mml_widget->clear();
//读取文件
//------------------------------------------------
QFile file(mml_file_name);
if (!file.open(QIODevice::ReadOnly)) {
qDebug()<<"打开文件失败!";
return;
}
QTextStream stream(&file);
//stream.setEncoding(QTextStream::UnicodeUTF8);
QString text = stream.readAll();
file.close(); //关闭文件
//显示公式
//------------------------------------------------
QString error_msg;
int error_line, error_column;
bool result = m_mml_widget->setContent(text, &error_msg, &error_line, &error_column);
if (!result) {
qDebug()<<"显示公式失败: "<<"Parse error: line " + QString::number(error_line) + ", col " + QString::number(error_column) + ": " + error_msg;
return;
}
//导出图片
//------------------------------------------------
QPixmap pm;
int idx = mml_file_name.lastIndexOf('.');
if (idx != -1) {
QString image_file_name = mml_file_name.mid(0, idx + 1) + "png";
if (pm.load(image_file_name))
m_compare_image->setPixmap(pm); //m_compare_image是一个QLabel
}
}
五、MathML语法
5.1、顶层元素
MathML的顶级元素。类似于HTML中的
<body>
<math>
.....
</math>
5.2、字符/符号元素
1、<mi>元素
<mi>元素指示内容应该作为标识符呈现，比如函数名、变量或符号常量；
还可以在其中使用任意文本来标记属于；
<math>
<mi> x </mi> <!-- x -->
<mi> π </mi> <!-- π -->
</math>
2、<mn>元素
<mn>元素表示一个数值文字，它通常是一串数字，并带有可能的分隔符(点或逗号)；
但是，它也允许在其中包含任意文本，实际上是一个数字量，例如 “11”；
<math>
<mn> 1 </mn>
<mn> 2e10 </mn>
</math>
3、<mo>元素
<mo>元素表示运算，包括括号等“运算符”、逗号和分号等分隔符；
<math>
<mn> 5 </mn>
<mo> + </mo>
<mn> 5 </mn>
</math>
4、<ms>元素
<ms>元素表示要由编程语言和计算机代数系统解释的字符串文字；
默认情况下，字符串文字显示为用双引号（"）括起来；
通过使用 lquote 和 rquote 属性，可以设置要显示的自定义字符；
请注意，除非引号是字符串文字的一部分，否则不应该指定引号；
<ms>元素的内容本身不是 ASCII 字符串，而是一系列字符以及<mglyph>和<malignmark>元素；
<math>
<ms lquote="„" rquote="“"> abc </ms> <!-- „abc“ -->
</math>
5、<mspace>元素
<mspace>元素用来表示一段空白，空白的大小由它自身的属性（width,height,depth）决定；
<math>
<!-- depth: 基线下方的空白高度 -->
<!-- height: 基线上方的空白高度 -->
<mspace depth="40px" height="20px" />
<!-- width: 空白的宽度 -->
<mspace width="100px" />
</math>
7、<mtext>元素
<mtext>元素用于呈现没有符号意义的任意文本，比如文本或注释；
要显示有符号意义的文本，可以使用<mi>和<mo>;
<math>
<mtext> Theorem of Pythagoras </mtext>
<mtext> /* comment here */ </mtext>
</math>
5.3、通用布局元素
1、<menclosed>元素
<menclosed>元素将其内容呈现在由 notation 属性指定的封闭符号中，支持 17 中不同的封闭符号；
<!-- 求阶乘 -->
<math>
<menclose notation="madruwb">
<msup><mi>a</mi><mn>2</mn></msup>
<mo>+</mo>
<msup><mi>b</mi><mn>2</mn></msup>
</menclose>
</math>
2、<merror>元素
<merror>元素用于将内容显示为错误消息；
<math>
<merror>
<mrow>
<mtext>除以0：</mtext>
<mfrac>
<mn> 1 </mn>
<mn> 0 </mn>
</mfrac>
</mrow>
</merror>
</math>
3、<mfrac>元素
<mfrac>元素用于显示分数；
<math>
<mfrac> <!-- a / b -->
<mi> a </mi>
<mi> b </mi>
</mfrac>
</math>
4、<mphantom>元素
<mphantom>元素以不可见的方式呈现，但是尺寸（例如高度、宽度和基线位置）仍然保持不变；
类似于 CSS 中的visibility: hidden；
<math>
<mrow>
<mi> x </mi>
<mo> + </mo>
<mphantom> <!-- mphantom 标签内的元素不可见 -->
<mi> y </mi>
<mo> + </mo>
</mphantom>
<mi> z </mi>
</mrow>
</math>
5、<mroot>元素
<mroot>元素用来表示一个有明确根指数的根式；
它接受两个参数，语法如下：<mroot> base index </mroot>；
<math>
<mroot>
<mi>x</mi>
<mn>3</mn>
</mroot>
</math>
6、<mrow>元素
<mrow>元素用于对连续多行表达式的不同子表达式进行分组；
一条子表达式通常算作一行，至少包含一或多个操作符与其运算对象（比如<mi>和<mn>）；
<math>
<mrow>
<mroot>
<mi>x</mi>
<mn>3</mn>
</mroot>
</mrow>
<mrow>
<mroot>
<mi>x</mi>
<mn>3</mn>
</mroot>
</mrow>
<mrow>
<mroot>
<mi>x</mi>
<mn>3</mn>
</mroot>
</mrow>
</math>
7、<msqrt>元素
<msqrt>元素用于表示一个平方根（不显示根指数）；
它只接受一个参数，语法如下：<msqrt> base </msqrt>；
<math>
<msqrt>
<mi>x</mi>
</msqrt>
</math>
8、<mstyle>元素
<mstyle>元素更改其子元素的样式；
<math>
<mstyle displaystyle="true" mathcolor="teal">
<mrow>
<munderover>
<mo stretchy="true" form="prefix">∑</mo>
<mrow>
<mi>i</mi>
<mo form="infix">=</mo>
<mn>1</mn>
</mrow>
<mi>n</mi>
</munderover>
<mstyle displaystyle="true">
<mfrac>
<mn>1</mn>
<mi>n</mi>
</mfrac>
</mstyle>
</mrow>
</mstyle>
</math>
5.4、边标和角标元素
1、<msub>元素
<msub>元素用来为表达式加下标；
语法如下：<msub> base subscript </msub>；
<math>
<msub>
<mi>X</mi>
<mn>1</mn>
</msub>
</math>
2、<msup>元素
<msup>元素用于为表达式加上标；
<math>
<msup>
<mi>X</mi>
<mn>2</mn>
</msup>
</math>
3、<msubsup>元素
<msubsup>元素用于为表达式同时附加上角标和下角标；
语法如下：<msubsup> base subscript superscript </msubsup>；
<math displaystyle="true">
<msubsup>
<mo> ∫<!-- 积分符号 --> </mo>
<mn> 0 </mn>
<mn> 1 </mn>
</msubsup>
</math>
5.5、表格教学
<mtable>,<mtr>,<mtd>元素类似于 HTML 中的<table>,<tr>,<td>
<math>
<mtable>
<mtr>
<mtd><mi>A</mi></mtd>
<mtd><mi>B</mi></mtd>
<mtd><mi>C</mi></mtd>
</mtr>
</mtable>
</math>
5.6、数学符号
1、代数符号
2、微积分符号
3、省略符号
4、函数符号
5、几何符号
6、希腊字母
7、不可见运算符
8、逻辑符号
9、集合符号
六、转换工具
6.1、手写转换公式工具myscript
使用手写转换工具：https://webdemo.myscript.com/，可以直接手写代码，一键转换成MathML标记文本；
点击Convert
6.2、截图转换公式工具Mathpix
使用Mathpix: https://mathpix.com/，可以截图提取图片中的公式，并可以转换多种格式：Latex、MarkDown、MathML、SVG等；
