基于款式的面料展示系統(tǒng)開發(fā)

華柄宇,王進(jìn)美,祝雙武

(西安工程大學(xué),陜西 西安710048)

0 引言

在市場調(diào)研中發(fā)現(xiàn),企業(yè)生產(chǎn)的布料擺在一定區(qū)域進(jìn)行展示或用圖片進(jìn)行展示,沒有和衣服款式匹配起來,就不能讓消費(fèi)者更加直觀地看到面料做成衣服的效果,這對企業(yè)和服裝店是一種不足。隨著計算機(jī)技術(shù)的發(fā)展,紡織行業(yè)也運(yùn)用了紡織CAD、服裝CAD等相關(guān)軟件以輔助企業(yè)設(shè)計面料和衣服,不僅縮短了產(chǎn)品設(shè)計和生產(chǎn)時間,且變得更加便捷、高效。但是面料在衣服款式上展示還存在不足。如果能開發(fā)出一款基于款式的面料展示系統(tǒng),從紗線、組織、緊度、密度選擇到面料模擬,面料在款式上的展示等都用計算機(jī)虛擬完成,就可大大節(jié)省生產(chǎn)時間和成本,并且達(dá)到私人定制效果。為此,設(shè)計開發(fā)了一款基于款式的面料展示系統(tǒng),面料是由本校開發(fā)出來的紡織面料快速智能設(shè)計系統(tǒng)模擬出來的效果圖,具有很真實(shí)的色彩和花型;款式由專業(yè)人士畫出,像款式設(shè)計師、服裝設(shè)計師等專業(yè)人士根據(jù)流行款式用計算機(jī)設(shè)計出來,可把面料填充在款式上以體現(xiàn)出動態(tài)的展示效果。

1 系統(tǒng)概述

基于款式的面料展示系統(tǒng)的最終功能是面料映射到服裝款式上,使面料的花型、顏色等效果都能在服裝款式上得到充分展示,從而使得面料的展示效果更加生動、直觀,并且展示了正身位、右側(cè)身位、背面、左側(cè)身位等6個不同方向的面料展示,達(dá)到360°展示效果。為了實(shí)現(xiàn)上述功能,本文對系統(tǒng)的體系結(jié)構(gòu)和具體實(shí)現(xiàn)及各個功能模塊做了詳細(xì)介紹,主要有打開面料圖模塊,款式圖的圖像處理模塊,動態(tài)展示效果模塊及功能模塊整合;其中打開面料圖模塊的功能是選擇填充的面料圖,面料圖是由我校開發(fā)出來的紡織面料快速智能設(shè)計系統(tǒng)模擬出來的效果圖。

款式圖的圖像處理模塊是核心,功能是把款式圖的目標(biāo)圖像標(biāo)識出來并存到文件中,為后續(xù)的面料填充調(diào)用讀取。圖像處理包括圖像二值化、連通區(qū)域標(biāo)識及存取,其中圖像二值化是把款式圖像通過設(shè)定固定閾值[1],把灰度圖像變成僅用兩個值(0或1)來分別表示背景圖像和目標(biāo)圖像的二值圖像;其中目標(biāo)取值為1,背景取值為0,為后續(xù)處理提供了方便。連通區(qū)域的標(biāo)識是標(biāo)記目標(biāo)圖像連通區(qū)域并標(biāo)號,每標(biāo)記一個目標(biāo)圖像連通區(qū)域標(biāo)號加1,直到標(biāo)記完畢。然后把整幅款式圖像的像素點(diǎn)坐標(biāo)及標(biāo)號值存入流文件中,其中標(biāo)號大于等于2的連通區(qū)域是目標(biāo)圖像,方便以后調(diào)用讀取。

動態(tài)展示模塊的功能是展示面料在款式上填充后的效果圖,且面料的花型、顏色等效果都能在服裝款式上得到充分展示;使得面料的展示效果更加生動、直觀,連續(xù)加載一種款式6個不同身位的面料填充效果圖,能體現(xiàn)出動態(tài)的面料展示效果[2]。動態(tài)展示模塊需要調(diào)用讀取款式圖像的像素點(diǎn)坐標(biāo)及標(biāo)號值,當(dāng)標(biāo)號值大于等于2時映射面料圖的紋理,進(jìn)行鋪圖。由于面料比款式圖小,如果直接映射會導(dǎo)致有些目標(biāo)圖像區(qū)域映射錯誤,所以在映射過程中要把面料圖創(chuàng)建成與款式圖大小相當(dāng)?shù)奈粓D,再去映射。由于款式部位不同,其面料圖的映射方向也不盡相同。例如衣身部位與衣領(lǐng)的紋理就方向不同,在前面對款式圖各部位的像素點(diǎn)坐標(biāo)及標(biāo)號要分別讀取,并對創(chuàng)建的面料圖位圖作相對應(yīng)的旋轉(zhuǎn)變換[3]。

