CN103176954A - 一种基于HTML5 canvas的数学公式显示方法及系统 - Google Patents

Abstract

本发明提出了一种基于HTML5 canvas的数学公式显示方法及系统，该方法包括如下步骤：利用画布创建模块创建画布；利用控制器建立字符、符号函数库；利用控制器建立数学公式结构控制函数库；利用MathML数学公式模块编写MathML数学公式；利用公式处理模块解析所述MathML数学公式，根据所述字符、符号函数库以及数学公式结构控制函数库中的内容将所述MathML数学公式绘制在所述画布上；输出并显示数学公式。本发明利用HTML5的canvas功能和MathML在表达数学公式方面的规范性，提出了简单、高效的HTML5+JavaScript+MathML技术，通过解析MathML数学公式，快速、高效地将数学公式显示在网页上。

Description

一种基于HTML5 canvas的数学公式显示方法及系统

技术领域

本发明涉及数字教育技术领域，具体涉及一种基于HTML5 canvas的数学公式显示方法及系统。

背景技术

数学公式由于结构复杂性成为了互联网上数学信息交流和教育发展的瓶颈。在MathML(Mathematical Markup Language，数学置标语言)出现之前，在互联网上发布数学公式的方法有HTML(Hypertext Markup Language，超文本标记语言)内置的公式描述标记、HTML+Image（超文本标记语言+图片方式）文件和HTML+JavaApplet（超文本标记语言+Java应用程序）插件等。HTML内置的公式描述标记虽然能够显示数学公式，但是由于内置标记的数量与功能有限，使得复杂的公式无法正常显示，同时也不能表示数学公式的语义。HTML+Image方式很好的解决了数学公式在网页上的显示问题，但其缺点也很明显：一方面图片相对于文本，需要占用更大的存储空间，特别是网页中需要显示大量公式时，会严重影响页面加载速度；另一方面公式以图片格式呈现，一旦生成就无法进行编辑，从而导致公式的重用性差、利用率低。HTML+JavaApplet插件方式很好地解决了前一种方式的显示和编辑问题，可以实现数学文档交互式应用。但在使用HTML+JavaApplet插件方式前，用户需下载、安装插件，并且显示速度较慢，没有统一的标准，这是其发展的最大障碍。MathML的出现从根本上解决了以上三种方法的问题，基于MathML的数学公式显示方法是(X)HTML+MathML。目前，浏览器上的MathML显示技术非常复杂，现有的(X)HTML+MathML文档根据浏览器的差别又种类繁多。通常，为了适应多种浏览器，就要保留多种文档，从而使得数据大量冗余。

发明内容

为了克服上述现有技术中存在的缺陷，本发明的目的是提供一种基于HTML5 canvas的数学公式显示方法及系统，能够快速、高效地将数学公式显示在网页上。

为了实现本发明的上述目的，根据本发明的第一个方面，本发明提供了一种基于HTML5 canvas的数学公式显示方法，其包括如下步骤：

S1：利用画布创建模块创建画布；

S2：利用控制器建立字符、符号函数库；

S3：利用控制器建立数学公式结构控制函数库；

S4：利用MathML数学公式模块编写MathML数学公式；

S5：利用公式处理模块解析所述MathML数学公式，根据所述字符、符号函数库以及数学公式结构控制函数库中的内容将所述MathML数学公式绘制在所述画布上；

S6：输出并显示数学公式。

本发明的基于HTML5 canvas的数学公式显示方法利用HTML5的canvas功能和MathML在表达数学公式方面的规范性，提出了简单、高效的HTML5+JavaScript+MathML技术，通过解析MathML数学公式，快速、高效地将数学公式显示在网页上。

为了实现本发明的上述目的，根据本发明的第一个方面，本发明提供了一种数学公式显示系统，其包括包括画布创建模块、数学公式库建立模块、公式处理模块和MathML数学公式模块；所述画布创建模块用于创建画布，为数学公式的显示提供平台；所述数学公式库建立模块用于建立数学公式结构控制函数库和数学字符和符号函数库；所述MathML数学公式模块用于接收用户的输入信息形成数学公式；所述公式处理模块与MathML数学公式模块相连，所述公式处理模块包括解析器和结构内容控制器，用于接收MathML数学公式模块创建的数学公式并进行解析，以及进行数学公式结构和内容控制，并利用画布进行显示。

本发明的数学公式显示系统能够快速、高效地将数学公式显示在网页上。

本发明的附加方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明的实践了解到。

附图说明

本发明的上述和/或附加的方面和优点从结合下面附图对实施例的描述中将变得明显和容易理解，其中：

图1为本发明数学公式显示系统的结构示意图；

图2是在发明一种优选实施方式中字符平移前后字符显示效果图对比图；

图3是本发明利用公式处理模块解析MathML数学公式的流程图；

图4是本发明对MathML数学公式进行结构控制的流程图。

具体实施方式

下面详细描述本发明的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，仅用于解释本发明，而不能理解为对本发明的限制。

在本发明的描述中，除非另有规定和限定，需要说明的是，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是机械连接或电连接，也可以是两个元件内部的连通，可以是直接相连，也可以通过中间媒介间接相连，对于本领域的普通技术人员而言，可以根据具体情况理解上述术语的具体含义。

如图1所示，本发明提供了一种数学公式显示系统，其包括画布创建模块、数学公式库建立模块、公式处理模块和MathML数学公式模块。其中，画布创建模块用于创建画布，为数学公式的显示提供平台，数学公式库建立模块用于建立数学公式结构控制函数库和数学字符和符号函数库，MathML数学公式模块用于接收用户的输入信息形成数学公式，公式处理模块与MathML数学公式模块相连，公式处理模块包括解析器和结构内容控制器，用于接收MathML数学公式模块创建的数学公式并进行解析，以及进行数学公式结构和内容控制，并利用画布进行显示。

本发明还提供了一种基于HTML5 canvas的数学公式显示方法，其包括如下步骤：

第一步：利用画布创建模块创建画布。在本实施方式中，画布的创建是通过在HTML页面中加入canvas元素实现。但由于浏览器种类及版本的不同，会导致部分版本的浏览器无法正常显示创建后的画布。如IE9以下的版本都无法识别和使用canvas创建画布。在本实施方式中，当浏览器不支持canvas画布时，解决方法是在HTML页面中引入html5.js文件和excanvas.compiled.js文件，通过引入这两个文件，可以使得不支持canvas元素的浏览器支持canvas画布。

第二步：利用控制器建立字符、符号函数库。配置好画布后，要显示数学公式就需要编写绘制数学公式的函数。数学公式分为内容和结构两部分。在本实施方式中，字符、符号函数库由最小单位的组成数学公式的字符和符号组成。这里所说的最小是指组成数学公式的字符和符号的最小单元，包括单个数字，如0、1、2；单个字母，如a、b、c，单个运算符号，如“+”号、“-”号、求和符号等，对于数学公式的内容，为了提高绘制函数的复用率，需将数学公式分解成不能再分的最小单位，并为这些最小单位编写绘制函数，在本实施方式中，绘制函数可以通过手动编写代码实现，也可以使用图形软件AdobeIllustrator CS5自动生成绘制函数，具体操作方法为：首先，搜集字符素材，即标准的字符图片；其次，用图形软件Adobe Illustrator CS5打开字符图片；再次，使用软件中的“实时描摹”功能对图片进行描摹；最后，将描摹后的矢量图导出为“<canvas>(*.HTML)”类型。通过编辑模式打开此HTML文件，就可以获得该字符的绘制函数，形成数学字符和符号函数库。在遇到需要绘制的内容时，只需要调用函数库中相应的函数，便可将内容绘制并显示出来。

第三步：控制器建立数学公式结构控制函数库。对于数学公式的结构，首先对数学公式进行结构分类，为每种结构编写控制函数，形成结构控制函数库。在遇到需要表示结构时，只需要调用函数库中相应的控制函数，便可实现对结构的控制。在本实施方式中，数学公式结构控制函数库中数学公式结构包括角标结构、分式结构、根式结构和矩阵结构，每种结构对应相应的控制算法，在本实施方式中，每种结构对应相应的控制算法是根据该结构所占的宽度和高度，计算出这个结构块的宽度和高度，并根据各种结构的不同，通过计算出的偏移量将结构块进行偏移，实现结构控制目的。在本实施方式中，每种结构的偏移量的大小可以根据现有技术确定，偏移量分为水平偏移量和垂直偏移量，水平偏移量通过需要偏移的结构块的宽度乘以结构块的缩放比例得到，垂直偏移量通过需要偏移的结构块的最高高度乘以结构块的缩放比例得到。

