繆曉燕 楊雋穎

摘 要：教師在課程教育過(guò)程中恰當(dāng)?shù)氖褂眯畔⒒侄慰梢源蟠蠹ぐl(fā)學(xué)生的學(xué)習(xí)興趣。本文開(kāi)發(fā)了一個(gè)教育輔助軟件，讓學(xué)生完成藍(lán)印花布圖案和海寧皮影元素的設(shè)計(jì)，由此訓(xùn)練學(xué)生判斷、分析和評(píng)估等多方面的能力;同時(shí)，通過(guò)信息化技術(shù)實(shí)現(xiàn)和規(guī)范教學(xué)資源，有助于我們進(jìn)行教學(xué)評(píng)價(jià)。

關(guān)鍵詞：服飾基本樣式庫(kù)的管理;異步交互;結(jié)構(gòu)化數(shù)據(jù)庫(kù)

中圖分類(lèi)號(hào)：G712 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1671-2064（2019）14-0034-02

1 系統(tǒng)實(shí)現(xiàn)技術(shù)

整個(gè)軟件以實(shí)時(shí)從服務(wù)器端獲取、處理與顯示圖片為主要核心功能在線設(shè)計(jì)的平臺(tái)。軟件的主要目的是提供網(wǎng)絡(luò)平臺(tái)，讓學(xué)生完成藍(lán)印花布圖案和海寧皮影元素的設(shè)計(jì)。系統(tǒng)主要采用如下幾項(xiàng)技術(shù)實(shí)現(xiàn)：

1.1 XAML

XAML即可擴(kuò)展應(yīng)用程序標(biāo)記語(yǔ)言，是微軟公司創(chuàng)建的一種可擴(kuò)展，易定位的語(yǔ)音來(lái)構(gòu)建用戶(hù)界面，實(shí)現(xiàn)了與程序邏輯的分離。

1.2 Microsoft Silverlight

Microsoft Silverlight可方便地集成到現(xiàn)有的WEB或客戶(hù)端應(yīng)用程序中，可跨平臺(tái)平臺(tái)運(yùn)行中，帶給我們一致的內(nèi)容豐富、視覺(jué)效果絢麗的交互式體驗(yàn)。

1.3 WebService

WebService是一個(gè)可以遠(yuǎn)程調(diào)用的類(lèi)（組件），把本地的功能開(kāi)放出去共他人調(diào)用。

具體調(diào)用WebService的流程：

第一步，通過(guò)添加WebService的引用，加入web service服務(wù)。

第二步，調(diào)用方法的參數(shù)值設(shè)置。

第三步，生成調(diào)用WebService方法的SOAP請(qǐng)求信息。

第四步，創(chuàng)建操作類(lèi)對(duì)象。

通過(guò)類(lèi)的構(gòu)造方法可以指定WebService的WSDL文檔的URL，如：

WSws=new WS （“http：//192.168.1.1/imageDesign/ImageWS.asmx”）;。

第五步，調(diào)用WebService方法。使用異步數(shù)據(jù)訪問(wèn)方法調(diào)用WebService方法，如：ws.LoginAsync（Name， Pwd）;。

第六步，獲取返回值。使用EventHandler方法獲得WebService方法的返回結(jié)果。

2 系統(tǒng)框架結(jié)構(gòu)

系統(tǒng)采用MVVM框架結(jié)構(gòu)，即Model-View-ViewModel。這種模式跟MVP模式相似，只是對(duì)它進(jìn)行了相應(yīng)改進(jìn)。View這里跟MVP中的View是一樣的，負(fù)責(zé)頁(yè)面展現(xiàn);ViewModel是對(duì)應(yīng)于View的頁(yè)面模型，包含與View想對(duì)應(yīng)的屬性與行為;Model可以分為業(yè)務(wù)模型與實(shí)體模型。通過(guò)這種方式，我們可以實(shí)現(xiàn)頁(yè)面與邏輯的分析，只有我們的ViewModel不變，那么View既可以用WPF，也可以用SilverLight等來(lái)展現(xiàn)。

隨著SilverLight技術(shù)與WCF的不斷完善，也使我們可以更靈活的搭建相應(yīng)框架。在Service Layer，采用了Domain Service來(lái)處理Client與Service間的通信，Domain service也是一種WCF通信方式，只不過(guò)是對(duì)它進(jìn)行了封裝，使我們不用去關(guān)心具體的通信問(wèn)題;Domain Model采用了Ado.net Entity Data來(lái)處理數(shù)據(jù)連接。

這里分為Client與Server兩部分：Client主要是負(fù)責(zé)頁(yè)面展現(xiàn)及相應(yīng)的頁(yè)面模型;Server則負(fù)責(zé)業(yè)務(wù)邏輯處理。

（1）Client。Mvvm.Client：View，這里是我們要實(shí)現(xiàn)的UI展現(xiàn)，可以用SilverLight、WPF等;

Mvvm.Client.ViewModel：ViewModel，包含與View相對(duì)應(yīng)的屬性與行為;

（2）Server。Mvvm.Server.Data：Entity Model，實(shí)體模型，我們可以添加一個(gè)Ado.net Entity Data Model來(lái)實(shí)現(xiàn)與數(shù)據(jù)庫(kù)的通信;

Mvvm.Server.DataService：Data Service，數(shù)據(jù)服務(wù)，通過(guò)它進(jìn)行相對(duì)應(yīng)的數(shù)據(jù)操作;