2 系統(tǒng)開發(fā)及所用算法

2.1 系統(tǒng)開發(fā)框架和環(huán)境

基于款式的面料展示系統(tǒng)的開發(fā)是分功能模塊化進(jìn)行研究開發(fā)的,如圖1功能模塊化圖,當(dāng)各個功能模塊編程實(shí)現(xiàn)后把這些功能模塊按先后順序整合到一起,用一個直觀的菜單形式展現(xiàn)出來。這些功能模塊分別是打開面料圖、款式圖的圖像處理和動態(tài)展示效果圖,然后進(jìn)行各個功能模塊的系統(tǒng)整合,一個完整的基于款式的面料展示系統(tǒng)就被研發(fā)出來了。

圖1 功能模塊化圖

在系統(tǒng)開發(fā)環(huán)境上,基于款式的面料展示系統(tǒng)是由Windows XP或Windows 7系統(tǒng)的電腦,以及Delphi 7.0集成開發(fā)環(huán)境開發(fā)的。

2.2 系統(tǒng)開發(fā)所用算法及相關(guān)技術(shù)

2.2.1 圖像的二值化

圖像二值化的基本原理是將圖像上的點(diǎn)的灰度置為0或255,也就是將整個圖像呈現(xiàn)出明顯的黑白效果,即將256個亮度等級的灰度圖像通過適當(dāng)?shù)拈撝颠x取而獲得仍然可以反映圖像整體和局部特征的二值化圖像。在數(shù)字圖像處理中二值圖像占有非常重要的地位,特別是在實(shí)用圖像處理中以二值圖像處理實(shí)現(xiàn)而構(gòu)成的系統(tǒng)是很多的。要進(jìn)行二值圖像的處理與分析,首先要把灰度圖像二值化,得到二值化圖像,這樣有利于在對圖像做進(jìn)一步處理時,圖像的集合性質(zhì)只與像素值為0或255的點(diǎn)的位置有關(guān),不再涉及像素的多級值,使處理變得簡單且數(shù)據(jù)的處理和壓縮量小。為了得到理想的二值圖像,一般采用封閉、連通的邊界定義不交疊的區(qū)域。所有灰度大于或等于閾值的像素被判定為屬于特定物體,其灰度值為255表示,否則這些像素點(diǎn)被排除在物體區(qū)域以外;灰度值為0,表示背景或者例外的物體區(qū)域。如果物體同背景的差別表現(xiàn)不在灰度值上(如紋理不同),可以將這個差別特征轉(zhuǎn)換為灰度的差別,然后利用閾值選取技術(shù)來分割該圖像。動態(tài)調(diào)節(jié)閾值實(shí)現(xiàn)圖像的二值化可動態(tài)觀察其分割圖像的具體結(jié)果[1]。

圖像二值化的方法有很多,閾值的選擇是二值化圖像的關(guān)鍵。二值化方法有迭代法[4],OTSU算法[5]等,OTSU算法也稱大津算法,是全局二值化算法的經(jīng)典算法之一。其基本思想是求取最佳門限閾值,圖像灰度直方圖被此閾值分割成黑白(背景與前景)兩部分,并使兩部分類間的方差取得最大值,類內(nèi)方差值最小,即類間分離性最大,但類內(nèi)的相似性最大。迭代法的主要思想是循環(huán)利用迭代的方法,逐步逼近最佳閾值[6]。而本文圖像的二值化的具體方法是固定閾值法二值化,即通過設(shè)定固定閾值,把灰度圖像變換成僅用兩個值(0或1)來分別表示的目標(biāo)圖像和背景圖像的二值圖像,其中目標(biāo)取值為1,背景取值為0。在實(shí)際的位圖(Bitmap)中,0對應(yīng)于RGB值均為0(黑色),1對應(yīng)于RGB值均為255(白色)。

2.2.2 目標(biāo)圖像的連通區(qū)域標(biāo)記算法

