CN106648635B - 跨平台的公式编辑与渲染方法及*** - Google Patents

跨平台的公式编辑与渲染方法及*** Download PDF

Info

Publication number
CN106648635B
CN106648635B CN201611120410.5A CN201611120410A CN106648635B CN 106648635 B CN106648635 B CN 106648635B CN 201611120410 A CN201611120410 A CN 201611120410A CN 106648635 B CN106648635 B CN 106648635B
Authority
CN
China
Prior art keywords
formula
rendering
input box
symbol
input
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201611120410.5A
Other languages
English (en)
Other versions
CN106648635A (zh
Inventor
刘德建
林锦波
欧宁
钟良德
郭玉湖
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Fujian Tianquan Educational Technology Ltd
Original Assignee
Fujian Tianquan Educational Technology Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Fujian Tianquan Educational Technology Ltd filed Critical Fujian Tianquan Educational Technology Ltd
Priority to CN201611120410.5A priority Critical patent/CN106648635B/zh
Publication of CN106648635A publication Critical patent/CN106648635A/zh
Application granted granted Critical
Publication of CN106648635B publication Critical patent/CN106648635B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/33—Intelligent editors

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Document Processing Apparatus (AREA)

Abstract

本发明提供跨平台的公式编辑与渲染方法及***，方法包括：构造输入框，以及一对应输入框的虚拟键盘，并在虚拟键盘上配置各种公式符号，一公式符号对应一控件，各控件对应设置有一渲染和解析方法；一旦接收输入到输入框内的一公式符号，便依据公式符号对应的控件设置的渲染和解析方式对该公式符号进行渲染和解析；将完成渲染和解析后的该公式符号与在先已完成渲染和解析的公式符号合并后输出。本发明不仅具有跨平台能力，可以支持各种平台；而且配置有轻量和标准化接口，无繁杂依赖；进一步的，公式与符号渲染质量较高，与教科书保持一致，有效提高教学质量；再进一步的，输入输出采用Latex格式，可适配多种公式库，组件使用场景多样化。

Description

跨平台的公式编辑与渲染方法及***
技术领域
本发明涉及信息化技术软件开发领域，具体说的是跨平台的公式编辑与渲染方法及***。
背景技术
目前的信息化技术应用于课堂教学过程的方案较少，而专门针对课堂教学中的公式编辑的解决方案就更少。现有技术中大多采用SVG技术或者图片来进行显示公式，这些方式都不能够直接在公式上直接进行快速灵活的编辑，且SVG技术不是所有平台都支持，而采用图片的方法虽然不分平台，但其传输的网络量大，性能上有较大的缺陷。
申请公布号为CN 103425773A的专利文件，涉及一种利用原生Html在网页中快速显示数学公式的方法，具体包括、把给定的Latex公式字符串，利用转换方法解析成符合W3C标准的Html代码，此标准下的Html能在任何浏览器下运行；2、当用户打开包含上述公式Html的网页后再利用Javascript、Css样式动态调整Html的布局、定位、宽高，最终把数学公式还原并显示到页面上。
上述方案只是对公式进行渲染，而无法实现对公式的快速编辑并实时渲染；同时，上述方案是对公式一整串进行输入渲染和输出转换，无法实现对公式串的分割，从而实现局部编辑。
发明内容
本发明所要解决的技术问题是：提供跨平台的公式编辑与渲染方法及***，实现对公式的快速编辑和实时渲染。
为了解决上述技术问题，本发明采用的技术方案为：
跨平台的公式编辑与渲染方法，包括：
构造输入框，以及一对应所述输入框的虚拟键盘，并在虚拟键盘上配置各种公式符号，一公式符号对应一控件，各控件对应设置有一渲染和解析方法；
一旦接收输入到所述输入框内的一公式符号，便依据所述一公式符号对应的控件设置的渲染和解析方式对所述一公式符号进行渲染和解析；
将完成渲染和解析后的所述一公式符号与在先已完成渲染和解析的公式符号合并后输出。
本发明提供的另一个技术方案为：
跨平台的公式编辑与渲染***，包括：
构造模块，用于构造输入框，以及一对应所述输入框的虚拟键盘，并在虚拟键盘上配置各种公式符号，一公式符号对应一控件，各控件对应设置有一渲染和解析方法；
渲染解析模块，用于一旦接收输入到所述输入框内的一公式符号，便依据所述一公式符号对应的控件设置的渲染和解析方式对所述一公式符号进行渲染和解析；
合并输出模块，将完成渲染和解析后的所述一公式符号与在先已完成渲染和解析的公式符号合并后输出。
本发明的有益效果在于：区别于现有技术无法实现直接在公式上进行快速灵活便捷，且无法实现跨平台运用等不足。本发明基于纯JavaScript实现，可实现跨平台移植，且同时具有易学易用的特点；同时，本发明通过配置特定的虚拟键盘，以公式符号为按键单位，实现对公式的快速、灵活地编辑；进一步的，各公式符号对应一设置有对应渲染解析方式的控件，当输入框接收到一公式符号时，便实时对其进行渲染和解析，从而实现对公式的实时渲染输出功能。
附图说明
图1为本发明跨平台的公式编辑与渲染方法的流程示意图；
图2为本发明跨平台的公式编辑与渲染***的功能模块结构组成示意图；
图3为本发明实施例二的分式公式编辑界面效果示意图。
标号说明：
1、构造模块；2、渲染解析模块；3、合并输出模块。
具体实施方式
为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图予以说明。
本发明最关键的构思在于：配置以公式符号为按键的虚拟键盘，实现灵活编辑；各公式符号对应一设置有对应渲染解析方式的控件，当输入框接收到一公式符号时，便实时对其进行渲染和解析。
本发明涉及的技术术语解释:
Figure BDA0001174177440000031
请参照图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格式，可适配多种公式库，组件使用场景多样化。
以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (10)

1.跨平台的公式编辑与渲染方法，其特征在于，包括：
构造输入框，以及一对应所述输入框的虚拟键盘，并在虚拟键盘上配置各种公式符号，一公式符号对应一按键，一公式符号对应一控件，一控件对应设置有一渲染方法和一解析方法；
一旦接收输入到所述输入框内的一公式符号，便依据所述一公式符号对应的控件设置的渲染方法和解析方法对所述一公式符号进行渲染和解析；
将完成渲染和解析后的所述一公式符号与在先已完成渲染和解析的公式符号合并后输出。
2.如权利要求1所述的跨平台的公式编辑与渲染方法，其特征在于，所述构造输入框，具体为：
构造输入框，同时设置包括所述输入框的文本接口、输出输入框文本接口和输入框焦点获得与失去回调接口。
3.如权利要求1所述的跨平台的公式编辑与渲染方法，其特征在于，所述构造输入框，具体为：
构造一分式父输入框，所述分式父输入框包括三个子输入框和一分数线，三个子输入框分别位于分数线的左、上、下位置。
4.如权利要求1或3所述的跨平台的公式编辑与渲染方法，其特征在于，所述将完成渲染和解析后的所述一公式符号与在先已完成渲染和解析的公式符号合并后输出，具体为：
将完成渲染和解析后的所述一公式符号与在先已完成渲染和解析的公式符号合并形成一Latex文本后输出。
5.如权利要求1所述的跨平台的公式编辑与渲染方法，其特征在于，所述构造输入框，以及一对应所述输入框的虚拟键盘，具体为：
使用HTML+CSS语言构造输入框，以及一对应所述输入框的虚拟键盘。
6.跨平台的公式编辑与渲染***，其特征在于，包括：
构造模块，用于构造输入框，以及一对应所述输入框的虚拟键盘，并在虚拟键盘上配置各种公式符号，一公式符号对应一按键，一公式符号对应一控件，一控件对应设置有一渲染方法和一解析方法；
渲染解析模块，用于一旦接收输入到所述输入框内的一公式符号，便依据所述一公式符号对应的控件设置的渲染方法和解析方法对所述一公式符号进行渲染和解析；
合并输出模块，将完成渲染和解析后的所述一公式符号与在先已完成渲染和解析的公式符号合并后输出。
7.如权利要求6所述的跨平台的公式编辑与渲染***，其特征在于，所述构造模块，具体用于构造输入框，同时设置包括所述输入框的文本接口、输出输入框文本接口和输入框焦点获得与失去回调接口。
8.如权利要求6所述的跨平台的公式编辑与渲染***，其特征在于，所述构造模块，具体用于构造一分式父输入框，所述分式父输入框包括三个子输入框和一分数线，三个子输入框分别位于分数线的左、上、下位置。
9.如权利要求6或8所述的跨平台的公式编辑与渲染***，其特征在于，所述渲染解析模块，具体用于将完成渲染和解析后的所述一公式符号与在先已完成渲染和解析的公式符号合并形成一Latex文本后输出。
10.如权利要求6所述的跨平台的公式编辑与渲染***，其特征在于，所述构造模块，具体用于使用HTML+CSS语言构造输入框，以及一对应所述输入框的虚拟键盘。
CN201611120410.5A 2016-12-08 2016-12-08 跨平台的公式编辑与渲染方法及*** Active CN106648635B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201611120410.5A CN106648635B (zh) 2016-12-08 2016-12-08 跨平台的公式编辑与渲染方法及***

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201611120410.5A CN106648635B (zh) 2016-12-08 2016-12-08 跨平台的公式编辑与渲染方法及***

Publications (2)

Publication Number Publication Date
CN106648635A CN106648635A (zh) 2017-05-10
CN106648635B true CN106648635B (zh) 2020-01-03

Family

ID=58819940

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201611120410.5A Active CN106648635B (zh) 2016-12-08 2016-12-08 跨平台的公式编辑与渲染方法及***

Country Status (1)

Country Link
CN (1) CN106648635B (zh)

Families Citing this family (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107832270A (zh) * 2017-10-17 2018-03-23 金炜 基于LaTeX的公式编辑方法和公式编辑器
CN110007918A (zh) * 2019-04-03 2019-07-12 上海乂学教育科技有限公司 自适应教育***中个性化公式编辑器的制造方法
CN111104116A (zh) * 2019-12-13 2020-05-05 紫光云(南京)数字技术有限公司 一种基于配置动态生成操作界面的方法
CN111309302B (zh) * 2020-02-06 2023-04-18 杭州电子科技大学 一种基于LaTeX的四则运算与三角函数混合运算公式转换Verilog代码的方法
CN112836469A (zh) * 2021-01-27 2021-05-25 北京百家科技集团有限公司 一种信息渲染方法及装置
CN113703587A (zh) * 2021-08-30 2021-11-26 陕西万唯教育传媒有限公司 一种输入键盘的使用方法、***及计算机存储介质
CN115794043B (zh) * 2023-01-31 2023-06-09 帆软软件有限公司帆软南京分公司 Bi工具的表数据聚合处理的计算***及计算方法

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102103588A (zh) * 2009-12-18 2011-06-22 北大方正集团有限公司 一种通过公式输入法输入公式编辑命令的方法和***
CN103176954A (zh) * 2013-03-27 2013-06-26 重庆市科学技术研究院 一种基于HTML5 canvas的数学公式显示方法及***
CN103324605A (zh) * 2013-06-25 2013-09-25 北京网梯科技发展有限公司 一种多用户协同编辑的方法、设备及***

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2004072808A2 (en) * 2003-02-10 2004-08-26 Educational Testing Service Equation editor

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102103588A (zh) * 2009-12-18 2011-06-22 北大方正集团有限公司 一种通过公式输入法输入公式编辑命令的方法和***
CN103176954A (zh) * 2013-03-27 2013-06-26 重庆市科学技术研究院 一种基于HTML5 canvas的数学公式显示方法及***
CN103324605A (zh) * 2013-06-25 2013-09-25 北京网梯科技发展有限公司 一种多用户协同编辑的方法、设备及***

Also Published As

Publication number Publication date
CN106648635A (zh) 2017-05-10

Similar Documents

Publication Publication Date Title
CN106648635B (zh) 跨平台的公式编辑与渲染方法及***
US9142192B2 (en) Simulation of web applications and secondary devices in a web browser, web application development tools, and methods using the same
US8819624B2 (en) Simulation of web applications and secondary devices in a web browser, web application development tools, and methods using the same
CN107807913A (zh) 一种基于web的电子表单设计***及方法
US20150206444A1 (en) System and method for authoring animated content for web viewable textbook data object
Da Rocha Learn Chart. js: Create interactive visualizations for the web with chart. js 2
US9910554B2 (en) Assisting graphical user interface design
WO2011060682A1 (zh) 一种基于web的数学公式编辑***及方法
US9817811B2 (en) Web server system, dictionary system, dictionary call method, screen control display method, and demonstration application generation method
US20140215306A1 (en) In-Context Editing of Output Presentations via Automatic Pattern Detection
CN112083920A (zh) 一种前端页面设计方法、装置、存储介质及设备
Gasston The modern Web: multi-device Web development with HTML5, CSS3, and JavaScript
US20230119466A1 (en) Code block element for integrated graphic design system
Kuan Learning Highcharts
Gerbing Enhancement of the command-line environment for use in the introductory statistics course and beyond
CN111367514B (zh) 页面卡片的开发方法和装置、计算设备和存储介质
Kuan Learning highcharts 4
Rahman Jump Start Bootstrap: Get Up to Speed with Bootstrap in a Weekend
Ebner et al. Cloud-based service for eBooks using EPUB under the Aspect of Learning Analytics
KR101851720B1 (ko) 영어 학습 서비스 제공 방법
CN115309476A (zh) 一种基于浏览器的ofd文件显示和编辑方法
CN114356291A (zh) 基于配置文件生成表单的方法、装置、设备及介质
US20130086491A1 (en) Automatically generating a business process flow gui using a symbolic annotation language
Su et al. MathEdit, a browser-based visual mathematics expression editor
KR100952197B1 (ko) 수식 편집기 및 수식 편집 방법

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant