高梓越， 叢洪蓮， 蔣高明， 王 薇， 湯夢婷， 于璐璐

(1. 江南大學 教育部針織技術工程研究中心，江蘇 無錫 214122;2. 生態(tài)紡織教育部重點實驗室(江南大學)， 江蘇 無錫 214122)

基于超文本標記語言5的橫編計算機輔助設計系統(tǒng)

高梓越1,2， 叢洪蓮1,2， 蔣高明1,2， 王 薇1,2， 湯夢婷1,2， 于璐璐1,2

(1. 江南大學 教育部針織技術工程研究中心，江蘇 無錫 214122;2. 生態(tài)紡織教育部重點實驗室(江南大學)， 江蘇 無錫 214122)

為滿足橫編針織物在線設計的需求，在傳統(tǒng)橫編計算機輔助設計(CAD)的基礎上，基于超文本標記語言5(HTML5)技術設計并實現(xiàn)互聯(lián)網(wǎng)橫編CAD系統(tǒng)。根據(jù)橫編針織物的設計特點和成形原理，分別對花型數(shù)據(jù)和成形數(shù)據(jù)進行數(shù)學建模和數(shù)據(jù)結構優(yōu)化，實現(xiàn)多視圖設計和成形工藝設計。同時，結合數(shù)據(jù)庫技術開發(fā)款式與組織庫自定義的功能，并在研究花型編譯的基礎上，實現(xiàn)上機文件的生成。此外，研究了軟件架構，基于B/S模式將程序部署在服務器上，系統(tǒng)的運行則在客戶端，從而實現(xiàn)了數(shù)據(jù)處理與顯示的分離。最后，通過提花圍巾設計實例進行系統(tǒng)檢驗，結果表明該系統(tǒng)設計織物直觀方便效率高，滿足橫編針織物在線設計的需求。

在線設計； 橫編針織物； 數(shù)據(jù)庫； 超文本標記語言5

橫編計算機輔助設計(CAD)發(fā)展至今，在毛衫設計、成形工藝、制版設計等功能上已具有很高的實用性[1]，但在互聯(lián)網(wǎng)時代，國內(nèi)外的橫編CAD軟件都沒有賦予其互聯(lián)網(wǎng)的內(nèi)容，依然存在安裝維護成本高、過于封閉、擴展性差等缺點[2]，既不能面向產(chǎn)品的生產(chǎn)全過程，也不能滿足互聯(lián)網(wǎng)時代隨時隨地設計的需求。

開發(fā)互聯(lián)網(wǎng)橫編CAD系統(tǒng)，并不是簡單地將單機軟件移植到瀏覽器上，互聯(lián)網(wǎng)應用程序的開發(fā)環(huán)境、開發(fā)語言與單機軟件的差異，以及瀏覽器本身的局限性阻礙了橫編CAD系統(tǒng)網(wǎng)絡化的進程。本文將超文本標記語言5(HTML5)技術應用于開發(fā)橫編CAD系統(tǒng)，提升系統(tǒng)交互的可靠性與操作的流暢性，將程序安裝在遠程服務器上，用戶通過瀏覽器訪問系統(tǒng)。

1 基于HTML5的橫編CAD系統(tǒng)

針對橫編CAD互聯(lián)網(wǎng)化的需求，本文采用HTML5技術開發(fā)橫編CAD系統(tǒng)，其主要特點有：1)采用HTML5技術，解決瀏覽器的交互性與兼容性，并提高設計花型的效率；2)在云端集中存儲數(shù)據(jù)，后臺使用基于SQL Server的數(shù)據(jù)庫技術，保證了數(shù)據(jù)安全性，提高了數(shù)據(jù)管理的效率和數(shù)據(jù)處理的流暢性；3)提供款式與組織自定義功能，用戶可自行設計款式與組織并保存，以重復使用。

1.1 界面交互

本文實現(xiàn)瀏覽器的交互性能主要應用HTML5中的繪圖功能，即Canvas元素，Canvas元素作為HTML5新添加的功能，提供了功能強大的繪圖方法，可很方便地繪制路徑、矩形、圓弧、字符以及添加圖像，繪圖效率大幅提升[3]。

在使用橫編CAD系統(tǒng)的設計功能時，如圖1所示。選取織針編織動作、顏色、矩形繪圖工具，即可在系統(tǒng)的花型設計區(qū)域繪制帶有編織動作的綠色矩形圖案，在繪制過程中應用到離屏Canvas進行圖像換色，應用JS函數(shù)監(jiān)聽Mousedown、Mouseup事件繪制矩形并改變相應位置數(shù)組的值。

圖1 橫編CAD交互示例Fig.1 Example of interaction of flat knitting CAD

此外，HTML5還可添加監(jiān)聽其他鼠標事件和鍵盤事件，通過監(jiān)聽這些操作事件并編寫相應的執(zhí)行函數(shù)提高瀏覽器的交互性，如鼠標滾輪縮放圖像、Ctrl+z撤銷操作等。同時，各大瀏覽器對HTML5具有良好的兼容性，在電腦、手機上都可穩(wěn)定運行。經(jīng)實測，各繪圖工具繪制花型方便，鼠標鍵盤事件相應快速準確，不同視圖之間切換流暢，滿足設計者的需求。

1.2 云端數(shù)據(jù)庫

每個橫編產(chǎn)品包含大量的花型數(shù)據(jù)、工藝數(shù)據(jù)與織造數(shù)據(jù)，傳統(tǒng)的單機版橫編CAD往往生成一個或多個文件存儲數(shù)據(jù)，管理十分困難。與之不同，本文基于HTML5開發(fā)的橫編CAD系統(tǒng)使用SQL Server數(shù)據(jù)庫技術在云端集中存儲數(shù)據(jù)，集中存儲數(shù)據(jù)既保證數(shù)據(jù)的安全又便于對數(shù)據(jù)的管理。利用云端數(shù)據(jù)庫技術極大地方便了用戶對產(chǎn)品數(shù)據(jù)的存取調(diào)用，即用戶無論在何時何地，使用任何設備都可訪問數(shù)據(jù)庫。也方便不同用戶之間對產(chǎn)品的共享與協(xié)作，即用戶可選擇共享自己的產(chǎn)品數(shù)據(jù)，其他用戶可查看并使用。

當用戶在查找產(chǎn)品時，橫編CAD系統(tǒng)向服務器發(fā)送HTTP響應，服務器發(fā)送指令查詢數(shù)據(jù)庫數(shù)據(jù)，若數(shù)據(jù)庫中存在數(shù)據(jù)則返回給服務器，不存在數(shù)據(jù)則不返回，服務器發(fā)送HTTP響應給用戶，用戶即可得到所查找產(chǎn)品的所有數(shù)據(jù)。同時SQL與后臺ASP.NET有天然的兼容性，可擴展性強，如圖2所示。

圖2 查找產(chǎn)品示意圖Fig.2 Diagram of search product

1.3 款式與組織自定義

在設計橫編產(chǎn)品過程中，款式與組織的重復使用能有效提高設計的效率。用戶往往自行設計一些款式或組織結構，在之后的設計中循環(huán)調(diào)用，這種一次設計，多次使用的方法很大程度地減少工作量[4]，因此，本文系統(tǒng)設計款式與組織數(shù)據(jù)庫，提供存儲自定義款式與自定義組的功能。同產(chǎn)品數(shù)據(jù)一樣，用戶可隨時隨地管理、共享款式與組織數(shù)據(jù)。

2 橫編CAD系統(tǒng)的架構

