江萌 孫昊男 霍卓群

摘要：單交互設(shè)備（普通鍵鼠）無法完成一些復(fù)雜的交互可視化任務(wù)，介紹了整個多設(shè)備系統(tǒng)的開發(fā)環(huán)境與架構(gòu)設(shè)計(jì)，闡述了系統(tǒng)的功能和多設(shè)備的協(xié)同交互的界面構(gòu)架，在此基礎(chǔ)上對多設(shè)備協(xié)同可視化的每一個功能模塊進(jìn)行了介紹，分別包括圖像獲取與數(shù)據(jù)傳輸模塊、圖像繪制模塊、圖像處理模塊、傳遞函數(shù)模塊和顏色紋理模塊，并相應(yīng)地進(jìn)行了效果展示。

關(guān)鍵詞：多設(shè)備交互可視化；圖像處理；基于草圖的解釋可視化；體數(shù)據(jù)可視化

中圖分類號：P631文獻(xiàn)標(biāo)志碼：A文章編號：1008-1739（2022）21-66-6

0引言

單機(jī)單用戶系統(tǒng)在可視化分析復(fù)雜數(shù)據(jù)中會體現(xiàn)出一些限制。雖然多設(shè)備協(xié)作系統(tǒng)取得了很大的進(jìn)展，但由于任務(wù)劃分、多用戶協(xié)作和協(xié)同切片分析的困難，單交互設(shè)備（普通鍵鼠）無法完成一些復(fù)雜的交互可視化任務(wù)。因此，設(shè)計(jì)一套完整的多交互設(shè)備可視化系統(tǒng)就顯得尤為重要。為實(shí)現(xiàn)多交互設(shè)備的體數(shù)據(jù)解釋可視化系統(tǒng)，系統(tǒng)本身需要能在各類設(shè)備上兼容運(yùn)行，所以系統(tǒng)首選兼容性最好的前端作為前端的開發(fā)語言，即考慮基于web服務(wù)的開發(fā)方式；系統(tǒng)的主要算法基于JavaScript語言開發(fā)，同時引入OpenCV圖像處理工具包增加圖像處理的解釋能力；并結(jié)合不同設(shè)備對系統(tǒng)稍作調(diào)整達(dá)到兼容。最終完成多交互設(shè)備的系統(tǒng)解決方案，可以實(shí)現(xiàn)多臺交互設(shè)備共同操作同一份體數(shù)據(jù)并與服務(wù)器進(jìn)行交互。

1開發(fā)環(huán)境與架構(gòu)

本系統(tǒng)的開發(fā)環(huán)境主要是Adobe Dreamweaver，采用Html5語言進(jìn)行頁面搭建、css完善界面以及用JavaScript實(shí)現(xiàn)系統(tǒng)函數(shù)和算法。由于Html5是可以應(yīng)用于各個設(shè)備平臺的語言，且其他平臺可用瀏覽器通過B/S架構(gòu)直接訪問本系統(tǒng)，無需額外搭建運(yùn)行環(huán)境，大大簡化了各個平臺設(shè)備操作本系統(tǒng)時的準(zhǔn)備工作。

設(shè)計(jì)的平臺采用系統(tǒng)設(shè)計(jì)的傳統(tǒng)3層模型，即底層數(shù)據(jù)獲取、中層算法處理層和頂層應(yīng)用層。系統(tǒng)的數(shù)據(jù)來源是通過后端服務(wù)器加載NetCDF格式的體數(shù)據(jù)，系統(tǒng)通過與服務(wù)器建立HTTP請求的方式獲取體數(shù)據(jù)的2D切片。獲取到的2D切片通過canvas底層獲取圖像的像素，獲取到圖片的像素后即進(jìn)入中層算法處理層，可進(jìn)行圖形學(xué)、圖像學(xué)及可視化算法分析等解釋。解釋好的圖像通過canvas繪圖的方式繪制到頂層應(yīng)用層上，并與用戶形成交互。系統(tǒng)設(shè)計(jì)模型如圖1所示。

2系統(tǒng)的功能設(shè)計(jì)

本系統(tǒng)設(shè)計(jì)的平臺基于模塊化思想，每一個功能都由單獨(dú)的一個模塊實(shí)現(xiàn)，算法的實(shí)現(xiàn)與界面的交互相互分割，面向?qū)ο蟮奶匦允沟瞄_發(fā)平臺有很好的擴(kuò)展性。平臺的設(shè)計(jì)框架如圖2所示。

