一種DR設備教學模擬系統的設計與實現

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

關鍵詞：OpenGL；MVC；Spring MVC；模擬系統

中圖分類號：TP391.41文獻標識碼：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 引 言

當前信息技術的快速進步，推動著各個行業領域的信息化和數字化發展。而在醫療衛生領域，隨著數字化成像技術成熟，數字化醫療設備在功能和使用上相對傳統膠片成像設備有著多方面的優勢，并逐漸取代傳統設備。在影像呈現方面，數字化設備可利用計算機圖像處理相關技術動態調節圖像參數，突出顯示圖像細節部分。

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

為解決以上教學中的問題，本文利用WebGL和Java等相關技術設計并實現了一套DR設備的教學模擬系統。系統采用B/S架構，可高度模擬仿真設備的實際操作效果。教師在系統內可預設多個不同教學案例，學生使用網頁形式登陸系統，并執行相關實驗操作。實驗結束系統自動生成實驗報告，教師可利用系統對學生實驗結果進行評判。

1 系統實現關鍵技術

1.1 WebGL技術

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

1.2 MVC

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

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

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

1.3 功能設計

系統主要目標為一個功能完善的教學模擬系統，解決現實條件下難以利用實際設備完成學生實驗課程。系統功能模塊如圖1所示。

圖1 模擬系統功能模塊

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

1.4 系統總體結構設計

系統總體采用B/S架構，服務端采用Spring MVC+JPA技術，系統架構圖如圖2所示。

1.5 關鍵功能實現

1.5.1 服務端環境搭建

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

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 服務端模型層實現

模型層使用Hibernate實現O/R映射，將數據庫中關系型數據映射為系統中模型和對象。利用Spring Data JPA的Crud Repository接口簡化對數據的Crud操作實現。系統中學生模型部分代碼如下：

@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接口生成代理對象，通過注入代理對象并調用對象相應方法即可實現對學生信息的查詢、修改等基本操作。

1.5.3 客戶端創建WebGL顯示區域

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

app=new PIXI.Application（）；

app.renderer.autoResize=true；

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

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

container=new PIXI.Container（）；

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

container=new PIXI.Container（）；

container.addChild（imgSprite）；

1.5.4 圖像處理模擬

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

//縮放

container.scale.x=scale；

container.scale.y=scale；

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

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

//旋轉

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

//建立亮度、對比度ColorMatrixFilter

colorMatrix1=new PIXI.filters.ColorMatrixFilter（）；

colorMatrix2=new PIXI.filters.ColorMatrixFilter（）；

container.filters = [colorMatrix1， colorMatrix2]；

//調整亮度

colorMatrix1.brightness（bright）；

//調整對比度

colorMatrix2.contrast（contrast）；

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

首先注冊鼠標事件處理函數，再根據鼠標事件坐標完成計算，部分代碼如下：

//注冊鼠標事件處理函數

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 結 論

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

參考文獻：

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

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

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

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

作者簡介：劉超（1985.06-），男，漢族，安徽鳳陽人，工程師，碩士。研究方向：計算系統結構。