基于像素點(diǎn)的連通區(qū)域標(biāo)記算法通常可以歸納為順序法[7]和區(qū)域增長法。順序法是二值圖像區(qū)域標(biāo)記的傳統(tǒng)算法,需要掃描兩次圖像,對于未作標(biāo)記的像素標(biāo)號可以從它的鄰域中獲得。第一次掃描逐行逐列掃描像素,判斷像素之間的鄰域關(guān)系并標(biāo)號,第二次掃描消除重復(fù)性標(biāo)記的像素點(diǎn),該算法需兩次掃描圖像增加了算法的運(yùn)行時間。

區(qū)域增長法采用種子點(diǎn)填充的原理,只需要對圖像進(jìn)行一次掃描,可分為遞歸法、深度優(yōu)先搜索法和廣度優(yōu)先搜索法。遞歸法需要消耗很大的堆?？臻g,僅適用于小面積連通區(qū)域的標(biāo)記,如果圖像中含大面積的連通區(qū)域則會導(dǎo)致系統(tǒng)堆棧溢出,算法運(yùn)行失敗[8]。而本系統(tǒng)所用的款式圖的連通區(qū)域面積較小,可以采用遞歸法標(biāo)識連通區(qū)域。遞歸法常見的有四鄰域標(biāo)記算法和八鄰域標(biāo)記算法。

(1)四鄰域標(biāo)記算法 四鄰域標(biāo)記算法包括以下步驟:①判斷此點(diǎn)四鄰域中的最左,最上有沒有點(diǎn),如果都沒有點(diǎn),則表示一個新的區(qū)域的開始。②如果此點(diǎn)四鄰域中的最左有點(diǎn),最上沒有點(diǎn),則標(biāo)記此點(diǎn)為最左點(diǎn)的值;如果此點(diǎn)四鄰域中的最左沒有點(diǎn),最上有點(diǎn),則標(biāo)記此點(diǎn)為最上點(diǎn)的值。③如果此點(diǎn)四鄰域中的最左有點(diǎn),最上都有點(diǎn),則標(biāo)記此點(diǎn)為這兩個中的最小的標(biāo)記點(diǎn),并修改大標(biāo)記為小標(biāo)記。

(2)八鄰域標(biāo)記算法 八鄰域標(biāo)記算法包括以下步驟:①判斷此點(diǎn)八鄰域中的最左、左上、最上、上右點(diǎn)的情況,如果都沒有點(diǎn)則表示一個新的區(qū)域的開始。②如果此點(diǎn)八鄰域中的最左有點(diǎn),上右都有點(diǎn),則標(biāo)記此點(diǎn)為這兩個中的最小的標(biāo)記點(diǎn),并修改大標(biāo)記為小標(biāo)記。③如果此點(diǎn)八鄰域中的左上有點(diǎn),上右都有點(diǎn),則標(biāo)記此點(diǎn)為這兩個中的最小的標(biāo)記點(diǎn),并修改大標(biāo)記為小標(biāo)記。④否則按照最左,左上,最上,上右的順序,標(biāo)記此點(diǎn)為四個中的一個[9]。

2.2.3 位圖的創(chuàng)建與旋轉(zhuǎn)

在對款式圖的目標(biāo)圖像進(jìn)行鋪圖時,每塊連通區(qū)域的紋理角度和方向都是不一樣的。例如衣領(lǐng)和衣袖部位,在紋理映射之前要根據(jù)每塊連通區(qū)域的特點(diǎn)對布料圖像位圖進(jìn)行旋轉(zhuǎn)角度調(diào)整;否則映射到模特身上的布料紋理、花型都是一樣的,無法反映出真實(shí)效果。圖像的旋轉(zhuǎn)也是一個自定義過程,一般圖像的旋轉(zhuǎn)是以圖像的中心為原點(diǎn)旋轉(zhuǎn)一定角度。

圖像的旋轉(zhuǎn)其實(shí)就是圖像上像素點(diǎn)的坐標(biāo)變換,假如旋轉(zhuǎn)前某一點(diǎn)的坐標(biāo)為[x0,y0,1],旋轉(zhuǎn)后的坐標(biāo)為[x1,y1,1],在二維平面上點(diǎn)繞原點(diǎn)順時針旋轉(zhuǎn)θ角,則其變換矩陣如式1所示:

3 系統(tǒng)開發(fā)過程及功能展示

3.1 系統(tǒng)的功能結(jié)構(gòu)圖

在開發(fā)過程中該系統(tǒng)是模塊化設(shè)計,主要按照功能化模塊進(jìn)行編程完成。這是因?yàn)閷⑾到y(tǒng)按功能模塊化后,目的清晰,編程操作便捷,有問題容易解決。在系統(tǒng)的開發(fā)過程中主要分了如下幾塊:打開面料圖,款式圖的圖像處理,動態(tài)展示效果,進(jìn)行模塊整合,如圖2所示。

圖2 系統(tǒng)的功能結(jié)構(gòu)圖

3.2 打開面料圖模塊

打開面料圖模塊功能是打開選擇的面料圖,在系統(tǒng)中顯示出面料的圖像,也就是用來鋪在款式上的面料圖像,如圖3所示。

圖3 打開面料圖

3.3 款式圖的圖像處理

款式圖的圖像處理功能是把款式圖的目標(biāo)圖像標(biāo)識出來并存到文件中,為后續(xù)的面料填充調(diào)用讀取。這一功能模塊包括圖像二值化及其初始化,款式圖目標(biāo)圖像的標(biāo)識,目標(biāo)圖像的像素點(diǎn)坐標(biāo)及標(biāo)號的保存,以及目標(biāo)圖像的像素點(diǎn)坐標(biāo)及標(biāo)號的讀取,如圖4所示。

圖4 圖像處理窗體界面

3.3.1 款式圖像的二值化及其初始化

款式圖像首先要二值化,通過設(shè)定固定閾值,把灰度圖像變換成僅用兩個值(0或1)來分別表示的目標(biāo)圖像和背景圖像的二值圖像;設(shè)置為24位真彩色,其中目標(biāo)取值為1,背景取值為0。實(shí)際位圖(Bitmap)中,0對應(yīng)于RGB值均為0(黑色),1對應(yīng)于RGB值均為255(白色)。當(dāng)確定按鈕按下時,圖像二值化并對圖像的每個像素點(diǎn)賦值。

在圖像二值化的同時對圖像進(jìn)行掃描,初始化賦值標(biāo)號,白色的區(qū)域標(biāo)號為1,黑色的區(qū)域標(biāo)號為0,定義一個數(shù)組Yarray[i,j]記錄圖像的坐標(biāo)點(diǎn)的標(biāo)號,i表示行坐標(biāo),j表示列坐標(biāo)。編程實(shí)現(xiàn)原理是圖像二值化后,每個像素點(diǎn)的值分別是255或0,再次對圖像從左到右,從上到下,一行一行使用Scanline進(jìn)行掃描,通過把每個像素點(diǎn)的值除以255取整賦值給Yarray[i,j],這樣就把整個款式圖像的每個像素點(diǎn)值初始化成0或1了。

3.3.2 目標(biāo)圖像的標(biāo)記

在款式圖的標(biāo)記中,款式圖以內(nèi)才是目標(biāo)圖像需要標(biāo)識的,以外的為背景圖像,是不需要標(biāo)識的。當(dāng)用鼠標(biāo)點(diǎn)擊某一目標(biāo)區(qū)域時該目標(biāo)區(qū)域被標(biāo)識,標(biāo)號增加1,顯示為藍(lán)色,如圖5(a)所示;其余的目標(biāo)圖像連通區(qū)域以此類推,標(biāo)識完所有的目標(biāo)區(qū)域時,整個款式圖顯示藍(lán)色,如圖5(b)所示。在某一連通區(qū)域進(jìn)行標(biāo)識時要搜索邊界,當(dāng)?shù)竭吔鐣r就往回搜索,直到整個連通區(qū)域被標(biāo)識完,這里所用的方法是四鄰域標(biāo)記算法,是一個遞歸的過程。目標(biāo)圖像的標(biāo)號初始化值為2,是一個鼠標(biāo)按下相應(yīng)事件。

圖5 目標(biāo)圖像標(biāo)記圖

3.3.3 目標(biāo)圖像的像素點(diǎn)坐標(biāo)及其標(biāo)號保存調(diào)用

用鼠標(biāo)點(diǎn)擊目標(biāo)圖像,直至目標(biāo)圖像全部被標(biāo)識。如圖5(b)右圖所示藍(lán)色的部分是目標(biāo)圖像,主要把其像素點(diǎn)坐標(biāo)及其標(biāo)號存到一個文件中,每當(dāng)需要對這幅款式圖進(jìn)行鋪圖時調(diào)用保存在文件中的數(shù)據(jù)即可。

3.4 動態(tài)展示效果的實(shí)現(xiàn)

3.4.1 面料填充