平臺采用Html5搭建可視化平臺，集成了傳遞函數(shù)、floodfill算法和紋理替換等可視化算法，實(shí)現(xiàn)了多種科學(xué)可視化領(lǐng)域的提數(shù)據(jù)處理算法，例如2D切片的傳遞函數(shù)算法、種子點(diǎn)推薦算法、區(qū)域選擇算法和紋理替換算法等。

在用戶交互方面，系統(tǒng)根據(jù)不同的設(shè)備采取不同的交互方式，例如在PC端主要以鍵鼠操作界面；在觸摸屏、手機(jī)和pad端則用電容筆、pencil等專用工具經(jīng)行交互。

系統(tǒng)充分結(jié)合Html中canvas特性，用戶可以用鍵鼠、電容筆等直接對圖像進(jìn)行繪制和調(diào)整，同時可以利用傳遞函數(shù)自行指定不同像素的顏色及透明度。

3各功能模塊

3.1圖像獲取與傳輸模塊

系統(tǒng)的圖像獲取分為直接獲取和從服務(wù)器端獲取。直接獲取及利用Html5獲取文件的方式直接從本地獲取圖像進(jìn)行處理；從服務(wù)器端進(jìn)行獲取則利用socket通信與服務(wù)器端建立連接，利用Html5通信函數(shù)XMLHttpRequest與服務(wù)器端通信連接傳輸圖像及相關(guān)數(shù)據(jù)。本模塊在處理完圖像后可將圖像直接保存至本地或者傳輸?shù)椒?wù)器端。

3.2圖像繪制與交互模塊

Html5中canvas可對獲取到的圖像直接繪制，當(dāng)然直接繪制圖像無法滿足系統(tǒng)對體數(shù)據(jù)的解釋功能需要，所以要用到canvas高級中的context及其獲取像素的函數(shù)context. getImageData（）和繪制像素函數(shù)context.putImageData（）。通過這2個函數(shù)可以將canvas中的圖像以RGBA為一組的像素?cái)?shù)組存儲起來，并進(jìn)行操作，如圖3所示。

當(dāng)圖像可以被轉(zhuǎn)化為數(shù)組后，很多圖形學(xué)、圖像學(xué)和可視化算法就可以展示。

3.3傳遞函數(shù)模塊

傳遞函數(shù)是可視化領(lǐng)域常用的函數(shù)算法，可以根據(jù)圖像的灰度值（體數(shù)據(jù)通常是灰度級數(shù)據(jù)）快速給相同灰度級的像素進(jìn)行賦值（顏色和透明度），并且可以同時給所有的灰度級像素賦值，實(shí)現(xiàn)以最少的交互操作對圖像所有像素賦值。

3.4圖像處理模塊

圖像處理模塊分為圖形學(xué)和圖像學(xué)處理模塊，其中圖形學(xué)模塊主要完成鉛筆的繪制、基本圖形的繪制和橡皮的清除等；圖像學(xué)處理則是像素上的處理，如閾值算法、直方圖均衡化算法、紋理替換算法和區(qū)域選擇算法等，其中也包括OpenCV函數(shù)圖像處理。

3.5顏色和紋理模塊

顏色和紋理模塊提供了顏色的賦值、圖形學(xué)寬度、閾值設(shè)定和紋理設(shè)置功能。顏色獲取模塊利用顏色按鈕獲取對象，在JavaScript中，以color.value賦值對象。圖形學(xué)寬度及需要設(shè)定閾值的算法可以通過range標(biāo)簽和number標(biāo)簽賦值。紋理的設(shè)置則需要從本地獲取紋理，在JavaScript中，指定FileReader對象，通過讀取本地函數(shù)獲取紋理圖像。隨后填充canvas，當(dāng)紋理替換算法用到紋理像素時，從該canvas中獲取。

4系統(tǒng)的功能實(shí)現(xiàn)

4.1圖像的獲取與傳輸模塊

圖像的讀取模塊分為本地讀取和服務(wù)器讀取，在系統(tǒng)啟動時若與服務(wù)器建立連接，則圖像獲取模塊可直接指定圖像在體數(shù)據(jù)的位置并實(shí)時得到服務(wù)器的反饋。

如圖4（a）～（c）所示，當(dāng)用戶1指定軸方向上切片時，系統(tǒng)從服務(wù)器端獲取到圖像并繪制在canvas上。

