一種DR設(shè)備教學(xué)模擬系統(tǒng)的設(shè)計與實現(xiàn)

摘 要：醫(yī)療影像實驗教學(xué)實施過程中，由于設(shè)備價格昂貴、數(shù)量不足和使用限制等原因，難以給予學(xué)生充分操作使用機會。本文通過設(shè)計并實現(xiàn)了一套DR設(shè)備模擬教學(xué)系統(tǒng)，解決了學(xué)生實驗操作不足的問題。系統(tǒng)采用B/S架構(gòu)設(shè)計，使用Spring MVC和OpenGL等技術(shù)高度真實模擬設(shè)備使用過程和效果，并提供教師相應(yīng)輔助教學(xué)功能。通過對系統(tǒng)的使用，大大節(jié)約了實驗成本，提高了教學(xué)效率，增強了學(xué)生對設(shè)備使用的直觀認(rèn)識。

關(guān)鍵詞：OpenGL；MVC；Spring MVC；模擬系統(tǒng)

中圖分類號：TP391.41文獻(xiàn)標(biāo)識碼：A文章編號：2096-4706（2018）01-0021-03

The Design and Implementation of a Teaching Simulation System for DR Equipment

LIU Chao

（Information Center，Bengbu Automobile Petty Officer School，Bengbu 233000，China）

Abstract：During medical imaging experiment teaching，it is difficult for students to fully operate and use the real equipment because of the high price，insufficient quantity and other limitations. In this paper，a DR equipment simulation teaching system is designed and realized，which solves the problem of students' lack of experimental operation. The system adopts B/S architecture，and uses Spring MVC and OpenGL technology to highly simulate the use process and effect of the equipment，and to provide teachers with corresponding assistant teaching functions. Through the use of the system，the cost of the experiment is greatly reduced，and the teaching efficiency is improved. And the students' understanding of the use of the equipment is enhanced.

Keywords：OpenGL；MVC；Spring MVC；simulation system

0 引 言

當(dāng)前信息技術(shù)的快速進(jìn)步，推動著各個行業(yè)領(lǐng)域的信息化和數(shù)字化發(fā)展。而在醫(yī)療衛(wèi)生領(lǐng)域，隨著數(shù)字化成像技術(shù)成熟，數(shù)字化醫(yī)療設(shè)備在功能和使用上相對傳統(tǒng)膠片成像設(shè)備有著多方面的優(yōu)勢，并逐漸取代傳統(tǒng)設(shè)備。在影像呈現(xiàn)方面，數(shù)字化設(shè)備可利用計算機圖像處理相關(guān)技術(shù)動態(tài)調(diào)節(jié)圖像參數(shù)，突出顯示圖像細(xì)節(jié)部分。

在圖像傳遞方面，數(shù)字化圖像本身為計算機文件，可利用網(wǎng)絡(luò)快速拷貝傳遞。在存儲管理方面，數(shù)字化圖像可在計算機系統(tǒng)內(nèi)高密度存儲，相對傳統(tǒng)影像膠片大大節(jié)約存儲空間和降低存儲條件等要求。但在教學(xué)過程中由于設(shè)備自身的特點，對教學(xué)的實施存在諸多不便和限制。一是設(shè)備體積較大，難以進(jìn)行課堂演示；二是設(shè)備價格昂貴，教學(xué)能利用的設(shè)備種類和數(shù)量有限，限制了學(xué)生實際操作機會，不能反復(fù)練習(xí)使用[1]。

為解決以上教學(xué)中的問題，本文利用WebGL和Java等相關(guān)技術(shù)設(shè)計并實現(xiàn)了一套DR設(shè)備的教學(xué)模擬系統(tǒng)。系統(tǒng)采用B/S架構(gòu)，可高度模擬仿真設(shè)備的實際操作效果。教師在系統(tǒng)內(nèi)可預(yù)設(shè)多個不同教學(xué)案例，學(xué)生使用網(wǎng)頁形式登陸系統(tǒng)，并執(zhí)行相關(guān)實驗操作。實驗結(jié)束系統(tǒng)自動生成實驗報告，教師可利用系統(tǒng)對學(xué)生實驗結(jié)果進(jìn)行評判。

