跨平台的公式编辑与渲染方法及系统与流程

本发明涉及信息化技术软件开发领域，具体说的是跨平台的公式编辑与渲染方法及系统。

背景技术：

目前的信息化技术应用于课堂教学过程的方案较少，而专门针对课堂教学中的公式编辑的解决方案就更少。现有技术中大多采用SVG技术或者图片来进行显示公式，这些方式都不能够直接在公式上直接进行快速灵活的编辑，且SVG技术不是所有平台都支持，而采用图片的方法虽然不分平台，但其传输的网络量大，性能上有较大的缺陷。

申请公布号为CN 103425773A的专利文件，涉及一种利用原生Html在网页中快速显示数学公式的方法，具体包括、把给定的Latex公式字符串，利用转换方法解析成符合W3C标准的Html代码，此标准下的Html能在任何浏览器下运行；2、当用户打开包含上述公式Html的网页后再利用Javascript、Css样式动态调整Html的布局、定位、宽高，最终把数学公式还原并显示到页面上。

上述方案只是对公式进行渲染，而无法实现对公式的快速编辑并实时渲染；同时，上述方案是对公式一整串进行输入渲染和输出转换，无法实现对公式串的分割，从而实现局部编辑。

技术实现要素：

本发明所要解决的技术问题是：提供跨平台的公式编辑与渲染方法及系统，实现对公式的快速编辑和实时渲染。

为了解决上述技术问题，本发明采用的技术方案为：

跨平台的公式编辑与渲染方法，包括：

构造输入框，以及一对应所述输入框的虚拟键盘，并在虚拟键盘上配置各种公式符号，一公式符号对应一控件，各控件对应设置有一渲染和解析方法；

一旦接收输入到所述输入框内的一公式符号，便依据所述一公式符号对应的控件设置的渲染和解析方式对所述一公式符号进行渲染和解析；

将完成渲染和解析后的所述一公式符号与在先已完成渲染和解析的公式符号合并后输出。

本发明提供的另一个技术方案为：

跨平台的公式编辑与渲染系统，包括：

构造模块，用于构造输入框，以及一对应所述输入框的虚拟键盘，并在虚拟键盘上配置各种公式符号，一公式符号对应一控件，各控件对应设置有一渲染和解析方法；

渲染解析模块，用于一旦接收输入到所述输入框内的一公式符号，便依据所述一公式符号对应的控件设置的渲染和解析方式对所述一公式符号进行渲染和解析；

合并输出模块，将完成渲染和解析后的所述一公式符号与在先已完成渲染和解析的公式符号合并后输出。

本发明的有益效果在于：区别于现有技术无法实现直接在公式上进行快速灵活便捷，且无法实现跨平台运用等不足。本发明基于纯JavaScript实现，可实现跨平台移植，且同时具有易学易用的特点；同时，本发明通过配置特定的虚拟键盘，以公式符号为按键单位，实现对公式的快速、灵活地编辑；进一步的，各公式符号对应一设置有对应渲染解析方式的控件，当输入框接收到一公式符号时，便实时对其进行渲染和解析，从而实现对公式的实时渲染输出功能。

附图说明

图1为本发明跨平台的公式编辑与渲染方法的流程示意图；

图2为本发明跨平台的公式编辑与渲染系统的功能模块结构组成示意图；

图3为本发明实施例二的分式公式编辑界面效果示意图。

标号说明：

1、构造模块；2、渲染解析模块；3、合并输出模块。

具体实施方式

为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图予以说明。

本发明最关键的构思在于：配置以公式符号为按键的虚拟键盘，实现灵活编辑；各公式符号对应一设置有对应渲染解析方式的控件，当输入框接收到一公式符号时，便实时对其进行渲染和解析。

本发明涉及的技术术语解释:

请参照图1，本发明提供跨平台的公式编辑与渲染方法，包括：

构造输入框，以及一对应所述输入框的虚拟键盘，并在虚拟键盘上配置各种公式符号，一公式符号对应一控件，各控件对应设置有一渲染和解析方法；

一旦接收输入到所述输入框内的一公式符号，便依据所述一公式符号对应的控件设置的渲染和解析方式对所述一公式符号进行渲染和解析；

将完成渲染和解析后的所述一公式符号与在先已完成渲染和解析的公式符号合并后输出。

进一步的，所述构造输入框，具体为：

构造输入框，同时设置包括所述输入框的文本接口、输出输入框文本接口和输入框焦点获得与失去回调接口。

由上述描述可知，通过对应输入框设置各类接口，实现虚拟键盘对应输入框的公式输入。

进一步的，所述构造输入框，具体为：

构造一包括三个子输入框和一分数线的分式父输入框，三个子输入框分别位于分数线的左、上、下位置。

由上述描述可知，针对分式公式构造特定的输入框，实现分式公式的快速且准确地编辑。

进一步的，所述将完成渲染和解析后的所述一公式符号与在先已完成渲染和解析的公式符号合并后输出，具体为：

将完成渲染和解析后的所述一公式符号与在先已完成渲染和解析的公式符号合并形成一Latex文本后输出。

由上述描述可知，输入输出采用Latex格式，可适配多种公式库，组件使用场景多样化。

进一步的，所述构造输入框，以及一对应所述输入框的虚拟键盘，具体为：

使用HTML+CSS语言构造输入框，以及以对应所述输入框的虚拟键盘。

由上述描述可知，本发明基于纯JavaScript实现，可实现跨平台移植；同时，采用JavaScript为主要开发语言具有易学易用的特点。

本发明提供的另一个技术方案为：

请参阅图2，跨平台的公式编辑与渲染系统，包括：

构造模块，用于构造输入框，以及一对应所述输入框的虚拟键盘，并在虚拟键盘上配置各种公式符号，一公式符号对应一控件，各控件对应设置有一渲染和解析方法；

渲染解析模块，用于一旦接收输入到所述输入框内的一公式符号，便依据所述一公式符号对应的控件设置的渲染和解析方式对所述一公式符号进行渲染和解析；

合并输出模块，将完成渲染和解析后的所述一公式符号与在先已完成渲染和解析的公式符号合并后输出。

进一步的，所述构造模块，具体用于构造输入框，同时设置包括所述输入框的文本接口、输出输入框文本接口和输入框焦点获得与失去回调接口。

进一步的，所述构造模块，具体用于构造一包括三个子输入框和一分数线的分式父输入框，三个子输入框分别位于分数线的左、上、下位置。

进一步的，所述渲染解析模块，具体用于将完成渲染和解析后的所述一公式符号与在先已完成渲染和解析的公式符号合并形成一Latex文本后输出。

进一步的，所述构造模块，具体用于使用HTML+CSS语言构造输入框，以及以对应所述输入框的虚拟键盘。

实施例一

请参照图1，本实施例提供一种跨平台的公式编辑与渲染方法，能够很好的满足如课堂教学过程等情况下快速、灵活地进行公式编辑的需求。

具体方法可以包括：

S1：构造输入框，以及一对应所述输入框的虚拟键盘，并在虚拟键盘上配置各种公式符号，一公式符号对应一控件，各控件对应设置有一渲染和解析方法。

优选的，使用HTML+CSS语言模拟输入框和虚拟键盘。具体的，输入框由一个<div>标签与CSS样式构造，同时提供用于标示输入位置的光标和各种输入框常用接口，包括设置输入框文本接口，输出输入框文本接口，输入框焦点获得与失去回调接口，光标位置设置接口等。

通过在虚拟键盘上配置各种用于快速输入的公式符号，优选一个公式符号对应一个按键。通过将公式分割化，实现快速、灵活的编辑公式。同时，每个公式符号作为一个控件，每个控件控制自身的渲染和解析方法。

S2：一旦接收输入到所述输入框内的一公式符号，便依据所述一公式符号对应的控件设置的渲染和解析方式对所述一公式符号进行渲染和解析。

通过上述步骤，在输入框获取到一个公式符号后，便依据其对应的渲染和解析方式对公式符号进行渲染，从而实现实时渲染。

S3：将完成渲染和解析后的所述一公式符号与在先已完成渲染和解析的公式符号合并后输出。

