本發(fā)明涉及信息化技術(shù)軟件開發(fā)領(lǐng)域，具體說的是跨平臺(tái)的公式編輯與渲染方法及系統(tǒng)。

背景技術(shù)：

目前的信息化技術(shù)應(yīng)用于課堂教學(xué)過程的方案較少，而專門針對課堂教學(xué)中的公式編輯的解決方案就更少?，F(xiàn)有技術(shù)中大多采用SVG技術(shù)或者圖片來進(jìn)行顯示公式，這些方式都不能夠直接在公式上直接進(jìn)行快速靈活的編輯，且SVG技術(shù)不是所有平臺(tái)都支持，而采用圖片的方法雖然不分平臺(tái)，但其傳輸?shù)木W(wǎng)絡(luò)量大，性能上有較大的缺陷。

申請公布號(hào)為CN 103425773A的專利文件，涉及一種利用原生Html在網(wǎng)頁中快速顯示數(shù)學(xué)公式的方法，具體包括、把給定的Latex公式字符串，利用轉(zhuǎn)換方法解析成符合W3C標(biāo)準(zhǔn)的Html代碼，此標(biāo)準(zhǔn)下的Html能在任何瀏覽器下運(yùn)行；2、當(dāng)用戶打開包含上述公式Html的網(wǎng)頁后再利用Javascript、Css樣式動(dòng)態(tài)調(diào)整Html的布局、定位、寬高，最終把數(shù)學(xué)公式還原并顯示到頁面上。

上述方案只是對公式進(jìn)行渲染，而無法實(shí)現(xiàn)對公式的快速編輯并實(shí)時(shí)渲染；同時(shí)，上述方案是對公式一整串進(jìn)行輸入渲染和輸出轉(zhuǎn)換，無法實(shí)現(xiàn)對公式串的分割，從而實(shí)現(xiàn)局部編輯。

技術(shù)實(shí)現(xiàn)要素：

本發(fā)明所要解決的技術(shù)問題是：提供跨平臺(tái)的公式編輯與渲染方法及系統(tǒng)，實(shí)現(xiàn)對公式的快速編輯和實(shí)時(shí)渲染。

為了解決上述技術(shù)問題，本發(fā)明采用的技術(shù)方案為：

跨平臺(tái)的公式編輯與渲染方法，包括：

構(gòu)造輸入框，以及一對應(yīng)所述輸入框的虛擬鍵盤，并在虛擬鍵盤上配置各種公式符號(hào)，一公式符號(hào)對應(yīng)一控件，各控件對應(yīng)設(shè)置有一渲染和解析方法；

一旦接收輸入到所述輸入框內(nèi)的一公式符號(hào)，便依據(jù)所述一公式符號(hào)對應(yīng)的控件設(shè)置的渲染和解析方式對所述一公式符號(hào)進(jìn)行渲染和解析；

將完成渲染和解析后的所述一公式符號(hào)與在先已完成渲染和解析的公式符號(hào)合并后輸出。

本發(fā)明提供的另一個(gè)技術(shù)方案為：

跨平臺(tái)的公式編輯與渲染系統(tǒng)，包括：

構(gòu)造模塊，用于構(gòu)造輸入框，以及一對應(yīng)所述輸入框的虛擬鍵盤，并在虛擬鍵盤上配置各種公式符號(hào)，一公式符號(hào)對應(yīng)一控件，各控件對應(yīng)設(shè)置有一渲染和解析方法；

渲染解析模塊，用于一旦接收輸入到所述輸入框內(nèi)的一公式符號(hào)，便依據(jù)所述一公式符號(hào)對應(yīng)的控件設(shè)置的渲染和解析方式對所述一公式符號(hào)進(jìn)行渲染和解析；

合并輸出模塊，將完成渲染和解析后的所述一公式符號(hào)與在先已完成渲染和解析的公式符號(hào)合并后輸出。