1 系統(tǒng)實現(xiàn)關(guān)鍵技術(shù)

1.1 WebGL技術(shù)

WebGL是一種在瀏覽器中進(jìn)行2D和3D繪圖的編程接口，編程語言采用JavaScript。WebGL屬于HTML5規(guī)范中的一部分，實現(xiàn)需要瀏覽器的支持，當(dāng)前主流瀏覽器均已支持WebGL。WebGL規(guī)范的實現(xiàn)是通過將接口綁定的底層OpenGL ES規(guī)范，實現(xiàn)利用顯卡硬件加速圖形在瀏覽器頁面上的繪制[2]。WebGL技術(shù)出現(xiàn)前要在瀏覽器中繪制圖形只能采用Applet或Flash等瀏覽器插件形式。瀏覽器插件相對于WebGL技術(shù)存在編程語言不統(tǒng)一，兼容性差，性能低下和安全性差等缺陷[3]。隨著HTML5技術(shù)不斷發(fā)展，主流瀏覽器對規(guī)范支持不斷完善，現(xiàn)主流瀏覽器不斷弱化對插件技術(shù)支持，很多插件已經(jīng)無法在新環(huán)境下運行。PixiJS是一個功能豐富，性能良好的WebGL 2D繪圖庫。PixiJS對原生的canvas接口進(jìn)行包裝，提供一個語義化的，簡潔的接口，支持桌面和移動瀏覽器。

1.2 MVC

MVC模式是模型（Model）-視圖（View）-控制器（Controller）的縮寫，是一種經(jīng)典的軟件設(shè)計模式，尤其應(yīng)用在Web系統(tǒng)中。MVC模式將系統(tǒng)分為模型、視圖和控制器三個部分[4]。

模型層負(fù)責(zé)與底層數(shù)據(jù)庫的交互，對數(shù)據(jù)進(jìn)行抽象，建立數(shù)據(jù)模型。模型層屏蔽底層數(shù)據(jù)存儲方式、接口的差異，實現(xiàn)數(shù)據(jù)的查詢、修改等操作。控制器層在系統(tǒng)中負(fù)責(zé)業(yè)務(wù)功能的實現(xiàn)，從視圖接收用戶操作，調(diào)取底層數(shù)據(jù)，完成業(yè)務(wù)功能，并將結(jié)果返回視圖和存入底層數(shù)據(jù)庫。視圖主要負(fù)責(zé)用戶界面顯示，顯示系統(tǒng)數(shù)據(jù)，接受用戶操作，調(diào)用相應(yīng)控制器，完成功能。MVC模式將數(shù)據(jù)、業(yè)務(wù)和用戶界面清晰分離，使系統(tǒng)從設(shè)計和實現(xiàn)角度層次分明，降低模塊間耦合度。

Spring是Java語言環(huán)境下一個輕量級企業(yè)級框架，Spring MVC是Spring下一個MVC的實現(xiàn)。Spring MVC框架主要由DispatcherServlet、處理器映射、視圖解析器和視圖組成，其中DispatcherServlet是框架核心。Spring MVC框架可直接利用Spring提供的其他功能模塊，如IOC、測試和DAO等。

1.3 功能設(shè)計

系統(tǒng)主要目標(biāo)為一個功能完善的教學(xué)模擬系統(tǒng)，解決現(xiàn)實條件下難以利用實際設(shè)備完成學(xué)生實驗課程。系統(tǒng)功能模塊如圖1所示。

圖1 模擬系統(tǒng)功能模塊