橫編CAD系統(tǒng)架構圖如圖3所示。本文系統(tǒng)架構遵循B/S架構，主要分為3層：基于PC、手機等各客戶端的設計層、基于Web服務器的實現(xiàn)層和基于數(shù)據(jù)庫服務器的存儲層[5]。這樣的架構具有將數(shù)據(jù)的邏輯處理與數(shù)據(jù)的顯示分離、易于交互、可擴展性強等特點。具體各層功能如下所述：1)設計層：本層主要由用戶和客戶端瀏覽器組成。運用HTML5和JavaScript提高瀏覽器的交互性，用戶在客戶端瀏覽器上進行橫編產(chǎn)品的花型設計與工藝設計，通過HTTP與TCP/IP協(xié)議向Web服務器傳輸數(shù)據(jù)，同時接受Web服務器返回的數(shù)據(jù)，將結果展示給用戶。2)處理層：本層由Web服務器組成。應用ASP.NET C#開發(fā)后臺程序隨時接受客戶端發(fā)送的數(shù)據(jù)并進行處理，并通過SQL語句與數(shù)據(jù)庫服務器相連，本層主要實現(xiàn)不同層中數(shù)據(jù)格式的解析、轉(zhuǎn)換與傳遞。3)存儲層：本層由數(shù)據(jù)庫服務器組成。運用SQL Server數(shù)據(jù)庫技術完成數(shù)據(jù)在云端的存儲與調(diào)用，接受、執(zhí)行服務器發(fā)送的指令并返回數(shù)據(jù)。本層具有較高的安全性，保證了用戶數(shù)據(jù)的完整。

圖3 系統(tǒng)架構圖Fig.3 System architecture diagram

3 系統(tǒng)功能及其實現(xiàn)

3.1 系統(tǒng)的功能模塊

橫編CAD系統(tǒng)的主要功能如圖4所示，包括織物設計模塊、工藝設計模塊、數(shù)據(jù)輸出模塊和產(chǎn)品數(shù)據(jù)庫模塊4部分[6]。

圖4 系統(tǒng)功能模塊圖Fig.4 System functional diagram

3.1.1織物設計模塊

該模塊遵循多視圖設計原則，設計時可在花型意匠圖、編織工藝圖與線圈結構圖間進行切換，每種視圖以不同的形式表達花型，且具備基本的繪圖工具，均可便捷的編輯花型。設計完花型后，可依據(jù)設計選擇提花類型與提花區(qū)域完成提花編輯[7]。

3.1.2工藝設計模塊

該模塊提供款式數(shù)據(jù)庫，每種款式都有對應的規(guī)格數(shù)據(jù)默認值，通過編輯這些數(shù)據(jù)進行款式設計，并將自動計算衣片的成形工藝[8]，工藝同時保存在數(shù)據(jù)庫中，可隨時讀取編輯與修改。

3.1.3數(shù)據(jù)輸出模塊

本模塊中花型數(shù)據(jù)編譯與檢驗并行，檢驗的目的為發(fā)現(xiàn)花型程序化錯誤的地方，程序有誤則停止編譯，并指出錯誤原因，在編譯完成后可導出電腦橫機的上機文件，即可上機完成編織。

3.1.4數(shù)據(jù)庫模塊

該模塊是系統(tǒng)區(qū)別于現(xiàn)有的橫編CAD系統(tǒng)的特征之一，完備的數(shù)據(jù)庫提供產(chǎn)品信息的存儲、查詢、讀取的功能。同時為組織庫、款式庫提供數(shù)據(jù)支持。

3.2 系統(tǒng)主要功能的實現(xiàn)

3.2.1多視圖設計

為完整清晰地表示編織過程，可采用3種視圖進行花型設計。不同視圖可任意切換，且在任一視圖上編輯，另2個視圖均會作出相應變化，因此首先要對花型信息與參數(shù)信息進行數(shù)學建模與數(shù)據(jù)結構設計。

1)花型信息。花型信息即所有工藝點信息，每個工藝點信息主要包括編織動作與紗線顏色[9]，因此可將工藝點信息定義為一維矩陣P，如下式所示：

P=[kc]

(1)

式中：k為編織動作，用數(shù)字1～17表示；c為紗線顏色，數(shù)字1～36表示不同的顏色。

工藝行數(shù)為m，針數(shù)為n的花型信息可用而二維矩陣F表示，如下式所示。

(2)

式中：i=1,2,…,m；j=1,2,…,n；Pij表示在第i行第j根針的工藝點信息。

采用JavaScript語言對花型信息進行數(shù)據(jù)結構設計，將花型信息定義為動態(tài)的二維結構體數(shù)組。

2)參數(shù)信息。參數(shù)信息即所有工藝行的編織信息，每行的工藝行信息主要包括機頭方向、工作系統(tǒng)、牽拉、機速、密度、紗嘴等。工藝行數(shù)為m，參數(shù)種類數(shù)為n的參數(shù)信息可用二維矩陣A表示，如下式所示。

(3)

式中：i=1,2,…,m；j=1,2,…,n。aij表示在第i行第j種參數(shù)的值。

參數(shù)信息的數(shù)據(jù)結構設計同花型信息，定義為動態(tài)的二位結構體數(shù)組。

3種視圖包含全部或部分花型信息與參數(shù)信息，因此在設計界面建立4個元素，內(nèi)容如圖5所示，依次顯示參數(shù)種類、參數(shù)信息、針位、工藝點信息?；ㄐ鸵饨硤D顯示花型行信息如圖6所示。底色為紗線顏色或動作顏色，通過切換顯示模式查看顏色提花或結構提花，符號為編織動作。編織工藝圖顯示工藝行信息，底色為紗線顏色，符號為前后針床編織動作。線圈結構圖顯示標準化的線圈結構，通過編輯顏色和編織動作實時查看線圈結構的變化。

圖5 設計視圖區(qū)域顯示內(nèi)容Fig.5 Display contents of design view

圖6 多視圖設計Fig.6 Multiple view. (a) Pattern view; (b) Technical view; (c)Loop relation view

在視圖切換過程中，2個結構體數(shù)組要在不同視圖間傳值，前端即HTML5使用hidden控件，后端即ASP.NET使用Session對象，可以保證數(shù)據(jù)轉(zhuǎn)換的效率與安全。

3.2.2工藝設計

工藝設計主要指成形工藝設計，最主要的方法是收放針成形方法，根據(jù)收放針成形的原理可得出成形工藝數(shù)據(jù)的特點：1)成形數(shù)據(jù)包含整件服裝的成形信息；2)服裝成形信息由每個衣片的成形信息組成；3)每一衣片的數(shù)據(jù)由不同形狀的部件信息組成；4)每一部件的信息由不同編織方式的段信息組成；5)每一段的信息由不同收放針的條信息組成；6)每一級信息除了包含下一級的信息外，還包含應用于本級的信息，如片信息中的橫縱密、起始針數(shù)等，部信息中的花型行數(shù)、變化針數(shù)等，條信息中的循環(huán)次數(shù)等，因此成形數(shù)據(jù)的結構應設計為4級結構體數(shù)組(如圖7所示)，由上到下依次為片信息、部信息、段信息和條信息。

圖7 成形數(shù)據(jù)結構示意圖Fig.7 Structural diagram of shaping data

工藝設計由模型編輯對話框完成，主要的設計流程如圖8所示。在成形編輯完成后，系統(tǒng)將成形信息與組織點信息進行合成，顯示到底組織上。

圖8 工藝設計主要流程圖Fig.8 Flow chart of technological designs

3.2.3花型編譯與文件輸出

花型編譯是花型數(shù)據(jù)轉(zhuǎn)程序化的過程，其具體流程如圖9所示，在編譯中要完善編織過程，即減少不必要的編織與增加輔助編織，同時合理安排機頭方向減少行程數(shù)、優(yōu)化分配系統(tǒng)縮短機頭動程[10]?；ㄐ途幾g的目的是導出上機文件，以STOLL電腦橫機為例，需要JAC、SET、SIN 3個文件，SIN控制編織系統(tǒng)，JAC控制織針編織動作，SET控制編織參數(shù)(密度、牽拉等)，3個文件相輔相成，共同作用。除此之外，還可導出花型文件，直接保存花型數(shù)據(jù)與工藝數(shù)據(jù)。

圖9 花型編譯流程圖Fig.9 Flow chart of pattern compile

3.2.4數(shù)據(jù)庫

通過SQL語言與數(shù)據(jù)庫相連，對數(shù)據(jù)進行管理。在數(shù)據(jù)庫中建立與花型數(shù)據(jù)信息相對應的字段，并設置序號為主鍵，進行編輯與刪除等操作時對主鍵對應的數(shù)據(jù)進行操作。檢索設置多字段模糊查詢，檢索結果精確且快速。除建立個人或企業(yè)數(shù)據(jù)庫，還有公共數(shù)據(jù)庫，用戶可上傳共享自己設計的產(chǎn)品，提高行業(yè)內(nèi)部交流協(xié)作程度。

4 系統(tǒng)設計實例

以提花圍巾產(chǎn)品為例，設計過程主要分一下幾步。

1)導入BMP圖片，如圖10所示。選擇文件菜單中的花型導入，通過對話框選擇需要導入的圖案，系統(tǒng)將自動跳轉(zhuǎn)到換色界面，用戶根據(jù)需要將圖片中顏色換為系統(tǒng)色號。確定后系統(tǒng)會以圖案的大小作為花高花寬。

圖10 導入BMP示意圖Fig.10 Diagram of input BMP

2)提花編輯。選擇提花編織里的空氣層提花，系統(tǒng)完成提花轉(zhuǎn)換。圖11示出空氣層提花示意圖。

圖11 空氣層提花示意圖Fig.11 Diagram of net jacquard

3)導出上機文件。安排紗嘴后進行花型編譯，選擇生成STOLL上機文件。

5 結 論

本文開發(fā)與實現(xiàn)了基于HTML5的橫編CAD系統(tǒng)，該系統(tǒng)基于B/S架構，主要分為設計層、處理層與存儲層。簡化了橫編針織物的設計模式，將設計系統(tǒng)的功能模塊分為織物設計、工藝設計、數(shù)據(jù)輸出和產(chǎn)品數(shù)據(jù)庫4部分。該系統(tǒng)與單機版橫編CAD相比，主要實現(xiàn)了以下突破：1)該系統(tǒng)通過瀏覽器運行，用戶可通過任意終端上的瀏覽器訪問系統(tǒng)，豐富的設計工具與簡單化的設計模式在設計功能上滿足了用戶的需求；2)利用HTML5技術提高了瀏覽器的繪圖效率與交互性，實現(xiàn)了橫編產(chǎn)品在瀏覽器上的快速設計；3)利用云端數(shù)據(jù)庫更好的管理橫編產(chǎn)品，增加款式庫與組織庫自定義與共享功能，提高了設計效率。

通過實際使用極大地縮短產(chǎn)品從設計到成品的流程，提高了產(chǎn)品開發(fā)的效率。同時，多元化的網(wǎng)絡數(shù)據(jù)庫加強了企業(yè)產(chǎn)品數(shù)據(jù)的管理，進一步提高了企業(yè)的信息化進程。今后可美化界面效果，繼續(xù)簡化設計過程，增加織物仿真模塊，提高系統(tǒng)的實用性。

[1] 洪巖. 橫編毛衫工藝設計系統(tǒng)的開發(fā)[D].無錫：江南大學,2014:1-2.

HONG Yan.Research and development of the CAD system for flat-knitted woolen sweater technology[D]. Wuxi:Jiangnan University, 2014:1-2.

[2] 閆怡，張瑞云，李汝勤．紡織 CAD 的網(wǎng)絡設計發(fā)展趨勢[J]． 紡織學報，2004，25(1):115-118．

YAN Yi，ZHANG Ruiyun，LI Ruqin． The trend of network aided design of fabric CAD [J]． Journal of Textile Research，2004，25(1):115-118．

[3] 余飛. 基于HTML5的圖形圖像協(xié)同處理技術研究與實現(xiàn)[D].荊州:長江大學,2015:8-10.

YU Fei.A reaserch and implementation of graph and image collaborative processing technology based on HTML5[D]. Jingzhou：Yangtze University,2015:8-10.

[4] 成舟,邵志清,張歡歡,等. HTML 5 Canvas技術在工程流程圖中的研究與應用[J]. 華東理工大學學報(自然科學版),2015,41(2):260-265.

CHENG Zhou,SHAO Zhiqing,ZHANG Huanhuan,et al. Investigating and using HTML5 canvas techniques in engineering flowchart[J]. Journal of East China Unversity of Science and Technology (Natural Science Edition),2015,41(2):260-265.