本模塊同時包含服務(wù)器端與瀏覽器端傳輸數(shù)據(jù)。如系統(tǒng)中需要完成服務(wù)器端傳過來種子點(diǎn)的顯示、增刪改查賦值的功能，隨后將修改好的種子點(diǎn)回傳到服務(wù)器端，如圖4 （b）～（f）所示，隨后由系統(tǒng)編輯種子點(diǎn)位置，編輯好關(guān)鍵位置后，將種子點(diǎn)信息回傳至服務(wù)器，如圖4（f）～（g）所示。本系統(tǒng)采用json文件傳輸方案，將服務(wù)器端發(fā)送過來的種子點(diǎn)繪制到前端，利用圖像繪制及交互模塊完成對種子點(diǎn)的增刪改查，將解析好的種子點(diǎn)放在seedPoint數(shù)組中并附上用戶名發(fā)送到后端，完成服務(wù)器端與瀏覽器端的數(shù)據(jù)傳輸。

4.2圖像繪制與交互模塊

獲取到圖片信息后，canvas繪圖分2種：一種是context. drawImage直接將獲取的圖像繪制到圖像上；還有一種是在獲取到圖像的像素?cái)?shù)組imageData時將圖像繪制到canvas上。

用戶的交互分為按鈕交互和繪制交互。由于系統(tǒng)需要兼容多個設(shè)備，繪制交互中分為鍵鼠繪制交互和觸屏繪制交互，這2種交互都需要用canvas函數(shù)來監(jiān)聽事件。對于鍵鼠交互，則監(jiān)聽的事件為‘mousedown‘mousemove‘mouseup和‘mouseleave，分別是鼠標(biāo)點(diǎn)擊、移動、松開和離開4個事件。對于觸屏交互，則監(jiān)聽的事件是‘touchstart‘touchmove和‘touchend，分別是觸摸時點(diǎn)擊、移動和離開3個按鍵。系統(tǒng)設(shè)置相應(yīng)事件的監(jiān)聽函數(shù)，當(dāng)監(jiān)聽到用戶開始與canvas交互時，獲取用戶點(diǎn)擊的坐標(biāo)值進(jìn)行交互操作。此時要注意canvas坐標(biāo)系與體數(shù)據(jù)坐標(biāo)系的差異性，要進(jìn)行坐標(biāo)轉(zhuǎn)化，如圖5所示。

4.3傳遞函數(shù)模塊

傳遞函數(shù)模塊需要單獨(dú)的一塊交互區(qū)域，傳遞函數(shù)的交互與上一節(jié)的交互模塊相同，其快速解釋如圖6所示。當(dāng)用戶點(diǎn)擊圖中點(diǎn)時，該點(diǎn)按幾何算法連接傳遞函數(shù)的所有頂點(diǎn)，該點(diǎn)的顏色被賦值為當(dāng)前系統(tǒng)選定的顏色，而該點(diǎn)附近的像素點(diǎn)都被賦值相似的顏色，透明度按幾何運(yùn)算每個像素級都不同，從而每當(dāng)用戶點(diǎn)擊傳遞函數(shù)時，所有的像素RGBA都會被重新賦值。

解釋結(jié)果如canvas中所示，整體的組織被標(biāo)記成不同顏色，血管都被標(biāo)為指定顏色，清晰可見。用戶可以拖拉傳遞函數(shù)上的頂點(diǎn)，canvas中的圖像也會隨用戶的拖拉不斷地變化，用戶由此可以直觀、快速解釋圖像。

4.4圖像處理模塊

圖形學(xué)與圖像學(xué)結(jié)合將很好地解釋出圖片，如利用直方圖均衡化算法和傳遞函數(shù)結(jié)合快速解釋出圖像，再用圖形學(xué)算法中的鉛筆進(jìn)行簡單修飾，即可將原本模糊的體數(shù)據(jù)圖像處理成組織清晰、顏色各異的圖像。

專家可以根據(jù)自己的需求突出自己想要強(qiáng)調(diào)的部分，系統(tǒng)支持簡單圖畫和各種圖像智能處理。醫(yī)生可以通過系統(tǒng)提供的圖像處理函數(shù)快速解釋出自己想要突出的組織部分，如圖7所示。

4.5顏色和紋理模塊

顏色和紋理模塊主要負(fù)責(zé)顏色賦值和紋理替換的紋理選擇，如圖8所示。左側(cè)為顏色選擇，每個瀏覽器不一樣，但通過該選擇器一定可以給定一個RGB數(shù)組（圖中為谷歌瀏覽器的顏色選擇器），右側(cè)為圖像和紋理選擇模塊，“Width”滑桿用來指定鉛筆等圖形學(xué)畫筆的寬度，同時也可以給需要傳入閾值的算法傳入閾值，如閾值算法的閾值。“Import texture”按鈕即可導(dǎo)入紋理，紋理將作為圖形學(xué)的畫筆顏色填充，同時也可以為種子點(diǎn)提供推薦紋理填充，導(dǎo)入的圖片可以作為新的“顏色”。紋理的導(dǎo)入將極大地豐富圖片的解釋效果。

上述基于多交互設(shè)備的協(xié)同可視化系統(tǒng)，是由多個交互式可視化系統(tǒng)組成。系統(tǒng)主要包括PC端交互式可視化系統(tǒng)以及適應(yīng)多個設(shè)備的前端交互式可視化系統(tǒng)。系統(tǒng)包括5大模塊：圖像獲取與數(shù)據(jù)傳輸模塊、圖像繪制與交互模塊、圖像處理模塊、傳遞函數(shù)模塊和顏色紋理模塊。本系統(tǒng)允許充分利用硬件資源，交互式任務(wù)可以分配給不同的設(shè)備。

5系統(tǒng)的功能測試

系統(tǒng)測試是系統(tǒng)發(fā)布前最為關(guān)鍵的階段，是保證系統(tǒng)可靠性和質(zhì)量的關(guān)鍵步驟，主要是為了發(fā)現(xiàn)已設(shè)計(jì)平臺中存在的問題并更正。本系統(tǒng)為多交互設(shè)備的可視化系統(tǒng)，為驗(yàn)證系統(tǒng)的穩(wěn)定性、可維護(hù)性和擴(kuò)展性，將在電腦端、觸屏端、手機(jī)端和pad端等交互設(shè)備上設(shè)計(jì)一些特定測試。

5.1系統(tǒng)的測試環(huán)境

服務(wù)器端為CPU：Intel Corei5 9400F2.9 GHz，內(nèi)存：32 GB 2600 Hz，顯卡：英偉達(dá)GTX1660 6 GB，硬盤：NVME 256 GB。

PC端為CPU：Intel Corei5 2.4 GHz，內(nèi)存：16 GB 1400 Hz，顯卡：英偉達(dá)MX250 2 GB，硬盤：256 GB SSD。

觸屏端為CPU：Intel Corei5 9400F 2.9 GHz，內(nèi)存：32GB 2600 Hz，顯卡：英偉達(dá)GTX1660 6 GB，硬盤：NVME 256 GB，觸摸屏：DELL 1080P。

手機(jī)端為CPU：驍龍855 2.84 GHz，內(nèi)存：6 GB，硬盤：128 GB SSD

平板端（iPad）為CPU：A10硬盤：128 G：顯示屏：2 160* 1 620視網(wǎng)膜觸摸屏。

5.2子模塊測試用例設(shè)計(jì)

本系統(tǒng)的測試用例分別在4個設(shè)備上進(jìn)行，如圖9所示，分別為PC端、iPad端、觸摸屏和手機(jī)端。

（1）圖像的獲取與傳輸模塊測試

在圖像的獲取與傳輸模塊測試用例中，具體的測試效果如圖9所示。系統(tǒng)可以在各個設(shè)備中實(shí)現(xiàn)圖像的獲取。在與服務(wù)器連接的過程中，手機(jī)端和iPad端存在一定的延時，但在系統(tǒng)加載完成后，都可以完成文件的獲取。

在與服務(wù)器傳輸?shù)臏y試中，各個設(shè)備都可以從服務(wù)器端獲取推薦的種子點(diǎn)并顯示在圖像上，如圖9中圖像上的紅色點(diǎn)所示。同樣，手機(jī)端和iPad端存在一定延時的情況，但總體來說并不影響實(shí)驗(yàn)效果。

（2）傳遞函數(shù)模塊測試

在傳遞函數(shù)模塊的測試中，用戶需要操作傳遞函數(shù)界面，從而操作canvas中圖像像素的顏色。在操作傳遞函數(shù)的過程中，傳遞函數(shù)操作流暢，canvas也會隨傳遞函數(shù)的變動而變動，由于手機(jī)端操作空間狹小，所以在調(diào)控傳遞函數(shù)時，略有不便，但整體操作流暢度和響應(yīng)速度都有著不錯的效果，如圖10所示。

（3）圖像處理模塊測試

