Web環(huán)境下支持觸屏的UML建模方法與裝置制造方法
【專利摘要】本發(fā)明實(shí)施例提供一種Web環(huán)境下支持觸屏的UML建模方法與裝置。所述建模工具在Web環(huán)境下支持多點(diǎn)觸控交互方式，包括表現(xiàn)層、交互處理層和存儲(chǔ)層；所述表現(xiàn)層包括建模視圖，所述建模視圖用于在Web環(huán)境下獲取用戶的建模操作；所述交互處理層用于識(shí)別獲取所述建模操作對(duì)應(yīng)的輸入方式；采用所述輸入方式，執(zhí)行對(duì)應(yīng)的所述建模操作，生成所述建模元素，并根據(jù)所述建模元素生成模型，所述輸入方式包括多點(diǎn)觸控輸入方式和手勢(shì)軌跡輸入方式；所述存儲(chǔ)層包括存儲(chǔ)模塊，所述存儲(chǔ)模塊用于存儲(chǔ)所述模型對(duì)應(yīng)的建模文件。本發(fā)明實(shí)施例利用建模工具在Web環(huán)境下支持多點(diǎn)觸控交互方式，解決了在不同的設(shè)備與平臺(tái)上，支持多點(diǎn)觸控的交互方式進(jìn)行建模。
【專利說明】Web環(huán)境下支持觸屏的UML建模方法與裝置

【技術(shù)領(lǐng)域】
[0001] 本發(fā)明涉及通信技術(shù)，尤其涉及一種Web環(huán)境下支持觸屏的UML建模方法與裝置。

【背景技術(shù)】
[0002]軟件建模需要使用統(tǒng)一建模語言（Unified Modeling Language，UML)，該UML是一 種繪制軟件藍(lán)圖的標(biāo)準(zhǔn)語言。可以用UML對(duì)軟件密集型系統(tǒng)的制品進(jìn)行可視化、詳述、構(gòu)造 和文檔化。但是該UML離不開相應(yīng)建模工具的支持。
[0003] 現(xiàn)有技術(shù)中的建模工具主要支持鼠標(biāo)與鍵盤的輸入方式，以及少數(shù)多點(diǎn)觸控輸入 方式，但采用鼠標(biāo)與鍵盤的輸入方式進(jìn)行建模會(huì)導(dǎo)致建模效率低，雖然，現(xiàn)有的建模工具支 持多點(diǎn)觸控輸入方式，但是能夠支持的多點(diǎn)觸控輸入方式非常有限，不能充分利用多點(diǎn)觸 控輸入方式建模效率高的特性。
[0004]另外，現(xiàn)有技術(shù)中的建模工具不支持跨平臺(tái)、跨設(shè)備的建模操作，軟件設(shè)計(jì)人員無 法將桌面應(yīng)用上的建模工作遷移到不同操作系統(tǒng)的移動(dòng)設(shè)備上。造成用戶在不同平臺(tái)、不 同設(shè)備上的使用困難，無法在不同平臺(tái)上統(tǒng)一管理模型。
[0005] 因此，現(xiàn)有技術(shù)中缺少在Web環(huán)境下支持多點(diǎn)觸控交互方式的建模工具。


【發(fā)明內(nèi)容】