本發(fā)明的有益效果在于：區(qū)別于現(xiàn)有技術(shù)無法實(shí)現(xiàn)直接在公式上進(jìn)行快速靈活便捷，且無法實(shí)現(xiàn)跨平臺(tái)運(yùn)用等不足。本發(fā)明基于純JavaScript實(shí)現(xiàn)，可實(shí)現(xiàn)跨平臺(tái)移植，且同時(shí)具有易學(xué)易用的特點(diǎn)；同時(shí)，本發(fā)明通過配置特定的虛擬鍵盤，以公式符號(hào)為按鍵單位，實(shí)現(xiàn)對公式的快速、靈活地編輯；進(jìn)一步的，各公式符號(hào)對應(yīng)一設(shè)置有對應(yīng)渲染解析方式的控件，當(dāng)輸入框接收到一公式符號(hào)時(shí)，便實(shí)時(shí)對其進(jìn)行渲染和解析，從而實(shí)現(xiàn)對公式的實(shí)時(shí)渲染輸出功能。

附圖說明

圖1為本發(fā)明跨平臺(tái)的公式編輯與渲染方法的流程示意圖；

圖2為本發(fā)明跨平臺(tái)的公式編輯與渲染系統(tǒng)的功能模塊結(jié)構(gòu)組成示意圖；

圖3為本發(fā)明實(shí)施例二的分式公式編輯界面效果示意圖。

標(biāo)號(hào)說明：

1、構(gòu)造模塊；2、渲染解析模塊；3、合并輸出模塊。

具體實(shí)施方式

為詳細(xì)說明本發(fā)明的技術(shù)內(nèi)容、所實(shí)現(xiàn)目的及效果，以下結(jié)合實(shí)施方式并配合附圖予以說明。

本發(fā)明最關(guān)鍵的構(gòu)思在于：配置以公式符號(hào)為按鍵的虛擬鍵盤，實(shí)現(xiàn)靈活編輯；各公式符號(hào)對應(yīng)一設(shè)置有對應(yīng)渲染解析方式的控件，當(dāng)輸入框接收到一公式符號(hào)時(shí)，便實(shí)時(shí)對其進(jìn)行渲染和解析。

本發(fā)明涉及的技術(shù)術(shù)語解釋:

請參照圖1，本發(fā)明提供跨平臺(tái)的公式編輯與渲染方法，包括：

構(gòu)造輸入框，以及一對應(yīng)所述輸入框的虛擬鍵盤，并在虛擬鍵盤上配置各種公式符號(hào)，一公式符號(hào)對應(yīng)一控件，各控件對應(yīng)設(shè)置有一渲染和解析方法；

一旦接收輸入到所述輸入框內(nèi)的一公式符號(hào)，便依據(jù)所述一公式符號(hào)對應(yīng)的控件設(shè)置的渲染和解析方式對所述一公式符號(hào)進(jìn)行渲染和解析；

將完成渲染和解析后的所述一公式符號(hào)與在先已完成渲染和解析的公式符號(hào)合并后輸出。

進(jìn)一步的，所述構(gòu)造輸入框，具體為：

構(gòu)造輸入框，同時(shí)設(shè)置包括所述輸入框的文本接口、輸出輸入框文本接口和輸入框焦點(diǎn)獲得與失去回調(diào)接口。

由上述描述可知，通過對應(yīng)輸入框設(shè)置各類接口，實(shí)現(xiàn)虛擬鍵盤對應(yīng)輸入框的公式輸入。

進(jìn)一步的，所述構(gòu)造輸入框，具體為：

構(gòu)造一包括三個(gè)子輸入框和一分?jǐn)?shù)線的分式父輸入框，三個(gè)子輸入框分別位于分?jǐn)?shù)線的左、上、下位置。

由上述描述可知，針對分式公式構(gòu)造特定的輸入框，實(shí)現(xiàn)分式公式的快速且準(zhǔn)確地編輯。