Mvvm.Server.RiaService：Ria Service，業(yè)務(wù)服務(wù)，通過(guò)它調(diào)用DataService的數(shù)據(jù)服務(wù)來(lái)操作Entity Model，并且實(shí)現(xiàn)與Client端ViewModel的通信;我們可以添加一個(gè)Domain Service來(lái)實(shí)現(xiàn)。同時(shí)，還有一個(gè)DtoModels文件夾，這里放置的是與View屬性相對(duì)應(yīng)的模型。Ria Service通過(guò)Data Service來(lái)操作Entity model，此時(shí)返回的是與數(shù)據(jù)庫(kù)相對(duì)應(yīng)的實(shí)體模型，所以需要轉(zhuǎn)換為與View相對(duì)應(yīng)的模型，我們將這些類(lèi)放在DtoModels文件夾下，相互間的轉(zhuǎn)換可以采用AutoMapper或Linq來(lái)實(shí)現(xiàn)。

Mvvm.Server.Web： web應(yīng)用程序。

3 功能說(shuō)明

3.1 功能結(jié)構(gòu)

主要功能包括圖片庫(kù)管理、圖片處理、多圖片處理和設(shè)計(jì)結(jié)果處理四個(gè)模塊。

3.2 功能簡(jiǎn)述

（1）圖片庫(kù)管理模塊：主要完成圖片的管理，包括添加和修改。主要以文件的是形式存儲(chǔ)在服務(wù)器端。采用一步動(dòng)態(tài)加添的方式，完成相關(guān)操作;

（2）圖片處理模塊：主要包括：圖片元素的網(wǎng)頁(yè)拖拽功能;圖片元素?zé)o極放大縮小功能;圖片全角度旋轉(zhuǎn)功能;

（3）多圖片處理模塊：主要完成多圖片的拼接功能;

（4）設(shè)計(jì)結(jié)果處理模塊：主要完成圖片的設(shè)計(jì)結(jié)果的網(wǎng)頁(yè)截圖功能。

4 系統(tǒng)實(shí)現(xiàn)說(shuō)明

如圖1所示，系統(tǒng)實(shí)現(xiàn)的解決方案主要包括兩個(gè)項(xiàng)目，ImageSet設(shè)計(jì)項(xiàng)目和ImageSet.Web項(xiàng)目。ImageSet項(xiàng)目主要完成項(xiàng)目的核心功能的實(shí)現(xiàn)。ImageSet.Web項(xiàng)目，主要完成圖片的庫(kù)的管理與維護(hù)和網(wǎng)路服務(wù)的支撐平臺(tái)。

項(xiàng)目主要通過(guò)按鈕控件的Click事件，完成基本的操作;通過(guò)MouseDown，MouseUp，MouseMove事件完成圖片的旋轉(zhuǎn)操作;通過(guò)MouseWheel事件完成圖片的放大和縮小;通過(guò)TextChanged事件完成圖片大小的手動(dòng)調(diào)整。

系統(tǒng)實(shí)現(xiàn)的核心類(lèi)MainPage主要包括鼠標(biāo)俘獲狀態(tài)字段isMousecaptured;屏幕截屏矩形區(qū)域?qū)傩宰侄蝘tem;鼠標(biāo)水平方向字段mouseHorizontalPosition和鼠標(biāo)垂直方向字段mouseVerticalPosition;旋轉(zhuǎn)角度字段rtAngel。

如圖2所示，為系統(tǒng)實(shí)現(xiàn)后的Web頁(yè)面設(shè)計(jì)區(qū)域截圖。該區(qū)域主要完成圖片的拖拽、放大、縮小、旋轉(zhuǎn)等設(shè)計(jì)的操作區(qū)域。此外，截屏保存功能也在該區(qū)域完成。該區(qū)域?yàn)榘咨尘皡^(qū)域。

通過(guò)手工錄入的方式或者右側(cè)滑動(dòng)條的方式可以設(shè)置圖片的寬度;

通過(guò)手工錄入的方式或者右側(cè)滑動(dòng)條的方式可以設(shè)置圖片的高度;通過(guò)手工錄入的方式設(shè)置圖片的左上角坐標(biāo)點(diǎn)的X，Y值。在值發(fā)生修改后，圖片自動(dòng)改變位置。同時(shí)，通過(guò)在設(shè)計(jì)區(qū)域的拖拽方法，可以改變X，Y文本框的值;

通過(guò)手工錄入的方式設(shè)置圖片的旋轉(zhuǎn)的角度值。在值發(fā)生修改后，圖片自動(dòng)改變顯示角度。同時(shí)，通過(guò)鼠標(biāo)滾動(dòng)軸的上下滾動(dòng)可以改變角度文本框的值;系統(tǒng)實(shí)現(xiàn)后的Web頁(yè)面素材庫(kù)操作區(qū)主要完成圖片素材庫(kù)的添加和刪除操作。點(diǎn)擊添加素材，可以完成圖片庫(kù)的添加，且保存到服務(wù)器中;在設(shè)計(jì)區(qū)域點(diǎn)擊某圖片后，點(diǎn)擊素材刪除，可以完成設(shè)計(jì)區(qū)域圖片的刪除;點(diǎn)擊保存圖片，完成出現(xiàn)一矩形選擇區(qū)域，進(jìn)而完成圖片的截圖保存。

5 項(xiàng)目的意義

通過(guò)信息化技術(shù)實(shí)現(xiàn)和規(guī)范教學(xué)資源，有助于我們進(jìn)行教學(xué)評(píng)價(jià)。我們要避免信息技術(shù)與課程脫節(jié)，只有將信息技術(shù)和課程融為一體，信息化才能發(fā)揮良好的作用。同時(shí)，優(yōu)化配置信息資源并對(duì)信息化建設(shè)的質(zhì)量和發(fā)展?jié)摿M(jìn)行全面評(píng)價(jià)才能很好地引導(dǎo)課程信息化建設(shè)的發(fā)展方向。