第四步：利用MathML数学公式模块编写MathML数学公式。MathML是由W3C的数学工作组提出的一种基于XML的标准，用来在互联网上书写数学符号和公式的置标语言，它不但可以明确地表达出数学内容，还可以在其他应用中实现再利用和转换。

在本实施方式中，MathML数学公式的建立可以通过手动编写，这种方式需要使用者有一定MathML基础，且编写过程中容易出错。在本实施方式中，还可以使用能够自动生成MathML代码的公式编辑器，如MathType。这种方法只需要用户可视化的编辑所需要的数学公式即可，通过复制、粘贴可以获得转化后的MathML公式代码。

第五步：公式处理模块解析所述MathML数学公式，根据所述字符、符号函数库以及数学公式结构控制函数库中的内容将所述MathML数学公式绘制在所述画布上。

在本实施方式中，如图3所示，公式处理模块解析所述MathML数学公式的方法为：

S41：判断浏览器内核的类型；

S42：根据浏览器内核的类型，采用相应的方法载入XML文件或XML字符串；

S42：载入成功后，形成XML DOM树。

在本实施方式中，根据字符、符号函数库以及数学公式结构控制函数库中的内容将MathML数学公式绘制在画布上的方法为：

S51：使用JavaScript DOM对XML DOM树进行操作，获取XML DOM树的根节点；

S52：遍历所述根节点的一级子节点，并访问节点名；

S53：若节点名为内容节点，则访问所述节点的内容，并调用相应的内容控制函数；

S54：若节点名为结构节点，则调用相应的结构控制函数;

S55：判断是否所有节点都访问完毕，如果没有访问完毕，则返回步骤S52；如果访问完毕，则在画布中绘制所述公式。

由于MathML具有良好的递归性，要获取MathML的内容需要一个XML解析器来解析MathML。解析后能得到清晰的结构，因此很适合描述数学公式。解析器会将数学公式载入电脑的内存中，一旦文档被载入，可使用DOM对其数据进行操作。DOM把MathML作为一棵树来处理。但由于浏览器的不统一，对不同种类的浏览其所需要的解析器也不同。要兼容主流浏览器，就必须为不同内核的浏览器采用不同的解析器。目前主流浏览器的内核主要有IE等的Trident内核，Firefox等的Gecko内核，opera的Presto内核及safari等的WebKit内核。

基于Trident、Gecko、Presto内核的浏览器可以直接创建xmlDoc对象来载入XML文件，但是在基于WebKit内核的浏览器下，则只能通过xmlhttp方式进行获取。而基于Trident内核的浏览器需要用微软的解析器创建xmlDoc对象，Gecko、Presto内核的浏览器采用Mozilla解析器创建xmlDoc对象。正常载入XML文件后就可以对MathML节点进行操作。

对于Trident内核和非Trident内核的浏览器的DOM之间仍然存在一些差异。最重要的不同之处就是它们对空白文本节点的处理方式。当XML产生时，在节点之间常常会包含空白字符。Trident内核浏览器在使用node.childNodes[]时不会包含这些空白节点。而在非Trident内核的浏览器中，这些节点会存在于此数组中。因此，在获取子节点数组时就要根据相应的浏览器用相应的方法获得。

如图4所示，结构、内容控制器对解析后生成的DOM树进行遍历和处理继续拧结构和内容控制的流程为，首先，访问MathML DOM树的根节点，然后获取根节点的所有子节点并依次进行判断，若为内容节点，则访问内容节点的内容，并根据内容调用相应的字符函数，在canvas中绘制字符。若不是内容节点，则判断是否为结构节点，若不是结构节点，则获取其一级子节点集，若为结构节点，则访问其节点名称，根据节点名称调用相应的结构函数。在函数体内部继续获取该结构节点的一级子节点集，然后对每一个子节点进执行上步骤，进行循环，直到将所有内容节点遍历一遍。

以上步骤仅仅将结构节点内的所有内容节点的内容显示在canvas中，并没有进行结构的控制。因此针对每种结构，需要在函数内部设计不同的结构控制算法。结构函数内部至少存在一个结构块。

对于矩阵结构，它的结构块的个数是根据行列的变化而变化的。矩阵结构类似于表格结构，它是通过一组<mtr><mtd>…</mtd></mtr>表示一个结构块。其中<mtr>…</mtr>表示为一行，<mtd>…</mtd>表示一列。除矩阵结构外的其他结构块的起始和结束由<mrow>和</mrow>标记。如上标结构有两个结构块，一个结构块表示底数，另一个结构块表示指数。上下标结构有三个结构块，分别表示上中下三部分内容。

结构的控制由transform(x轴缩放，x轴倾斜，y轴倾斜，y轴缩放，x轴平移，y轴平移)方法实现，其中，x轴缩放，x轴倾斜，y轴倾斜，y轴缩放，x轴平移，y轴平移这6个参数两两为一组，分别控制着缩放、移动和选择。如果要显示角标，则需要同时控制缩放参数和移动参数。若仅是平移，则只需控制移动参数即可。为了精确控制每个结构块位置，需要保存每个结构块的内容所占长度，如对分式结构来说，不仅需要控制每个结构块的y轴偏移量来让分子在分式线上方，分母在分式线下方，还要控制x轴偏移量让内容所占长度小的居中。因此分式结构需要遍历两次，第一次用来计算各结构块的长度，调整好每个结构块的起始位置后第二次再将节点内容绘制在canvas上，最后将起始位置移至绘制分式之前的位置开始绘制分式线，分式线的长度等于最长的结构块的长度。

矩阵结构的控制同样需要进行两次遍历。第一次遍历用于确定矩阵的整体宽度和高度，同时记录每个结构块的高度和宽度。每行的高度由此行结构块中高度最高的决定，其余结构块在垂直方向上居中。每列的宽度由此列结构块中宽度最宽的决定，其余结构块在水平方向上居中。第二次遍历后通过第一次遍历确定的每个结构块的起始位置，绘制节点内容。内容绘制完成后将绘制的起始位置还原至内容起始位置，并根据矩阵的高度绘制左中括号，然后根据矩阵的宽度进行平移后绘制右中括号。这样，矩阵结构的数学公式就绘制在canvas中。

由于数学公式不仅仅是各种结构的组合，大部分情况都是各种结构的嵌套。而结构的嵌套增加了确定每个结构块起始位置的难度。因为嵌套使得起始位置不能简单的由某节点的一级子节点集的结构来确定，而要遍历所有结构。只有清楚了每个结构块内的所有结构，才能最终确定结构块的位置。结构块的y轴偏移量应由纵向跨度最大的结构来决定。如分式结构公式，若分子的一级子节点中根号的纵向跨度最大，但在不知道更深层子节点的情况下，不能以根号来确定y轴偏移量。假如在根号内又包含分式结构且分式结构的纵向跨度最大，那么就应以根号内的分式结构来确定分子结构块的起始位置。

在本实施方式中，在画布中绘制所述公式时，在每个字符或符号绘制完成后将绘制的起始位置移至所述字符或符号之后，具体方法为：在绘制字符或符号时先记录绘制的坐标位置，然后编写绘制字符或符号函数，编写完成后，先将绘制的起点坐标复位至之前保存的坐标位置，然后添加transform（参数1，参数2，···,参数6）方法，将此刻的坐标位置平移到字符或符号之后，所述参数1，参数2，···,参数6这6个参数两两为一组，分别控制着缩放、移动和选择。因此设置其中一组控制移动的参数为字符或符号的宽度，即可让坐标位置移动至字符或符号之后。字符绘制的效果如图2所示，图中（a）为字符绘制时光标未进行平移的效果，图中（b）为字符绘制时光标未进行平移的效果。

第六步：输出并显示数学公式。

本发明通过为显示数学公式所需的字符及符号建立字符库，然后在获取得到公式树的内容后再调用相应的字符函数，最终将字符显示出来，能够快速、高效地将数学公式显示在网页上。

与传统的数学公式图片方式相比，本发明简单易用，不需要繁琐的步骤就能够显示数学公式。并且，在网页加载数学公式时并不是以图片形式加载的，因此不需要占用大量的存储空间来存放公式图片，其次在互联网上浏览数学公式较多的网页时，其公式加载速度相比图片方式提升了很多。