進(jìn)一步的，所述將完成渲染和解析后的所述一公式符號(hào)與在先已完成渲染和解析的公式符號(hào)合并后輸出，具體為：

將完成渲染和解析后的所述一公式符號(hào)與在先已完成渲染和解析的公式符號(hào)合并形成一Latex文本后輸出。

由上述描述可知，輸入輸出采用Latex格式，可適配多種公式庫，組件使用場景多樣化。

進(jìn)一步的，所述構(gòu)造輸入框，以及一對應(yīng)所述輸入框的虛擬鍵盤，具體為：

使用HTML+CSS語言構(gòu)造輸入框，以及以對應(yīng)所述輸入框的虛擬鍵盤。

由上述描述可知，本發(fā)明基于純JavaScript實(shí)現(xiàn)，可實(shí)現(xiàn)跨平臺(tái)移植；同時(shí)，采用JavaScript為主要開發(fā)語言具有易學(xué)易用的特點(diǎn)。

本發(fā)明提供的另一個(gè)技術(shù)方案為：

請參閱圖2，跨平臺(tái)的公式編輯與渲染系統(tǒng)，包括：

構(gòu)造模塊，用于構(gòu)造輸入框，以及一對應(yīng)所述輸入框的虛擬鍵盤，并在虛擬鍵盤上配置各種公式符號(hào)，一公式符號(hào)對應(yīng)一控件，各控件對應(yīng)設(shè)置有一渲染和解析方法；

渲染解析模塊，用于一旦接收輸入到所述輸入框內(nèi)的一公式符號(hào)，便依據(jù)所述一公式符號(hào)對應(yīng)的控件設(shè)置的渲染和解析方式對所述一公式符號(hào)進(jìn)行渲染和解析；

合并輸出模塊，將完成渲染和解析后的所述一公式符號(hào)與在先已完成渲染和解析的公式符號(hào)合并后輸出。

進(jìn)一步的，所述構(gòu)造模塊，具體用于構(gòu)造輸入框，同時(shí)設(shè)置包括所述輸入框的文本接口、輸出輸入框文本接口和輸入框焦點(diǎn)獲得與失去回調(diào)接口。

進(jìn)一步的，所述構(gòu)造模塊，具體用于構(gòu)造一包括三個(gè)子輸入框和一分?jǐn)?shù)線的分式父輸入框，三個(gè)子輸入框分別位于分?jǐn)?shù)線的左、上、下位置。

進(jìn)一步的，所述渲染解析模塊，具體用于將完成渲染和解析后的所述一公式符號(hào)與在先已完成渲染和解析的公式符號(hào)合并形成一Latex文本后輸出。

進(jìn)一步的，所述構(gòu)造模塊，具體用于使用HTML+CSS語言構(gòu)造輸入框，以及以對應(yīng)所述輸入框的虛擬鍵盤。

實(shí)施例一

請參照圖1，本實(shí)施例提供一種跨平臺(tái)的公式編輯與渲染方法，能夠很好的滿足如課堂教學(xué)過程等情況下快速、靈活地進(jìn)行公式編輯的需求。

具體方法可以包括：

S1：構(gòu)造輸入框，以及一對應(yīng)所述輸入框的虛擬鍵盤，并在虛擬鍵盤上配置各種公式符號(hào)，一公式符號(hào)對應(yīng)一控件，各控件對應(yīng)設(shè)置有一渲染和解析方法。

優(yōu)選的，使用HTML+CSS語言模擬輸入框和虛擬鍵盤。具體的，輸入框由一個(gè)<div>標(biāo)簽與CSS樣式構(gòu)造，同時(shí)提供用于標(biāo)示輸入位置的光標(biāo)和各種輸入框常用接口，包括設(shè)置輸入框文本接口，輸出輸入框文本接口，輸入框焦點(diǎn)獲得與失去回調(diào)接口，光標(biāo)位置設(shè)置接口等。