[5] 王松,馬崇啟. 織物CAD在線設計系統(tǒng)[J]. 紡織學報,2014, 35(3):132-135.

WANG Song，MA Chongqi. Online fabric design system using CAD[J]. Journal of Textile Research，2014,35(3):132-135.

[6] 羅冰洋,莫易敏,郭艷. 電腦橫機花型準備系統(tǒng)的設計[J]. 紡織學報,2007,28(7):116-120.

LUO Bingyang, MO Yimin, GUO Yan. Design of pattern preparation system of computerized flat knitting machine[J]. Journal of Textile Research,2007,28(7):116-120.

[7] 楊亦紅,金永敏,萬志平. 全電腦橫機計算機輔助花型設計系統(tǒng)[J]. 計算機應用,2011,31(6):1713-1715.

YANG Yihong， JIN Yongmin， WAN Zhipin. Computer aided pattern designing system for full-electronic flat machine[J]. Journal of Computer Applications,2011,31(6):1713-1715.

[8] 劉童花,鄧中民,索盈,等. 針織橫編羊毛衫設計系統(tǒng)開發(fā)[J]. 武漢科技學院學報,2007,20(2):19-23.

LIU Tonghua, DENG Zhongmin, SUO Ying, et al. Development for the design system of wool sweater by flat knitting machine[J]. Journal of Wuhan University of Science and Engineering,2007,20(2):19-23.

[9] 徐巧,叢洪蓮,張愛軍,等. 緯編針織物CAD設計模型的建立與實現(xiàn)[J]. 紡織學報,2014,35(3):136-140,144.

XU Qiao，CONG Honglian，ZHANG Aijun，et al. Establishment and implementation of weft-knitted fabric′s design model in CAD system[J]. Journal of Textile Research,2014,35(3):136-140,144.

[10] 王繼曼,宋廣禮. 電腦橫機編織工時的預測[J]. 紡織學報,2010,31(5):48-54.

WANG Jiman，SONG Guangli. Knitting time forecasting of computerized flat knitting machine[J]. Journal of Textile Research, 2010,31(5):48-54.

Computeraideddesignsystemforflat-knittedfabricbasedonhypertextmarkuplanguage5

GAO Ziyue1，2， CONG Honglian1，2， JIANG Gaoming1，2， WANG Wei1，2， TANG Mengting1，2， YU Lulu1，2

(1.EngineeringResearchCenterforKnittingTechnology,MinistryofEducation,JiangnanUniversity,Wuxi,Jiangsu214122,China； 2.KeyLaboratoryofEco-Textiles(JiangnanUniversity),MinistryofEducation,Wuxi,Jiangsu214122,China))

In order to meet the requirement of online design of flat-knitted fabric, on the basis of conventional flat-knitted computer aided design(CAD), this paper designed and implemented the Internet CAD system for flat-knitted fabric based on hyper text markup language 5 technology. According to the design features and shaping principle of the flat-knitted fabric, the data of pattern and shaping were mathematically modeled and data structure was optimized, respectively, and multi-view and shaping process design was realized. Meanwhile, by combining with database technology, the functions of sweater style and pattern custom database were developed. And based on the research of pattern compiling, the file export was realized. Besides, the software architecture was researched, and the system was deployed on the server based on the B/S mode and ran at the client terminal. Thus the separation of data process and display was realized. Finally, by the design example of jacquard scarf, the system was tested. And the results show that the system is intuitive, convenient and efficient for design fabric, meeting the demands of online design of flat-knitted fabrics.

on-line design; flat-knitted fabric; data base; hyper text markup language 5

TS 181.9

A

10.13475/j.fzxb.20161204406

2016-12-26

2017-06-21

國家自然科學基金項目(61602212)；江蘇省產(chǎn)學研聯(lián)合創(chuàng)新資金-前瞻性聯(lián)合研究項目(BY2016022-09、BY2016022-42)

高梓越(1992—)，男，碩士生。主要研究方向為針織軟件的開發(fā)與應用。叢洪蓮，通信作者，E-mail：cong-wkrc@163.com。