基于多交互設備的體數據解釋可視化系統的設計

江萌 孫昊男 霍卓群

摘要：單交互設備（普通鍵鼠）無法完成一些復雜的交互可視化任務，介紹了整個多設備系統的開發環境與架構設計，闡述了系統的功能和多設備的協同交互的界面構架，在此基礎上對多設備協同可視化的每一個功能模塊進行了介紹，分別包括圖像獲取與數據傳輸模塊、圖像繪制模塊、圖像處理模塊、傳遞函數模塊和顏色紋理模塊，并相應地進行了效果展示。

關鍵詞：多設備交互可視化；圖像處理；基于草圖的解釋可視化；體數據可視化

中圖分類號：P631文獻標志碼：A文章編號：1008-1739（2022）21-66-6

0引言

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

1開發環境與架構

本系統的開發環境主要是Adobe Dreamweaver，采用Html5語言進行頁面搭建、css完善界面以及用JavaScript實現系統函數和算法。由于Html5是可以應用于各個設備平臺的語言，且其他平臺可用瀏覽器通過B/S架構直接訪問本系統，無需額外搭建運行環境，大大簡化了各個平臺設備操作本系統時的準備工作。

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

2系統的功能設計

本系統設計的平臺基于模塊化思想，每一個功能都由單獨的一個模塊實現，算法的實現與界面的交互相互分割，面向對象的特性使得開發平臺有很好的擴展性。平臺的設計框架如圖2所示。

平臺采用Html5搭建可視化平臺，集成了傳遞函數、floodfill算法和紋理替換等可視化算法，實現了多種科學可視化領域的提數據處理算法，例如2D切片的傳遞函數算法、種子點推薦算法、區域選擇算法和紋理替換算法等。

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

系統充分結合Html中canvas特性，用戶可以用鍵鼠、電容筆等直接對圖像進行繪制和調整，同時可以利用傳遞函數自行指定不同像素的顏色及透明度。

3各功能模塊

3.1圖像獲取與傳輸模塊

系統的圖像獲取分為直接獲取和從服務器端獲取。直接獲取及利用Html5獲取文件的方式直接從本地獲取圖像進行處理；從服務器端進行獲取則利用socket通信與服務器端建立連接，利用Html5通信函數XMLHttpRequest與服務器端通信連接傳輸圖像及相關數據。本模塊在處理完圖像后可將圖像直接保存至本地或者傳輸到服務器端。

3.2圖像繪制與交互模塊

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

當圖像可以被轉化為數組后，很多圖形學、圖像學和可視化算法就可以展示。

3.3傳遞函數模塊

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

3.4圖像處理模塊

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

3.5顏色和紋理模塊

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

4系統的功能實現

4.1圖像的獲取與傳輸模塊

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

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

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

4.2圖像繪制與交互模塊

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

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

4.3傳遞函數模塊

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

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

4.4圖像處理模塊

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

專家可以根據自己的需求突出自己想要強調的部分，系統支持簡單圖畫和各種圖像智能處理。醫生可以通過系統提供的圖像處理函數快速解釋出自己想要突出的組織部分，如圖7所示。

4.5顏色和紋理模塊

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

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

5系統的功能測試

系統測試是系統發布前最為關鍵的階段，是保證系統可靠性和質量的關鍵步驟，主要是為了發現已設計平臺中存在的問題并更正。本系統為多交互設備的可視化系統，為驗證系統的穩定性、可維護性和擴展性，將在電腦端、觸屏端、手機端和pad端等交互設備上設計一些特定測試。

5.1系統的測試環境

服務器端為CPU：Intel Corei5 9400F2.9 GHz，內存：32 GB 2600 Hz，顯卡：英偉達GTX1660 6 GB，硬盤：NVME 256 GB。

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

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

手機端為CPU：驍龍855 2.84 GHz，內存：6 GB，硬盤：128 GB SSD

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

5.2子模塊測試用例設計

本系統的測試用例分別在4個設備上進行，如圖9所示，分別為PC端、iPad端、觸摸屏和手機端。

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

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

在與服務器傳輸的測試中，各個設備都可以從服務器端獲取推薦的種子點并顯示在圖像上，如圖9中圖像上的紅色點所示。同樣，手機端和iPad端存在一定延時的情況，但總體來說并不影響實驗效果。

（2）傳遞函數模塊測試

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

（3）圖像處理模塊測試

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

5.3多交互設備整體測試用例

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

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

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

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

6結束語

在本系統設計的各個測試階段，對多個設備進行分別測試，并且同一功能一同測試。經過匯總對比，在測試的過程中，各個設備的測試結果都能夠與測試用例的預期保持一致，表明本系統成功實現了多設備協同體數據可視化的各項功能需求。

參考文獻

[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].計算機工程與應用， 2021，57（24）：219-226.

[4]周維.多人協同虛擬設備建模技術的研究與實現[D].武漢：華中科技大學， 2017.

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

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