通過在虛擬鍵盤上配置各種用于快速輸入的公式符號(hào)，優(yōu)選一個(gè)公式符號(hào)對應(yīng)一個(gè)按鍵。通過將公式分割化，實(shí)現(xiàn)快速、靈活的編輯公式。同時(shí)，每個(gè)公式符號(hào)作為一個(gè)控件，每個(gè)控件控制自身的渲染和解析方法。

S2：一旦接收輸入到所述輸入框內(nèi)的一公式符號(hào)，便依據(jù)所述一公式符號(hào)對應(yīng)的控件設(shè)置的渲染和解析方式對所述一公式符號(hào)進(jìn)行渲染和解析。

通過上述步驟，在輸入框獲取到一個(gè)公式符號(hào)后，便依據(jù)其對應(yīng)的渲染和解析方式對公式符號(hào)進(jìn)行渲染，從而實(shí)現(xiàn)實(shí)時(shí)渲染。

S3：將完成渲染和解析后的所述一公式符號(hào)與在先已完成渲染和解析的公式符號(hào)合并后輸出。

優(yōu)選的，當(dāng)完成一個(gè)公式符號(hào)的渲染和解析后，將其與在先輸入的已渲染和解析的公式符號(hào)合并后輸出，實(shí)時(shí)顯示所編輯的公式。公式編輯完畢后，由渲染到輸入框的所有控件遍歷解析為一個(gè)完整公式Latex文本輸出。

本實(shí)施例基于純JavaScript開發(fā)語言實(shí)現(xiàn)，可實(shí)現(xiàn)跨平臺(tái)移植，同時(shí)具有易學(xué)易用的特點(diǎn)；同時(shí)將公式拆分為各個(gè)公式符號(hào)進(jìn)行輸入，能夠?qū)崿F(xiàn)快速、靈活的公式編輯；進(jìn)一步的，以公式符號(hào)為單位配置各自對應(yīng)的渲染和解析控件，能在獲取到一公式符號(hào)后便對其進(jìn)行渲染和解析，從而實(shí)現(xiàn)對所編輯的公式的實(shí)時(shí)渲染。

實(shí)施例二

本實(shí)施例在實(shí)施例一的基礎(chǔ)上，對其進(jìn)一步的延伸，以一分式公式的編輯與渲染為例進(jìn)行說明。與實(shí)施例一的相同之處不再復(fù)述，具體的，還可以包括以下：

通過繼承基礎(chǔ)的CharView類，重寫渲染方法和解析方法，在分式類的渲染方法中，使用HTML的<div>構(gòu)造三個(gè)特殊子輸入框，使用CSS設(shè)置三個(gè)子輸入框位于左、上、下三個(gè)位置，上下兩個(gè)特殊輸入框中間設(shè)置有一分?jǐn)?shù)線，由此構(gòu)造出一個(gè)待輸入的完整的分式視圖，渲染到父輸入框中。

在分式類的解析方法中，通過分別解析三個(gè)子特殊輸入框中的值，最后形成“左輸入框的值\frac{上輸入框的值}{下輸入框的值}”的Latex文本作為輸出。

所有輸入的公式符號(hào)的渲染方法和解析方法都由自身組織(參見實(shí)施例一的實(shí)時(shí)渲染方法)，最后再一起合并，解析和渲染是在每次進(jìn)行輸入操作時(shí)都會(huì)進(jìn)行執(zhí)行，通過光標(biāo)的移動(dòng)，可實(shí)現(xiàn)快速輸入和輸入后的實(shí)時(shí)渲染，界面顯示效果如圖3所示。

實(shí)施例三

本實(shí)施例對應(yīng)實(shí)施例一和實(shí)施例二提供一具體運(yùn)用場景。

開發(fā)一教育產(chǎn)品，可提供公式編輯功能。具體的，可以實(shí)現(xiàn)在PC或者PAD上的頁面上以填空方式快速的進(jìn)行公式編輯。