与HTML+JavaApplet插件方式相比，本发明使用简单，不需要下载和安装任何插件。在编写需要显示数学公式的网页时，只需要在head标签内引入指定的JS文件即可。同时公式的显示速度也远远优于HTML+JavaApplet插件方式。

本发明还可对数学公式进行修改，重复利用。而对于图片方式，如果需要修改公式，则需要重新制作新的公式图片，在插入网页中。本发明则只需修改MathML代码即可完成数学公式的修改。

本发明在浏览器兼容性方面做了很大的改进。目前，采用MathML方式来显示数学公式的方法，针对不同的浏览器会有不同的显示方案，大大增加了用户使用难度。本发明能够针对不同的浏览器而采用统一的操作将公示显示在网页中。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

尽管已经示出和描述了本发明的实施例，本领域的普通技术人员可以理解：在不脱离本发明的原理和宗旨的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由权利要求及其等同物限定。

Claims (8)

1.一种基于HTML5 canvas的数学公式显示方法，其特征在于，包括如下步骤：

S1：利用画布创建模块创建画布；

S2：利用控制器建立字符、符号函数库；

S3：利用控制器建立数学公式结构控制函数库；

S4：利用MathML数学公式模块编写MathML数学公式；

S5：利用公式处理模块解析所述MathML数学公式，根据所述字符、符号函数库以及数学公式结构控制函数库中的内容将所述MathML数学公式绘制在所述画布上；

S6：输出并显示数学公式。

2.如权利要求1所述的基于HTML5 canvas的数学公式显示方法，其特征在于，所述字符、符号函数库由最小单位的组成数学公式的字符和符号组成。

3.如权利要求1所述的基于HTML5 canvas的数学公式显示方法，其特征在于，所述数学公式结构控制函数库中数学公式结构包括角标结构、分式结构、根式结构和矩阵结构，每种结构对应相应的控制算法。

4.如权利要求1所述的基于HTML5 canvas的数学公式显示方法，其特征在于，利用所述公式处理模块解析所述MathML数学公式的步骤为：

S41：判断浏览器内核类型；

S42：根据浏览器内核类型，采用相应的方法载入XML文件或XML字符串；

S42：载入成功后，形成XML DOM树。

5.如权利要求1所述的基于HTML5 canvas的数学公式显示方法，其特征在于，根据所述字符、符号函数库以及数学公式结构控制函数库中的内容将所述MathML数学公式绘制在所述画布上的方法为：

S51：使用JavaScript DOM对XML DOM树进行操作，获取XML DOM树的根节点；

S52：遍历所述根节点的一级子节点，并访问节点名；

S53：若节点名为内容节点，则访问所述节点的内容，并调用相应的内容控制函数；

S54：若节点名为结构节点，则调用相应的结构控制函数;

S55：判断是否所有节点都访问完毕，如果没有访问完毕，则返回步骤S52；如果访问完毕，则在画布中绘制所述公式。

6.如权利要求5所述的基于HTML5 canvas的数学公式显示方法，其特征在于，在画布中绘制所述公式时，在每个字符或符号绘制完成后将绘制的起始位置移至所述字符或符号之后。

7.如权利要求6所述的基于HTML5 canvas的数学公式显示方法，其特征在于，在绘制字符或符号时，先记录绘制的坐标位置，然后编写绘制字符或符号函数，编写完成后，先将绘制的起点坐标复位至之前保存的坐标位置，然后添加transform（参数1，参数2，···,参数6）方法，将此刻的坐标位置平移到字符或符号之后，所述参数1，参数2，···,参数6这6个参数两两为一组，分别控制着缩放、移动和选择。

8.一种数学公式显示系统，其特征在于，包括包括画布创建模块、数学公式库建立模块、公式处理模块和MathML数学公式模块；

所述画布创建模块用于创建画布，为数学公式的显示提供平台；

所述数学公式库建立模块用于建立数学公式结构控制函数库和数学字符和符号函数库；

所述MathML数学公式模块用于接收用户的输入信息形成数学公式；

所述公式处理模块与MathML数学公式模块相连，所述公式处理模块包括解析器和结构内容控制器，用于接收MathML数学公式模块创建的数学公式并进行解析，以及进行数学公式结构和内容控制，并利用画布进行显示。

Images