服裝設計專業課程的信息化建設與改革

繆曉燕 楊雋穎

摘 要：教師在課程教育過程中恰當的使用信息化手段可以大大激發學生的學習興趣。本文開發了一個教育輔助軟件，讓學生完成藍印花布圖案和海寧皮影元素的設計，由此訓練學生判斷、分析和評估等多方面的能力;同時，通過信息化技術實現和規范教學資源，有助于我們進行教學評價。

關鍵詞：服飾基本樣式庫的管理;異步交互;結構化數據庫

中圖分類號：G712 文獻標識碼：A 文章編號：1671-2064（2019）14-0034-02

1 系統實現技術

整個軟件以實時從服務器端獲取、處理與顯示圖片為主要核心功能在線設計的平臺。軟件的主要目的是提供網絡平臺，讓學生完成藍印花布圖案和海寧皮影元素的設計。系統主要采用如下幾項技術實現：

1.1 XAML

XAML即可擴展應用程序標記語言，是微軟公司創建的一種可擴展，易定位的語音來構建用戶界面，實現了與程序邏輯的分離。

1.2 Microsoft Silverlight

Microsoft Silverlight可方便地集成到現有的WEB或客戶端應用程序中，可跨平臺平臺運行中，帶給我們一致的內容豐富、視覺效果絢麗的交互式體驗。

1.3 WebService

WebService是一個可以遠程調用的類（組件），把本地的功能開放出去共他人調用。

具體調用WebService的流程：

第一步，通過添加WebService的引用，加入web service服務。

第二步，調用方法的參數值設置。

第三步，生成調用WebService方法的SOAP請求信息。

第四步，創建操作類對象。

通過類的構造方法可以指定WebService的WSDL文檔的URL，如：

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

第五步，調用WebService方法。使用異步數據訪問方法調用WebService方法，如：ws.LoginAsync（Name， Pwd）;。

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

2 系統框架結構

系統采用MVVM框架結構，即Model-View-ViewModel。這種模式跟MVP模式相似，只是對它進行了相應改進。View這里跟MVP中的View是一樣的，負責頁面展現;ViewModel是對應于View的頁面模型，包含與View想對應的屬性與行為;Model可以分為業務模型與實體模型。通過這種方式，我們可以實現頁面與邏輯的分析，只有我們的ViewModel不變，那么View既可以用WPF，也可以用SilverLight等來展現。

隨著SilverLight技術與WCF的不斷完善，也使我們可以更靈活的搭建相應框架。在Service Layer，采用了Domain Service來處理Client與Service間的通信，Domain service也是一種WCF通信方式，只不過是對它進行了封裝，使我們不用去關心具體的通信問題;Domain Model采用了Ado.net Entity Data來處理數據連接。

這里分為Client與Server兩部分：Client主要是負責頁面展現及相應的頁面模型;Server則負責業務邏輯處理。

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

Mvvm.Client.ViewModel：ViewModel，包含與View相對應的屬性與行為;

（2）Server。Mvvm.Server.Data：Entity Model，實體模型，我們可以添加一個Ado.net Entity Data Model來實現與數據庫的通信;

Mvvm.Server.DataService：Data Service，數據服務，通過它進行相對應的數據操作;

Mvvm.Server.RiaService：Ria Service，業務服務，通過它調用DataService的數據服務來操作Entity Model，并且實現與Client端ViewModel的通信;我們可以添加一個Domain Service來實現。同時，還有一個DtoModels文件夾，這里放置的是與View屬性相對應的模型。Ria Service通過Data Service來操作Entity model，此時返回的是與數據庫相對應的實體模型，所以需要轉換為與View相對應的模型，我們將這些類放在DtoModels文件夾下，相互間的轉換可以采用AutoMapper或Linq來實現。

Mvvm.Server.Web： web應用程序。

3 功能說明

3.1 功能結構

主要功能包括圖片庫管理、圖片處理、多圖片處理和設計結果處理四個模塊。

3.2 功能簡述

（1）圖片庫管理模塊：主要完成圖片的管理，包括添加和修改。主要以文件的是形式存儲在服務器端。采用一步動態加添的方式，完成相關操作;

（2）圖片處理模塊：主要包括：圖片元素的網頁拖拽功能;圖片元素無極放大縮小功能;圖片全角度旋轉功能;

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

（4）設計結果處理模塊：主要完成圖片的設計結果的網頁截圖功能。

4 系統實現說明

如圖1所示，系統實現的解決方案主要包括兩個項目，ImageSet設計項目和ImageSet.Web項目。ImageSet項目主要完成項目的核心功能的實現。ImageSet.Web項目，主要完成圖片的庫的管理與維護和網路服務的支撐平臺。

項目主要通過按鈕控件的Click事件，完成基本的操作;通過MouseDown，MouseUp，MouseMove事件完成圖片的旋轉操作;通過MouseWheel事件完成圖片的放大和縮小;通過TextChanged事件完成圖片大小的手動調整。

系統實現的核心類MainPage主要包括鼠標俘獲狀態字段isMousecaptured;屏幕截屏矩形區域屬性字段item;鼠標水平方向字段mouseHorizontalPosition和鼠標垂直方向字段mouseVerticalPosition;旋轉角度字段rtAngel。

如圖2所示，為系統實現后的Web頁面設計區域截圖。該區域主要完成圖片的拖拽、放大、縮小、旋轉等設計的操作區域。此外，截屏保存功能也在該區域完成。該區域為白色背景區域。

通過手工錄入的方式或者右側滑動條的方式可以設置圖片的寬度;

通過手工錄入的方式或者右側滑動條的方式可以設置圖片的高度;通過手工錄入的方式設置圖片的左上角坐標點的X，Y值。在值發生修改后，圖片自動改變位置。同時，通過在設計區域的拖拽方法，可以改變X，Y文本框的值;

通過手工錄入的方式設置圖片的旋轉的角度值。在值發生修改后，圖片自動改變顯示角度。同時，通過鼠標滾動軸的上下滾動可以改變角度文本框的值;系統實現后的Web頁面素材庫操作區主要完成圖片素材庫的添加和刪除操作。點擊添加素材，可以完成圖片庫的添加，且保存到服務器中;在設計區域點擊某圖片后，點擊素材刪除，可以完成設計區域圖片的刪除;點擊保存圖片，完成出現一矩形選擇區域，進而完成圖片的截圖保存。

5 項目的意義

通過信息化技術實現和規范教學資源，有助于我們進行教學評價。我們要避免信息技術與課程脫節，只有將信息技術和課程融為一體，信息化才能發揮良好的作用。同時，優化配置信息資源并對信息化建設的質量和發展潛力進行全面評價才能很好地引導課程信息化建設的發展方向。