优选的，当完成一个公式符号的渲染和解析后，将其与在先输入的已渲染和解析的公式符号合并后输出，实时显示所编辑的公式。公式编辑完毕后，由渲染到输入框的所有控件遍历解析为一个完整公式Latex文本输出。

本实施例基于纯JavaScript开发语言实现，可实现跨平台移植，同时具有易学易用的特点；同时将公式拆分为各个公式符号进行输入，能够实现快速、灵活的公式编辑；进一步的，以公式符号为单位配置各自对应的渲染和解析控件，能在获取到一公式符号后便对其进行渲染和解析，从而实现对所编辑的公式的实时渲染。

实施例二

本实施例在实施例一的基础上，对其进一步的延伸，以一分式公式的编辑与渲染为例进行说明。与实施例一的相同之处不再复述，具体的，还可以包括以下：

通过继承基础的CharView类，重写渲染方法和解析方法，在分式类的渲染方法中，使用HTML的<div>构造三个特殊子输入框，使用CSS设置三个子输入框位于左、上、下三个位置，上下两个特殊输入框中间设置有一分数线，由此构造出一个待输入的完整的分式视图，渲染到父输入框中。

在分式类的解析方法中，通过分别解析三个子特殊输入框中的值，最后形成“左输入框的值\frac{上输入框的值}{下输入框的值}”的Latex文本作为输出。

所有输入的公式符号的渲染方法和解析方法都由自身组织(参见实施例一的实时渲染方法)，最后再一起合并，解析和渲染是在每次进行输入操作时都会进行执行，通过光标的移动，可实现快速输入和输入后的实时渲染，界面显示效果如图3所示。

实施例三

本实施例对应实施例一和实施例二提供一具体运用场景。

开发一教育产品，可提供公式编辑功能。具体的，可以实现在PC或者PAD上的页面上以填空方式快速的进行公式编辑。

当涉及到数学学科的公式填空时，使用实施例一和实施例二提供的输入框和虚拟键盘替换现有普通的输入框和键盘输入。具体实现方式如下：

输入框在网页渲染之后通过调用register接口将需要作为公式输入框的<div>注册到本组件中之后本组件会在该<div>上绑定事件，包括点击打开虚拟键盘事件，焦点失去和获得事件等。之后用户则可在通过键盘打开并输入提供的公式符号来编辑公式。同时，还可以使用了本方案的getText接口获取用户最后编辑完成的公式形成的Latex文本，并与答案比对，最后使用setText文本将正确答案显示到输入框。

实施例四

请参阅图2，本实施例对应实施例一和实施例二提供一种跨平台的公式编辑与渲染系统，具体包括：

构造模块1，用于构造输入框，以及一对应所述输入框的虚拟键盘，并在虚拟键盘上配置各种公式符号，一公式符号对应一控件，各控件对应设置有一渲染和解析方法。

优选的，所述构造模块具体用于构造输入框，同时设置包括所述输入框的文本接口、输出输入框文本接口和输入框焦点获得与失去回调接口。

在一具体实施例中，所述构造模块具体用于构造一包括三个子输入框和一分数线的分式父输入框，三个子输入框分别位于分数线的左、上、下位置。

在一具体实施例中，所述渲染解析模块，还可以用于将完成渲染和解析后的所述一公式符号与在先已完成渲染和解析的公式符号合并形成一Latex文本后输出。

在一具体实施例中，所述构造模块，具体用于使用HTML+CSS语言构造输入框，以及以对应所述输入框的虚拟键盘。

还包括：

渲染解析模块2，用于一旦接收输入到所述输入框内的一公式符号，便依据所述一公式符号对应的控件设置的渲染和解析方式对所述一公式符号进行渲染和解析；

合并输出模块3，将完成渲染和解析后的所述一公式符号与在先已完成渲染和解析的公式符号合并后输出。

综上所述，本发明提供的跨平台的公式编辑与渲染方法及系统，不仅具有跨平台能力，可以支持各种平台(Windows，Android等)；而且配置有轻量和标准化接口，无繁杂依赖；进一步的，公式与符号渲染质量较高，与教科书保持一致，有效提高教学质量；再进一步的，输入输出采用Latex格式，可适配多种公式库，组件使用场景多样化。

以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。