測試了主要的圖像學(xué)算法，在測試的過程中，幾大算法結(jié)合來解釋圖像有著非常好的效果。如圖11所示，直方圖均衡化算法與傳遞函數(shù)算法結(jié)合可以快速地解釋出切片中被灰度級“隱藏”的軟組織，再結(jié)合紋理替換算法，可以將切片解釋得更加逼近實(shí)體。

5.3多交互設(shè)備整體測試用例

多交互設(shè)備同時在線與服務(wù)器端進(jìn)行連接解釋，能快速解釋同一體數(shù)據(jù)的不同切片，大大增加效率。測試用例如下。

在多交互設(shè)備同時在線與服務(wù)器端連接解釋切片測試中，4個用戶同時接入服務(wù)器并操作切片，每個用戶結(jié)合自己設(shè)備的特性進(jìn)行交互，例如PC端用鍵鼠進(jìn)行交互操作，iPad用pencil進(jìn)行交互，觸屏端、手機(jī)端用電容筆或者手進(jìn)行交互，如圖12所示。

經(jīng)過大量實(shí)驗(yàn)發(fā)現(xiàn)，鍵鼠更適合精確性較高的交互，如種子點(diǎn)探索切片中某一個組織；觸屏端適合進(jìn)行大型的解釋，如對切片整體進(jìn)行繪制；iPad端如果加入pencil、電容筆與屏幕進(jìn)行交互，既可以保證較高的精確性又能保證整體繪制的流暢度；手機(jī)端雖然操作起來缺乏精確性，但適合隨時隨地進(jìn)行解釋，而且手機(jī)端只要輸入服務(wù)器URL即可與服務(wù)器經(jīng)行交互，現(xiàn)在基本人人手中都有手機(jī)端，可以讓系統(tǒng)運(yùn)行起來有更多的便捷性。

圖13展示了4個用戶用4個不同的設(shè)備共同解釋一個體數(shù)據(jù)的結(jié)果。首先用戶在不同的設(shè)備上輸入服務(wù)器的URL與服務(wù)器建立連接，隨后每個用戶從服務(wù)器端獲取同一體數(shù)據(jù)的不同切片，在完成對切片的解釋后，回傳切片中重要的數(shù)據(jù)至服務(wù)器，服務(wù)器完成數(shù)據(jù)的追蹤。如用戶2利用觸摸屏將手部數(shù)據(jù)的血管位置解釋出來，希望血管組織能在體數(shù)據(jù)中展示，標(biāo)記血管位置并給血管賦值，隨后將數(shù)據(jù)傳到服務(wù)器中，服務(wù)器獲取到數(shù)據(jù)后將血管展示出來。

6結(jié)束語

在本系統(tǒng)設(shè)計(jì)的各個測試階段，對多個設(shè)備進(jìn)行分別測試，并且同一功能一同測試。經(jīng)過匯總對比，在測試的過程中，各個設(shè)備的測試結(jié)果都能夠與測試用例的預(yù)期保持一致，表明本系統(tǒng)成功實(shí)現(xiàn)了多設(shè)備協(xié)同體數(shù)據(jù)可視化的各項(xiàng)功能需求。

參考文獻(xiàn)

[1] ZHU B， IWATA M， HARAGUCHI R， et al. Sketch-based Dynamic Illustration of Fluid Systems[C]// 2011 SIGGRAPH Asia Conference. Hong Kong： ACM， 2011：1-8.

[2] REIPSCHLAGER P， FLEMISCH T， DACHSELT R. Personal Augmented Reality for Information Visualization on Large Interactive Displays[J]. IEEE Transactions on Visualization and Computer Graphics，2021，27（2）：1182-1192.

[3]劉萬軍，張正寰，曲海成.融合DenseNet的多尺度圖像去模糊模型[J].計(jì)算機(jī)工程與應(yīng)用， 2021，57（24）：219-226.

[4]周維.多人協(xié)同虛擬設(shè)備建模技術(shù)的研究與實(shí)現(xiàn)[D].武漢：華中科技大學(xué)， 2017.

[5]劉兵，王非，楊勇，等.可視化設(shè)備管理系統(tǒng)研究與應(yīng)用[J].天然氣與石油，2013，31（6）：4-6.

[6]江加貝，唐蘭林，王可.信息可視化交互技術(shù)在康復(fù)訓(xùn)練設(shè)備中的應(yīng)用探究———以肢體功能康復(fù)訓(xùn)練設(shè)備為例的活動障礙老年人設(shè)施設(shè)計(jì)研究[J].設(shè)計(jì)，2017（7）：118-119.