在填充面料時要注意幾個實(shí)際問題,一是在進(jìn)行面料填充時要創(chuàng)建一個和款式圖圖像大小相同的面料位圖,這樣才能使款式圖像與位圖的像素點(diǎn)一一對應(yīng),使款式圖中的目標(biāo)圖像全部填充面料的紋理和花型,形成完美的匹配。二是在進(jìn)行面料填充時,有些部位是需要面料圖旋轉(zhuǎn)一定角度后再進(jìn)行填充,因?yàn)樵诳钍綀D圖像標(biāo)識時,不同的目標(biāo)圖像連通區(qū)域的紋理角度和方向有些是不一樣的。例如領(lǐng)子部分和袖子部分的連通區(qū)域,在面料填充之前要根據(jù)目標(biāo)圖像每塊連通區(qū)域的特點(diǎn)對布料圖像進(jìn)行旋轉(zhuǎn)角度調(diào)整,否則映射到款式圖像上的布料紋理、花型都是一樣的,無法反映出真實(shí)效果。正常的面料填充效果圖及動態(tài)展示效果圖如圖6所示。

解決第一個問題需要自定義一個過程(create_Image(var bmp:tbitmap;bmp1:tbitmap)),直接調(diào)用,按照款式圖的大小創(chuàng)建位圖;位圖加載面料圖像,把面料圖(原圖)用for循環(huán)的形式按照款式圖的寬度和高度多鋪幾個就可以解決。用款式圖的高度除以面料圖的高度得到的值作為鋪的行數(shù),款式圖的寬度除以面料圖的寬度作為鋪的列數(shù),把創(chuàng)建好的位圖像素點(diǎn)值賦值給款式圖的目標(biāo)圖像相對應(yīng)的像素點(diǎn),就可以實(shí)現(xiàn)面料填充款式圖。

解決第二個問題也是自定義一個過程(bmp_rotate(Srcbmp,DestBmp:Tbitmap;angle:extended)),把上述所創(chuàng)建的位圖進(jìn)行任意角旋轉(zhuǎn),然后再與目標(biāo)圖像需要旋轉(zhuǎn)的連通區(qū)域的像素點(diǎn)一一對應(yīng);圖像的旋轉(zhuǎn)其實(shí)就是圖像上相應(yīng)的像素點(diǎn)的坐標(biāo)變換,把位圖旋轉(zhuǎn)前某一點(diǎn)的像素值賦值給旋轉(zhuǎn)后位圖相對應(yīng)的像素點(diǎn),這樣就可以達(dá)到整幅圖像的旋轉(zhuǎn)。

首先要確定需要旋轉(zhuǎn)的角度(繞中心點(diǎn)順時針),調(diào)用該過程,最后進(jìn)行填充,這樣就解決問題了。最后就是實(shí)現(xiàn)正常的面料填充了,當(dāng)按下確定按鈕時系統(tǒng)會自動調(diào)用創(chuàng)建位圖、旋轉(zhuǎn)位圖兩個過程;創(chuàng)建好所需要的位圖和旋轉(zhuǎn)位圖,進(jìn)行面料填充時自動調(diào)用所需的位圖,如圖6所示。

圖6 面料填充

3.4.2 系統(tǒng)的使用

第一步,啟動應(yīng)用程序(基于款式的面料展示系統(tǒng)),單擊文件菜單→打開,會出現(xiàn)一個選擇面料圖的對話框,選擇想要的面料圖,如圖7(a)所示。

第二步,選中想要的面料圖后,點(diǎn)擊打開,會在Image1中顯示所選中的面料圖,如圖7(b)所示。

圖7 面料打開示意圖

第三步,點(diǎn)擊動態(tài)展示菜單→OK,面料在款式圖上的展示效果會在Image2、Image3上體現(xiàn)出來,如圖8所示。

圖8 動態(tài)展示效果圖

4 結(jié)語

基于款式的面料展示系統(tǒng)開發(fā)其功能是面料映射到服裝款式上,使面料的花型、顏色等效果都能在服裝款式上得到充分展示;使得面料的展示效果更加生動、直觀,且展示了正身位、右側(cè)身位、背面、左側(cè)身位等6個不同方向的面料展示效果圖,達(dá)到了360°展示效果。該系統(tǒng)的主要功能是實(shí)現(xiàn)用紡織CAD模擬出來的面料在款式上的具體展示,讓用戶很直觀、方便地看到了將面料做成成衣后的真實(shí)效果,對其設(shè)計,生產(chǎn)都有很好的指導(dǎo)作用。