[0006] 本發(fā)明提供一種Web環(huán)境下支持觸屏的UML建模方法與裝置，以實(shí)現(xiàn)在不同的設(shè) 備與平臺(tái)上，支持多點(diǎn)觸控的交互方式進(jìn)行建模。
[0007] 本發(fā)明的一個(gè)方面是提供一種Web環(huán)境下支持觸屏的UML建模工具，所述建模工 具在Web環(huán)境下支持多點(diǎn)觸控交互方式，包括 ：
[0008] 表現(xiàn)層，所述表現(xiàn)層包括建模視圖，所述建模視圖用于在Web環(huán)境下獲取用戶的 建模操作；
[0009] 交互處理層，所述交互處理層用于識(shí)別獲取所述建模操作對(duì)應(yīng)的輸入方式；采用 所述輸入方式，執(zhí)行對(duì)應(yīng)的所述建模操作，生成所述建模元素，并根據(jù)所述建模元素生成模 型，所述輸入方式包括多點(diǎn)觸控輸入方式和手勢(shì)軌跡輸入方式；
[0010] 存儲(chǔ)層，所述存儲(chǔ)層包括存儲(chǔ)模塊，所述存儲(chǔ)模塊用于存儲(chǔ)所述模型對(duì)應(yīng)的建模 文件。
[0011]本發(fā)明的另一個(gè)方面是提供一種Web環(huán)境下支持觸屏的UML建模方法，包括：
[0012] 建模工具在Web環(huán)境下支持多點(diǎn)觸控交互方式，獲取用戶的建模操作；
[0013] 所述建模工具識(shí)別獲取所述建模操作對(duì)應(yīng)的輸入方式，所述輸入方式包括多點(diǎn)觸 控輸入方式和手勢(shì)軌跡輸入方式；
[0014] 所述建模工具采用所述輸入方式，執(zhí)行對(duì)應(yīng)的所述建模操作，生成所述建模元素， 并根據(jù)所述建模元素生成模型，以實(shí)現(xiàn)在不同的設(shè)備與平臺(tái)上，支持多點(diǎn)觸控的交互方式 進(jìn)行建模。
[0015] 本發(fā)明提供的Web環(huán)境下支持觸屏的UML建模方法與裝置，利用建模工具在Web 環(huán)境下支持多點(diǎn)觸控交互方式，解決了在不同的設(shè)備與平臺(tái)上，支持多點(diǎn)觸控的交互方式 進(jìn)行建模。

【專利附圖】

【附圖說明】
[0016] 圖1為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模工具的完整結(jié)構(gòu)圖；
[0017] 圖2為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模工具中表現(xiàn)層的結(jié)構(gòu) 圖；
[0018] 圖3為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模工具中建模視圖的結(jié) 構(gòu)圖；
[0019] 圖4為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模工具中建模視圖圖層 的結(jié)構(gòu)圖；
[0020] 圖5為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模工具中交互處理層的 結(jié)構(gòu)圖；
[0021] 圖6為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模方法流程圖；
[0022] 圖7為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模方法適用的多點(diǎn)觸控 識(shí)別流程圖；
[0023] 圖8為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模方法適用的多點(diǎn)觸控 識(shí)別流程圖；
[0024] 圖9為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模方法適用的單筆畫軌 跡識(shí)別流程圖；
[0025] 圖10為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模方法適用的多筆畫 軌跡識(shí)別流程圖；
[0026] 圖11為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模工具中存儲(chǔ)層的結(jié) 構(gòu)圖；
[0027] 圖12a為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模工具支持的新增塊 狀元素的手勢(shì)示意圖；
[0028] 圖12b為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模工具支持的新增塊 狀元素的手勢(shì)示意圖；
[0029] 圖13a為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模工具支持的新增關(guān) 系的手勢(shì)示意圖；
[0030] 圖13b為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模工具支持的新增關(guān) 系的手勢(shì)示意圖；
[0031] 圖14a為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模工具支持的同時(shí)新 增塊狀與關(guān)系的手勢(shì)示意圖；
[0032] 圖14b為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模工具支持的同時(shí)新 增塊狀與關(guān)系的手勢(shì)示意圖；
[0033] 圖15為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模工具支持的修改塊 狀建模元素對(duì)象的手勢(shì)示意圖；
[0034] 圖16a為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模工具支持的修改關(guān) 系類型的手勢(shì)示意圖；
[0035] 圖16b為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模工具支持的修改關(guān) 系類型的手勢(shì)示意圖；
[0036] 圖16c為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模工具支持的修改關(guān) 系類型的手勢(shì)示意圖；
[0037] 圖16d為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模工具支持的修改關(guān) 系類型的手勢(shì)示意圖；
[0038] 圖16e為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模工具支持的修改關(guān) 系類型的手勢(shì)示意圖；
[0039] 圖17為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模工具支持的修改關(guān) 系屬性的手勢(shì)示意圖；
[0040] 圖18a為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模工具支持的刪除塊 狀建模元素對(duì)象的手勢(shì)示意圖；
[0041] 圖18b為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模工具支持的刪除塊 狀建模元素對(duì)象的手勢(shì)示意圖；
[0042] 圖19a為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模工具支持的刪除關(guān) 系元素的手勢(shì)示意圖；
[0043] 圖19b為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模工具支持的刪除關(guān) 系元素的手勢(shì)示意圖。