當(dāng)涉及到數(shù)學(xué)學(xué)科的公式填空時(shí)，使用實(shí)施例一和實(shí)施例二提供的輸入框和虛擬鍵盤替換現(xiàn)有普通的輸入框和鍵盤輸入。具體實(shí)現(xiàn)方式如下：

輸入框在網(wǎng)頁渲染之后通過調(diào)用register接口將需要作為公式輸入框的<div>注冊到本組件中之后本組件會(huì)在該<div>上綁定事件，包括點(diǎn)擊打開虛擬鍵盤事件，焦點(diǎn)失去和獲得事件等。之后用戶則可在通過鍵盤打開并輸入提供的公式符號(hào)來編輯公式。同時(shí)，還可以使用了本方案的getText接口獲取用戶最后編輯完成的公式形成的Latex文本，并與答案比對，最后使用setText文本將正確答案顯示到輸入框。

實(shí)施例四

請參閱圖2，本實(shí)施例對應(yīng)實(shí)施例一和實(shí)施例二提供一種跨平臺(tái)的公式編輯與渲染系統(tǒng)，具體包括：

構(gòu)造模塊1，用于構(gòu)造輸入框，以及一對應(yīng)所述輸入框的虛擬鍵盤，并在虛擬鍵盤上配置各種公式符號(hào)，一公式符號(hào)對應(yīng)一控件，各控件對應(yīng)設(shè)置有一渲染和解析方法。

優(yōu)選的，所述構(gòu)造模塊具體用于構(gòu)造輸入框，同時(shí)設(shè)置包括所述輸入框的文本接口、輸出輸入框文本接口和輸入框焦點(diǎn)獲得與失去回調(diào)接口。

在一具體實(shí)施例中，所述構(gòu)造模塊具體用于構(gòu)造一包括三個(gè)子輸入框和一分?jǐn)?shù)線的分式父輸入框，三個(gè)子輸入框分別位于分?jǐn)?shù)線的左、上、下位置。

在一具體實(shí)施例中，所述渲染解析模塊，還可以用于將完成渲染和解析后的所述一公式符號(hào)與在先已完成渲染和解析的公式符號(hào)合并形成一Latex文本后輸出。

在一具體實(shí)施例中，所述構(gòu)造模塊，具體用于使用HTML+CSS語言構(gòu)造輸入框，以及以對應(yīng)所述輸入框的虛擬鍵盤。

還包括：

渲染解析模塊2，用于一旦接收輸入到所述輸入框內(nèi)的一公式符號(hào)，便依據(jù)所述一公式符號(hào)對應(yīng)的控件設(shè)置的渲染和解析方式對所述一公式符號(hào)進(jìn)行渲染和解析；

合并輸出模塊3，將完成渲染和解析后的所述一公式符號(hào)與在先已完成渲染和解析的公式符號(hào)合并后輸出。

綜上所述，本發(fā)明提供的跨平臺(tái)的公式編輯與渲染方法及系統(tǒng)，不僅具有跨平臺(tái)能力，可以支持各種平臺(tái)(Windows，Android等)；而且配置有輕量和標(biāo)準(zhǔn)化接口，無繁雜依賴；進(jìn)一步的，公式與符號(hào)渲染質(zhì)量較高，與教科書保持一致，有效提高教學(xué)質(zhì)量；再進(jìn)一步的，輸入輸出采用Latex格式，可適配多種公式庫，組件使用場景多樣化。

以上所述僅為本發(fā)明的實(shí)施例，并非因此限制本發(fā)明的專利范圍，凡是利用本發(fā)明說明書及附圖內(nèi)容所作的等同變換，或直接或間接運(yùn)用在相關(guān)的技術(shù)領(lǐng)域，均同理包括在本發(fā)明的專利保護(hù)范圍內(nèi)。