學(xué)生信息管理模塊負(fù)責(zé)記錄管理參加實驗的學(xué)生信息，包括年級、班級和學(xué)號等，課程老師或管理員負(fù)責(zé)維護學(xué)生信息。影像管理模塊存儲管理實驗過程中模擬生成和處理的影像信息，課程老師設(shè)置實驗所需的醫(yī)療影像圖片，學(xué)生在實驗過程中通過系統(tǒng)調(diào)取相應(yīng)圖片。交互模擬模塊應(yīng)根據(jù)不同等實驗要求，盡可能模擬真實設(shè)備操作流程，在實驗圖片上進(jìn)行模擬操作。報告管理模塊根據(jù)學(xué)生實際操作過程和實驗結(jié)果，生成實驗報告，并將實驗報告存儲在系統(tǒng)中供后續(xù)教師閱讀評分。學(xué)生實驗結(jié)束后，教師評判模塊可根據(jù)生成實驗報告對學(xué)生實驗進(jìn)行評判打分，并記錄統(tǒng)計實驗成績。

1.4 系統(tǒng)總體結(jié)構(gòu)設(shè)計

系統(tǒng)總體采用B/S架構(gòu)，服務(wù)端采用Spring MVC+JPA技術(shù)，系統(tǒng)架構(gòu)圖如圖2所示。

1.5 關(guān)鍵功能實現(xiàn)

1.5.1 服務(wù)端環(huán)境搭建

服務(wù)端使用Spring Boot+Gradle快速搭建系統(tǒng)環(huán)境，根據(jù)需求引入相關(guān)Starter，完成依賴管理。然后進(jìn)行數(shù)據(jù)庫、資源和視圖映射配置后系統(tǒng)環(huán)境服務(wù)端即基本搭建完成。Spring Boot可從配置文件中讀取配置信息，也可用JavaConfig的方式配置相關(guān)參數(shù)。在配置文件中進(jìn)行數(shù)據(jù)庫連接和JPA相關(guān)配置，代碼如下：

spring.datasource.url=jdbc：mysql：//10.1.10.213：3306/dr？useUnicode=truecharacterEncoding=gbk

spring.datasource.username=dr

spring.datasource.password=drspring.jpa.show-sql=true

spring.jpa.hibernate.ddl-auto=none

1.5.2 服務(wù)端模型層實現(xiàn)

模型層使用Hibernate實現(xiàn)O/R映射，將數(shù)據(jù)庫中關(guān)系型數(shù)據(jù)映射為系統(tǒng)中模型和對象。利用Spring Data JPA的Crud Repository接口簡化對數(shù)據(jù)的Crud操作實現(xiàn)。系統(tǒng)中學(xué)生模型部分代碼如下：

@Entity

@Table（name = \"STUDENT_INFO\"）