【具體實(shí)施方式】
[0044] 圖1為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模工具的完整結(jié)構(gòu)圖。 所述建模工具在Web環(huán)境下支持多點(diǎn)觸控交互方式，如圖1所示，本發(fā)明實(shí)施例提供的Web 環(huán)境下支持觸屏的UML建模工具60包括表現(xiàn)層61、交互處理層62和存儲(chǔ)層63 ;表現(xiàn)層61 包括建模視圖611，建模視圖611用于在Web環(huán)境下獲取用戶的建模操作；建模視圖611包 括模型圖形模塊611a，模型圖形模塊611a用于顯示所述建模元素以及模型；
[0045] 交互處理層62用于識(shí)別獲取所述建模操作對(duì)應(yīng)的輸入方式；采用所述輸入方式， 執(zhí)行對(duì)應(yīng)的所述建模操作，生成所述建模元素，并根據(jù)所述建模元素生成模型，所述輸入方 式包括多點(diǎn)觸控輸入方式和手勢(shì)軌跡輸入方式；
[0046]存儲(chǔ)層63包括存儲(chǔ)模塊631，存儲(chǔ)模塊631用于存儲(chǔ)所述模型對(duì)應(yīng)的建模文件。
[0047] 另外，建模視圖611還包括文本編輯模塊611b和軌跡捕獲模塊611c，文本編輯模 塊611b用于文本編輯，軌跡捕獲模塊611c用于捕獲所述手勢(shì)軌跡輸入方式。所述建模操 作包括新增建模元素、刪除建模元素、修改建模元素、移動(dòng)建模元素和文本編輯。
[0048] 交互處理層62包括多點(diǎn)觸控識(shí)別模塊621、軌跡識(shí)別模塊622和輸入事件工廠 623,多點(diǎn)觸控識(shí)別模塊621用于依據(jù)所述建模操作產(chǎn)生的觸控事件類型判斷所述輸入方 式為多點(diǎn)觸控輸入方式；軌跡識(shí)別模塊622用于依據(jù)所述建模操作產(chǎn)生的路徑的幾何形狀 判斷所述輸入方式為手勢(shì)軌跡輸入方式；輸入事件工廠623用相應(yīng)手勢(shì)所對(duì)應(yīng)的事件邏 輯，生成相應(yīng)的視圖與模型。
[0049] 存儲(chǔ)層63還包括轉(zhuǎn)換模塊632和輸出模塊633,轉(zhuǎn)換模塊632用于將所述建模文 件的格式轉(zhuǎn)換為目標(biāo)格式，輸出模塊633用于輸出所述目標(biāo)格式的所述建模文件，以使所 述建模工具與支持所述目標(biāo)格式的目標(biāo)工具實(shí)現(xiàn)文件交互。
[0050] 在本發(fā)明實(shí)施例中所述建模元素包括建模元素對(duì)象和建模元素關(guān)系。
[0051] 本發(fā)明實(shí)施例利用建模工具在Web環(huán)境下支持多點(diǎn)觸控交互方式，解決了在不同 的設(shè)備與平臺(tái)上，支持多點(diǎn)觸控的交互方式進(jìn)行建模。
[0052] 圖2為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模工具中表現(xiàn)層的結(jié) 構(gòu)圖。如圖2所示，Canvas元素是HTML5中用于繪制圖形的一種元素。在HTML頁面中以 〈canvas〉標(biāo)簽定義。但Canvas元素只是圖形容器，必須使用腳本來繪制圖形。通常通過 getContextO方法獲得一個(gè)用于在Canvas元素中繪圖的繪圖環(huán)境。Canvas元素與繪圖環(huán) 境是一對(duì)一的關(guān)系。本工具使用Canvas元素作為建模視圖。
[0053] 由于HTML5本身為Canvas元素繪圖環(huán)境提供的繪圖方法不足，繪制建模元素所 需的圖形大都需要以自定義路徑的形式實(shí)現(xiàn)，不利于后續(xù)的維護(hù)管理。因此，本工具使用 KineticJS圖形框架在Canvas元素的繪圖環(huán)境中繪制圖形。
[0054] KineticJS是一個(gè)提供在Canvas元素中繪制圖形的Canvas圖形框架。而 KineticJS本身是一個(gè)JavaScript腳本，用戶可以通過使用KineticJS腳本在Canvas的繪 圖環(huán)境中繪制圖形。
[0055] 經(jīng)由建模元素圖形的生成工廠在Canvas元素的繪圖環(huán)境中所生成的Canvas內(nèi)部 圖形包括用以表示建模元素對(duì)象的圖形、文字等。因此，本工具的建模元素對(duì)象是由Canvas 內(nèi)部圖形所組成。同時(shí)，Canvas內(nèi)部圖形也是作為觸屏輸入監(jiān)聽的監(jiān)聽對(duì)象。本發(fā)明實(shí)施 例基于KineticJS建立建模元素圖形的生成工廠。
[0056] 圖3為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模工具中建模視圖的結(jié) 構(gòu)圖。如圖3所示，Web頁面70包括建模視圖611、模型樹72和屬性編輯器73,建模視圖 611是除了展示模型之外，也是用戶新增、修改、刪除、移動(dòng)模型等操作的區(qū)域，支持用戶多 點(diǎn)觸控的手勢(shì)輸入。模型樹72、屬性編輯器73等信息的展示與修改，只支持基本的觸控操 作，并不支持多點(diǎn)觸控等操作。
[0057] 選擇以Web頁面的形式提供建模服務(wù)之后，選擇采用HTML5技術(shù)作為視圖。主 要原因是目前各大主流瀏覽器都支持HTML5,并且支持的程度越來越高。另一方面，目前 HTML5Canvas元素的繪圖技術(shù)已經(jīng)成熟，存在許多用于繪制Canvas圖形的JavaScript開源 框架。本發(fā)明實(shí)施例選擇KineticJS圖形框架作為建模視圖611的圖形框架，以Dojo作為 工具基本界面以及模型樹72、屬性編輯器73的圖形框架。
[0058] 建模視圖611主要負(fù)責(zé)模型圖形與用戶的交互，分為類圖、用框圖、包圖和構(gòu)件 圖。建模視圖611包括模型展示視圖74,模型展示視圖74主要負(fù)責(zé)建模元素對(duì)象的顯示與 識(shí)別用戶對(duì)模型的基本操作，模型展示視圖74包括文本編輯75、模型圖形76和軌跡捕獲 77,模型圖形76是一種HTML Canvas元素，經(jīng)由JavaScript腳本語言可渲染出模型的矢量 圖形，將建模元素對(duì)象顯示在視圖上。文本編輯75是一個(gè)HTML Textbox元素，默認(rèn)為隱藏 狀態(tài)，當(dāng)用戶觸發(fā)模型為修改狀態(tài)時(shí)Textbox才會(huì)在模型圖形76中相應(yīng)的位置上可見，供 用戶對(duì)模型信息進(jìn)行修改，修改完成后再將信息傳給模型圖形76進(jìn)行重新渲染圖形。軌跡 捕獲77主要負(fù)責(zé)用戶手勢(shì)軌跡的顯示。用戶只要切換至手勢(shì)軌跡識(shí)別狀態(tài)下，在建模視圖 611中單指單擊觸屏所繪制出的軌跡都將可以可視化。用戶在視圖上的手勢(shì)軌跡以及多點(diǎn) 觸控等手勢(shì)在視圖上都會(huì)有相應(yīng)的視覺提示，并在用戶完成相應(yīng)的手勢(shì)操作后自動(dòng)消失。 模型圖形76包括形狀78、線條79、圖像80和文本81。
[0059] 圖4為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模工具中建模視圖圖層 的結(jié)構(gòu)圖。如圖4所示，本發(fā)明實(shí)施例從圖層的角度，將建模視圖611分為模型對(duì)象層6111、 文本編輯控件層6112和軌跡手勢(shì)識(shí)別層6113,模型對(duì)象層6111用于捕捉用戶的手勢(shì)軌跡 操作與顯示建模元素對(duì)象，文本編輯控件層6112用于管理建模元素的屬性的文字信息， 作為默認(rèn)隱藏的編輯視圖層，當(dāng)用戶觸發(fā)編輯事件時(shí)，編輯圖層就會(huì)自動(dòng)顯現(xiàn)至Canvas圖 層的頂端，供用戶輸入文字等操作，用戶完成修改后自動(dòng)刷新視圖層。例如，當(dāng)用戶在類圖 中類的單指雙擊時(shí)，類進(jìn)入編輯狀態(tài)，類名稱的位置上會(huì)浮現(xiàn)出一個(gè)包含類名稱的Textbox 控件供用戶修改，用戶完成修改單擊視圖其他區(qū)域后，文本編輯控件層6112恢復(fù)隱藏狀 態(tài)，再將修改后的信息傳至Canvas類視圖名稱上，以解決HTML5Canvas作為圖形元素不能 直接編輯的問題。軌跡手勢(shì)識(shí)別層6113專門用于捕獲用戶繪制的手勢(shì)軌跡。
[0060] 圖5為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模工具中交互處理層的 結(jié)構(gòu)圖。如圖5所示，本發(fā)明實(shí)施例使用Ha_er觸屏輸入監(jiān)聽器提供的模塊監(jiān)聽Canvas 內(nèi)部圖形。Hammer提供的監(jiān)聽器主要分為觸屏開始事件、觸屏滑動(dòng)事件、觸屏結(jié)束事件等監(jiān) 聽器，但由于建模手勢(shì)中包含大量自定義的手勢(shì)動(dòng)作，Hammer提供的觸屏輸入監(jiān)聽事件只 能作為識(shí)別建模手勢(shì)的入口，需要自行對(duì)觸屏輸入事件類型與事件屬性分析識(shí)別。因此，本 發(fā)明實(shí)施例提供了軌跡手勢(shì)識(shí)別器和多點(diǎn)觸控識(shí)別器，軌跡手勢(shì)識(shí)別器依據(jù)單筆畫手勢(shì)識(shí) 別器和多筆畫手勢(shì)識(shí)別器進(jìn)行軌跡手勢(shì)識(shí)別。
[0061] 本發(fā)明實(shí)施例利用建模工具在Web環(huán)境下支持多點(diǎn)觸控交互方式，解決了在不同 的設(shè)備與平臺(tái)上，支持多點(diǎn)觸控的交互方式進(jìn)行建模。
[0062] 圖6為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模方法流程圖。本發(fā)明 實(shí)施例適用于在Web環(huán)境下，支持多點(diǎn)觸控輸入方式和手勢(shì)軌跡輸入方式觸屏的UML建模 方法，具體的建模方法步驟如下：
[0063] 步驟S101、建模工具在Web環(huán)境下支持多點(diǎn)觸控交互方式，獲取用戶的建模操作；
[0064] 本發(fā)明實(shí)施例是在Web頁面上，用戶通過建模工具進(jìn)行建模，用戶在建模工具的 建模視圖中進(jìn)行建模操作。
[0065] 步驟S102、所述建模工具識(shí)別獲取所述建模操作對(duì)應(yīng)的輸入方式，所述輸入方式 包括多點(diǎn)觸控輸入方式和手勢(shì)軌跡輸入方式；
[0066] 建模工具識(shí)別用戶在建模過程中輸入建模操作的方式，用戶可以通過多點(diǎn)觸控輸 入方式和手勢(shì)軌跡輸入方式輸入建模操作，也可以通過普通的鍵盤和鼠標(biāo)方式輸入建模操 作，其中，多點(diǎn)觸控指多個(gè)手指做的點(diǎn)擊或觸控動(dòng)作，手勢(shì)軌跡指手指在觸屏上持續(xù)滑動(dòng) 的軌跡。
[0067] 步驟S103、所述建模工具采用所述輸入方式，執(zhí)行對(duì)應(yīng)的所述建模操作，生成所述 建模元素，并根據(jù)所述建模元素生成模型，以實(shí)現(xiàn)在不同的設(shè)備與平臺(tái)上，支持多點(diǎn)觸控的 交互方式進(jìn)行建模。
[0068] 建模工具依據(jù)用戶的輸入方式生成與建模操作對(duì)應(yīng)的模型元素與視圖，經(jīng)過一系 列的建模操作最終由多個(gè)建模元素構(gòu)成建模模型，產(chǎn)生與模型對(duì)應(yīng)的建模文件。
[0069] 本發(fā)明實(shí)施例利用建模工具在Web環(huán)境下支持多點(diǎn)觸控交互方式，解決了在不同 的設(shè)備與平臺(tái)上，支持多點(diǎn)觸控的交互方式進(jìn)行建模。
[0070] 在上述實(shí)施例的基礎(chǔ)上，所述建模操作包括新增建模元素、刪除建模元素、修改建 模元素、移動(dòng)建模元素和文本編輯。
[0071] 所述建模工具識(shí)別所述建模操作的輸入方式包括：所述建模工具依據(jù)所述建模操 作產(chǎn)生的觸控事件類型判斷所述輸入方式為多點(diǎn)觸控輸入方式；或者所述建模工具依據(jù)所 述建模操作產(chǎn)生的路徑的幾何形狀判斷所述輸入方式為手勢(shì)軌跡輸入方式。
[0072] 所述建模工具存儲(chǔ)所述模型對(duì)應(yīng)的建模文件；將所述建模文件的格式轉(zhuǎn)換為目標(biāo) 格式，并輸出所述目標(biāo)格式的所述建模文件，以使所述建模工具與支持所述目標(biāo)格式的目 標(biāo)工具實(shí)現(xiàn)文件交互。
[0073] 所述建模元素包括建模元素對(duì)象和建模元素關(guān)系。
[0074] 本發(fā)明實(shí)施例利用建模工具在Web環(huán)境下支持多點(diǎn)觸控交互方式，解決了在不同 的設(shè)備與平臺(tái)上，支持多點(diǎn)觸控的交互方式進(jìn)行建模。以下分別介紹多點(diǎn)觸控識(shí)別和手勢(shì) 軌跡識(shí)別。
[0075] 圖7為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模方法適用的多點(diǎn)觸控 識(shí)別流程圖；如圖7所示，先確定焦點(diǎn)對(duì)象，本發(fā)明實(shí)施例中的焦點(diǎn)對(duì)象具體指KineticJS 圖像對(duì)象，觸屏輸入監(jiān)聽器監(jiān)聽所述KineticJS圖像對(duì)象，具體為監(jiān)聽事件和確定事件屬 性，監(jiān)聽事件包括觸屏開始、觸屏滑動(dòng)和觸屏結(jié)束，事件屬性包括點(diǎn)數(shù)、方向、時(shí)間、組合手 勢(shì)、坐標(biāo)、角度、中心以及手勢(shì)軌跡等。在監(jiān)聽事件方面，除了可以使用KineticJS提供的 on ()方法設(shè)置輸入事件監(jiān)聽外，目前最新版的Hammer的on ()方法也支持對(duì)KineticJS圖 形對(duì)象的監(jiān)聽，并且兩者互相兼容。KineticJS圖形對(duì)象可設(shè)置的輸入事件類型包含了 KineticJS與Hammer兩者提供的并集，因此，統(tǒng)一使用Hammer對(duì)KineticJS圖形對(duì)象設(shè)置 多點(diǎn)觸控事件監(jiān)聽函數(shù)，KineticJS圖形對(duì)象的多點(diǎn)觸控監(jiān)聽事件被觸發(fā)之后將進(jìn)一步被 多點(diǎn)觸控事件識(shí)別模塊監(jiān)聽，以識(shí)別出多點(diǎn)觸控事件。
[0076] 圖8為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模方法適用的多點(diǎn)觸控 識(shí)別流程圖。如8所示，在輸入監(jiān)聽器監(jiān)聽到焦點(diǎn)對(duì)象的多點(diǎn)觸控輸入之后，分析觸控輸入 為多點(diǎn)觸控輸入，輸入監(jiān)聽器發(fā)送觸控輸入消息給多點(diǎn)觸控識(shí)別模塊。而觸控消息進(jìn)入多 點(diǎn)觸控識(shí)別模塊之后，先借由觸控輸入監(jiān)聽器的基本監(jiān)聽事與輸入消息屬性初步進(jìn)行手勢(shì) 判定，至此屬于基礎(chǔ)手勢(shì)識(shí)別的分析過程。而對(duì)于在基礎(chǔ)手勢(shì)識(shí)別處理過程中尚未完成的 手勢(shì)判定將進(jìn)入更為深入的高級(jí)手勢(shì)識(shí)別分析過程。高級(jí)手勢(shì)識(shí)別需要在基礎(chǔ)手勢(shì)識(shí)別的 基礎(chǔ)上，進(jìn)一步分析輸入消息屬性，并逐步往下進(jìn)行判定，以完成多點(diǎn)觸控的識(shí)別工作。最 后根據(jù)手勢(shì)識(shí)別的判定結(jié)果再調(diào)用相應(yīng)的手勢(shì)事件處理函數(shù)。
[0077] 圖9為本發(fā)明實(shí)施例提供的Web環(huán)境下支持觸屏的UML建模方法適用的單筆畫軌 跡識(shí)別流程圖。單筆畫軌跡是指用戶經(jīng)由單指一筆畫到底，手指離開觸屏即結(jié)束繪制的手 勢(shì)軌跡。單筆畫軌跡識(shí)別的過程如圖9所示，當(dāng)用戶觸發(fā)手勢(shì)軌跡識(shí)別模式后，經(jīng)由每個(gè) touchmove (觸控移動(dòng)）事件與hoi don (觸控持續(xù)）手勢(shì)觸控屬性判斷輸入處于手勢(shì)軌跡事 件，從輸入消息中獲取用戶相對(duì)于手勢(shì)軌跡繪制區(qū)左上角的單指觸控坐標(biāo)。然后，再將這些 坐標(biāo)信息保存至二維數(shù)組中，使得用戶手指所繪制出的軌跡得以被記錄下來。最后再通過 讀取二維數(shù)組中各個(gè)坐標(biāo)元素還原用戶的手勢(shì)軌跡以進(jìn)行識(shí)別。在識(shí)別工作中，需要建立 一個(gè)手勢(shì)庫用于管理工具中所有的單筆畫手勢(shì)軌跡。本建模工具的單筆畫手勢(shì)軌跡庫是在 $1原有手勢(shì)庫DollarRecognizer的基礎(chǔ)之上自行加入了建模手勢(shì)所需的單筆畫手勢(shì)軌跡 建立而成。識(shí)別工作需要將保存著軌跡坐標(biāo)的二維數(shù)組傳入$1的Recognize方法以進(jìn)行 $1的數(shù)學(xué)模型算法識(shí)別手勢(shì)庫中的軌跡，若識(shí)別成功則返回在手勢(shì)庫中所定義的軌跡關(guān)鍵 字。最后，系統(tǒng)調(diào)用findStrokeEventTypeO方法結(jié)合該關(guān)鍵字識(shí)別所對(duì)應(yīng)的手勢(shì)事件類型 執(zhí)行相應(yīng)的手勢(shì)事件。本建模工具中的單筆畫手勢(shì)軌跡包括創(chuàng)建建模元素對(duì)象與修改關(guān)系 類型手勢(shì)。本建模工具中創(chuàng)建建模元素對(duì)象的單筆畫手勢(shì)軌跡如下表1所示，本建模工具 中修改關(guān)系類型的單筆畫手勢(shì)軌跡如下表2所示。
[0078] 表 1
[0079]

【權(quán)利要求】
1. 一種Web環(huán)境下支持觸屏的UML建模工具，其特征在于，所述建模工具在Web環(huán)境下 支持多點(diǎn)觸控交互方式，包括： 表現(xiàn)層，所述表現(xiàn)層包括建模視圖，所述建模視圖用于在Web環(huán)境下獲取用戶的建模 操作； 交互處理層，所述交互處理層用于識(shí)別獲取所述建模操作對(duì)應(yīng)的輸入方式；采用所述 輸入方式，執(zhí)行對(duì)應(yīng)的所述建模操作，生成所述建模元素，并根據(jù)所述建模元素生成模型， 所述輸入方式包括多點(diǎn)觸控輸入方式和手勢(shì)軌跡輸入方式； 存儲(chǔ)層，所述存儲(chǔ)層包括存儲(chǔ)模塊，所述存儲(chǔ)模塊用于存儲(chǔ)所述模型對(duì)應(yīng)的建模文件。
2. 根據(jù)權(quán)利要求1所述的Web環(huán)境下支持觸屏的UML建模工具，其特征在于，所述建模 操作包括新增建模元素、刪除建模元素、修改建模元素、移動(dòng)建模元素和文本編輯。
3. 根據(jù)權(quán)利要求2所述的Web環(huán)境下支持觸屏的UML建模工具，其特征在于，所述交互 處理層包括多點(diǎn)觸控識(shí)別模塊和軌跡識(shí)別模塊，所述多點(diǎn)觸控識(shí)別模塊用于依據(jù)所述建模 操作產(chǎn)生的觸控事件類型判斷所述輸入方式為多點(diǎn)觸控輸入方式；所述軌跡識(shí)別模塊用于 依據(jù)所述建模操作產(chǎn)生的路徑的幾何形狀判斷所述輸入方式為手勢(shì)軌跡輸入方式。
4. 根據(jù)權(quán)利要求3所述的Web環(huán)境下支持觸屏的UML建模工具，其特征在于，所述存 儲(chǔ)層還包括轉(zhuǎn)換模塊和輸出模塊，所述轉(zhuǎn)換模塊用于將所述建模文件的格式轉(zhuǎn)換為目標(biāo)格 式，所述輸出模塊用于輸出所述目標(biāo)格式的所述建模文件，以使所述建模工具與支持所述 目標(biāo)格式的目標(biāo)工具實(shí)現(xiàn)文件交互。
5. 根據(jù)權(quán)利要求1-4任一項(xiàng)所述的Web環(huán)境下支持觸屏的UML建模工具，其特征在于， 所述建模元素包括建模元素對(duì)象和建模元素關(guān)系。
6. -種Web環(huán)境下支持觸屏的UML建模方法，其特征在于，包括： 建模工具在Web環(huán)境下支持多點(diǎn)觸控交互方式，獲取用戶的建模操作； 所述建模工具識(shí)別獲取所述建模操作對(duì)應(yīng)的輸入方式，所述輸入方式包括多點(diǎn)觸控輸 入方式和手勢(shì)軌跡輸入方式； 所述建模工具采用所述輸入方式，執(zhí)行對(duì)應(yīng)的所述建模操作，生成所述建模元素，并根 據(jù)所述建模元素生成模型，以實(shí)現(xiàn)在不同的設(shè)備與平臺(tái)上，支持多點(diǎn)觸控的交互方式進(jìn)行 建模。
7. 根據(jù)權(quán)利要求6所述的方法，其特征在于，所述建模操作包括新增建模元素、刪除建 模元素、修改建模元素、移動(dòng)建模元素和文本編輯。
8. 根據(jù)權(quán)利要求7所述的方法，其特征在于，所述建模工具識(shí)別獲取所述建模操作對(duì) 應(yīng)的輸入方式包括： 所述建模工具依據(jù)所述建模操作產(chǎn)生的觸控事件類型判斷所述輸入方式為多點(diǎn)觸控 輸入方式；或者 所述建模工具依據(jù)所述建模操作產(chǎn)生的路徑的幾何形狀判斷所述輸入方式為手勢(shì)軌 跡輸入方式。
9. 根據(jù)權(quán)利要求8所述的方法，其特征在于，還包括： 所述建模工具存儲(chǔ)所述模型對(duì)應(yīng)的建模文件，將所述建模文件的格式轉(zhuǎn)換為目標(biāo)格 式，并輸出所述目標(biāo)格式的所述建模文件，以使所述建模工具與支持所述目標(biāo)格式的目標(biāo) 工具實(shí)現(xiàn)文件交互。
10.根據(jù)權(quán)利要求6-9任一項(xiàng)所述的方法，其特征在于，所述建模元素包括建模元素對(duì) 象和建模元素關(guān)系。
【文檔編號(hào)】G06F17/50GK104239606SQ201410384976
【公開日】2014年12月24日 申請(qǐng)日期:2014年8月6日 優(yōu)先權(quán)日:2014年8月6日
【發(fā)明者】麻志毅, 葉治毅, 陳泓婕 申請(qǐng)人:北京大學(xué)