public class StudentInfo {

@Id

@Column（name = \"ID\"）

private Integer id；

@Column（name = \"NAME\"）

private String name；

@Column（name = \"STUDENT_ID\"）

private String studentId；

新建一個接口StudentInfoDao繼承Crud Repository接口，Spring自動為StudentInfoDao接口生成代理對象，通過注入代理對象并調(diào)用對象相應(yīng)方法即可實現(xiàn)對學(xué)生信息的查詢、修改等基本操作。

1.5.3 客戶端創(chuàng)建WebGL顯示區(qū)域

系統(tǒng)采用B/S架構(gòu)，客戶端主要功能是利用WebGL技術(shù)模擬醫(yī)療影像的處理過程。首先在學(xué)生模擬界面建立一個PixiJS容器對象，并將對象加入HTML頁面中。這個容器對象也被稱之為舞臺，它包含全部后續(xù)在網(wǎng)頁上繪制的圖形內(nèi)容。建立PixiJS舞臺和其它必要對象代碼如下：

app=new PIXI.Application（）；

app.renderer.autoResize=true；

$（\"div.image-container\"）.append（app.view）；

PixiJS使用WebGL和GPU硬件去渲染圖像，可被GPU處理的圖像稱之為紋理。在載入圖像前，先將圖像轉(zhuǎn)化為紋理，再由紋理生成可放入PixiJS舞臺顯示的“Sprite”對象中。PixiJS中另一個概念是container對象，可將做相同處理的“Sprite”對象放入一個container對象，對container進(jìn)行操作即對container中所有圖像進(jìn)行相同的操作，如平移、縮放等。下面是載入圖像生成Sprite代碼：

container=new PIXI.Container（）；

imgSprite=new PIXI.Sprite（PIXI.loader.resources[imgUrl].texture）；

container=new PIXI.Container（）；

container.addChild（imgSprite）；

1.5.4 圖像處理模擬

醫(yī)療圖像處理操作主要包括縮放、旋轉(zhuǎn)、裁剪、亮度和對比度變換。部分代碼如下：

//縮放

container.scale.x=scale；

container.scale.y=scale；

container.x=（container.x * scale）-screenWidth；

container.y=（container.y * scale）-screenHeight；

//旋轉(zhuǎn)

container.rotation=（Math.PI/180）*totalAngle；

//建立亮度、對比度ColorMatrixFilter

colorMatrix1=new PIXI.filters.ColorMatrixFilter（）；

colorMatrix2=new PIXI.filters.ColorMatrixFilter（）；

container.filters = [colorMatrix1， colorMatrix2]；

//調(diào)整亮度

colorMatrix1.brightness（bright）；

//調(diào)整對比度

colorMatrix2.contrast（contrast）；

裁剪功能需要通過獲取用戶點擊鼠標(biāo)的坐標(biāo)計算裁剪區(qū)域，流程圖如圖3所示。

首先注冊鼠標(biāo)事件處理函數(shù)，再根據(jù)鼠標(biāo)事件坐標(biāo)完成計算，部分代碼如下：

//注冊鼠標(biāo)事件處理函數(shù)

container.on（'pointerdown'，onPointerDown）

.on（'pointerup'， onPointerUp）

.on（'pointermove'， onPointerMove）；

function onPointerDown（event） {

//生成裁剪后底圖紋理，并生成顯示Sprite

var ns = new PIXI.Sprite（

new PIXI.Texture（s.texture，

new PIXI.Rectangle（minX-container.x， minY-container.y， trimWidth， trimHeight）））；

2 結(jié) 論

本文利用WebGL技術(shù)設(shè)計并實現(xiàn)了一套DR設(shè)備模擬教學(xué)系統(tǒng)，系統(tǒng)高度模擬真實設(shè)備操作效果。系統(tǒng)采用B/S架構(gòu)，無需安裝客戶端軟件，可多人同時模擬實驗，解決了教學(xué)中設(shè)備不足，真實設(shè)備操作難以實施的問題，提高了學(xué)生實驗課程學(xué)習(xí)效果。同時系統(tǒng)提供模擬影像管理和實驗評判等功能，方便教師實驗設(shè)計和教學(xué)過程的實施。

參考文獻(xiàn)：

[1] 齊現(xiàn)英，魯雯，韓豐談，等.虛擬仿真教學(xué)在《醫(yī)學(xué)影像設(shè)備學(xué)》教學(xué)中的研究與應(yīng)用 [J].中國醫(yī)學(xué)物理學(xué)雜志，2012，29（1）：3208-3210.

[2] 汪浩，田豐，張文俊.基于WebGL的交互平臺設(shè)計與實現(xiàn) [J].電子測量技術(shù)，2015，38（8）：119-122.

[3] 霍冬，鄭偉華，盛步云.基于WebGL的機械產(chǎn)品三維展示技術(shù)研究 [J].制造業(yè)自動化，2013，35（9）：73-77.

[4] 薛峰，梁鋒，徐書勛，等.基于SpringMVC 框架的Web研究與應(yīng)用 [J].合肥工業(yè)大學(xué)學(xué)報，2012，35（3）：337-340.

作者簡介：劉超（1985.06-），男，漢族，安徽鳳陽人，工程師，碩士。研究方向：計算系統(tǒng)結(jié)構(gòu)。