姚志強(qiáng) 李美珊 周宇翔

摘要：該文主要研究網(wǎng)絡(luò)上的人與衣服的圖片如何契合并搭配合理。人們在網(wǎng)購時(shí)只能看圖片中模特的上身效果，有的時(shí)候買了后并不適合自己，一些消費(fèi)者會選擇退掉，這樣既浪費(fèi)了時(shí)間又浪費(fèi)了資源。微信虛擬試穿小程序可以讓用戶上傳自己的全身照以及欲購買的服飾圖片，調(diào)整服裝圖片進(jìn)行“試穿”，小程序具有模擬標(biāo)尺功能，模擬真實(shí)比例。手機(jī)的相機(jī)像素較高，基本細(xì)節(jié)都可以展示出來，模擬試穿效果，小程序保護(hù)用戶的隱私安全。搭配完進(jìn)行保存，繼續(xù)搭配的可以同之前作品同框比較。

關(guān)鍵詞：虛擬;平面試穿;小程序;服飾;穿搭

中圖分類號：TP311? ? ? 文獻(xiàn)標(biāo)識碼：A

文章編號：1009-3044（2021）11-0001-02

1 模擬試穿程序分析

目前的虛擬試衣以歐美虛擬技術(shù)為主，優(yōu)點(diǎn)是自己調(diào)節(jié)模特身體細(xì)節(jié)來符合自己的身材，缺點(diǎn)則是成本過高，服裝需要專業(yè)人士制作三維動(dòng)畫，消費(fèi)者不會選擇花費(fèi)高昂的價(jià)格來使用。國內(nèi)采用2D體感技術(shù)和拍照App，第一類需要硬件設(shè)備，第二類則是需要在指定區(qū)域拍下頭像與模特進(jìn)行融合。

利用小程序開發(fā)者工具來創(chuàng)建小程序，利用編輯器內(nèi)的模擬器、編輯器、調(diào)試器來制作程序內(nèi)容。用戶可以隨時(shí)隨地自由使用，微信虛擬試穿小程序通過用戶上傳自己的全身照，想要購買的衣服的資源，調(diào)整模擬進(jìn)行“試穿”，在消費(fèi)時(shí)能夠滿足消費(fèi)者的視覺要求，該小程序具有模擬標(biāo)尺功能，模擬真實(shí)比例。在一些殘障人士不方便試穿的人，可以使用我們的小程序方便地挑選自己喜歡的服裝，節(jié)省了很多的時(shí)間[5-6]。

2 小程序的實(shí)現(xiàn)研究

微信小程序開發(fā)基于wxml（微信模塊文件，類似于網(wǎng)頁開發(fā)的html文件構(gòu)建框架）利用pages字段用于描述小程序所有頁面路徑，在wxml的模塊中，我們前端開發(fā)中對頁面布局使用divpspan標(biāo)簽區(qū)組成頁面組件。通過以微信內(nèi)置的解釋器將微信服務(wù)器的前端代碼和用戶數(shù)據(jù)庫后臺傳輸過來的數(shù)據(jù)進(jìn)行拼接的原理來通過微信小程序，后端開發(fā)則用java或其他代碼來搭建邏輯功能，將內(nèi)容提交微信官方來通過小程序。

1）小程序的步驟，第一步先創(chuàng)建新的代碼格式

2）第二步寫入頭文件pages（{}）

3）第三步小程序的初始界面

{

"pages"：[

"pages/index/index"，? ?//頭文件名稱

"pages/logs/logs"]，

"window"：{

"navigationStyle"："custom"，? //需要開發(fā)者自行設(shè)計(jì)定義頂欄的樣式

"backgroundTextStyle"："light"，

"navigationBarBackgroundColor"： "#fff"，

"navigationBarTitleText"： "WeChat"，

"navigationBarTextStyle"："black"? ?//自定義效果

}}

4）第四步頁面程序

hello

這個(gè)是基本的文本框，再加入拍照的衣服圖片，即本地圖片。服裝圖的編輯主要是定義一個(gè)View，在使用的時(shí)候放到需要用到的地方，大小設(shè)置和目標(biāo)圖片相同大小。通過matrix對平移、旋轉(zhuǎn)、縮放的操作進(jìn)行映射，最終改變貼紙圖片的繪制結(jié)果，因此實(shí)現(xiàn)目標(biāo)功能。下面具體分析各個(gè)功能：

創(chuàng)建的視圖在設(shè)置完貼紙圖片之后，要?jiǎng)?chuàng)建一個(gè)浮點(diǎn)型數(shù)組，用于保存;

默認(rèn)未進(jìn)行任何變換的時(shí)候貼紙圖片的關(guān)鍵點(diǎn)，以及一個(gè)原始矩形用于保存一個(gè);

默認(rèn)繪制區(qū)域的矩形，變換后的點(diǎn)通過Matrix.mapPoints（newPoints， originPoints）進(jìn)行映射變換后的矩形通過Matrix.mapRect（newRect， originRect）進(jìn)行映射，可以通過這些新的點(diǎn)畫一些附加元素。至于貼紙圖，可以通過獲取后的rect進(jìn)行定位畫，也可以直接使用canvas.draw Bitmap（bitmap， matrix， paint）方法繪制至于如何進(jìn)行變換操作，如何進(jìn)行變換，則是在onTouch中處理各種觸摸事件，或者在dispatchTouchEvent 平移[1]。

float imgWidth = mBitmap.getWidth（）;

float imgHeight = mBitmap. getHeight（）;

float[] originProints = new float[ ]{0，0，imgWidth，0，imgHeigth， imgHeight，0， imgHeight，imgWidth/2，imgHeight/2};

RectF mOriginRect = new RectF（0，0， imgWidth，imgHeight）;

經(jīng)歷判斷ACTION_DOWN、ACTION_UP來判別觸碰能否在用戶的二維圖片上，而后計(jì)算手指滑動(dòng)軌跡的長度，能夠獲取到x軸和y軸的平移長度的調(diào)用 mMatrix.postTranslate（x，y），然后重新映射繪圖來旋轉(zhuǎn)按照二維圖片的其中一個(gè)角點(diǎn)作旋轉(zhuǎn)觸摸點(diǎn)，使二維圖片的中心（非view中心），調(diào)用mMatrix.postRotate（rotation， px， py），算出旋轉(zhuǎn)度數(shù)，px、py兩點(diǎn)（上方映射的點(diǎn)，而非初始點(diǎn)）是二維圖片中心點(diǎn)?？s小一同經(jīng)過觸摸點(diǎn)計(jì)算在滑動(dòng)過程中的縮放比例，來利用Matrix.postScale（scale， scale， px， py）縮放。利用Kinect—SDK 提供的接口能夠十分輕松地獲得彩色圖像、用戶體型圖像和人體骨關(guān)節(jié)點(diǎn)坐標(biāo)。需要利用SDK提供的映射函數(shù)換算出人體影像的全圖坐標(biāo)。

2.1 圖像的一級分割

由于用戶圖片和服飾圖片采用同樣的方法進(jìn)行切割，以下述圖片的分割包含了二級分割，都表示對兩圖片的分割過程。一級分割第一步是把用戶的頸部、雙肩、腰部、臂部分割。由圖片上選取的關(guān)節(jié)點(diǎn)坐標(biāo)位置來實(shí)行全景射線探測，直到遇到匹配像素，所有方向的探測線長度記為C（l），0≤l<180，尋找過此點(diǎn)最短的一條分割線，記A1為所測得到的探測角度，以角度A1方向和A1+180°方向畫切割線。A1則滿足：C（A）+C（ A+180）=min{C（l）+C（l+180）}且記錄切割線兩點(diǎn)的坐標(biāo)。然后將圖像進(jìn)行一級和二級切割。

3 人體圖像分析

根據(jù)上述處理的人體圖像和服飾圖像的切割結(jié)論，擁有同樣的拓?fù)浣Y(jié)構(gòu)，來遍歷所相對的所有二級模塊，將身體二級模塊各部位的服裝彩色圖像來進(jìn)行覆蓋粘貼，直至人體的各個(gè)試穿部位都被粘貼到服飾對應(yīng)的部位。如下為針對肩部切割的二級模塊，具體操作如下。

3.1 將模塊分成兩個(gè)三角形

圖中的a、b、c、d為各個(gè)骨骼點(diǎn)。將abc、cbd劃分為兩個(gè)三角形。構(gòu)成一個(gè)顏色矩陣Z，此矩陣的行數(shù)和列數(shù)，三角形行列數(shù)需大于最小外接矩形，這里可以將三角形最長邊的1.2倍長度作為Z的行數(shù)H、列數(shù)N。矩陣的坐標(biāo)（C-1，0）（C-1，R-1）（0，0）及服飾圖片二級模塊中三角形abc的坐標(biāo)代入式中：

[x'y'1=p（0）p（2）p（1）p（1）p（3）p（2）001=xy1]? ?[A=P（3）P（4）P（1）P（5）P（6）P（2）001]

求出仿射矩陣，遍歷Z中坐標(biāo)P、A×P得出服裝圖片中的坐標(biāo)，各部位點(diǎn)坐標(biāo)獲得矩陣Z的服飾填充圖片。三角形cbd同上。由Z中坐標(biāo)（C1，0）、（C-1，R-1）、（0，1）以及人用戶圖片的二級模塊中的abc的坐標(biāo)，求出A2，遍歷Z中坐標(biāo)點(diǎn)P2，A×P得到用戶圖片中的坐標(biāo)，并以矩陣Z的各身體部位進(jìn)行對應(yīng)服飾填充[4]。

3.2 小程序創(chuàng)作流程

1）小程序的注冊：進(jìn)入微信小程序官方首頁，填寫注冊相關(guān)信息并提交注冊，完成注冊后用戶需完善用戶個(gè)人信息。

2）小程序信息的完善：輸入微信小程序的基本信息，例如頭像、名稱、服務(wù)范圍等。在小程序開發(fā)前綁定要開發(fā)者的微信ID，完善管理員信息，并綁定微信用。

3）開發(fā)小程序：微信平臺給出了完備的開發(fā)框架，用戶可進(jìn)入微信官網(wǎng)下載并安裝小程序開發(fā)者工具，用戶可以依據(jù)自己小程序需求開發(fā)、調(diào)試。

4）官方審核并發(fā)布：用戶小程序編寫完成后，需向騰訊官方提交代碼和開發(fā)配置等信息并等待審核，通過后可成功發(fā)布小程序。

微信的Web開發(fā)者工具是一種基于自己的開發(fā)者工具，它實(shí)現(xiàn)了同步本地文件、開發(fā)調(diào)試、編譯預(yù)覽、上傳、發(fā)布小程序等流程。微信小程序提供了多種原生App組件，并開發(fā)了自己的wxml標(biāo)簽語言及wxss樣式語言。算法實(shí)現(xiàn)了全方位顯示試穿結(jié)果圖片，相比于3D建模虛擬試衣更加真實(shí)，利用二級分割更可以使圖片充分利用[2-3]。

4 結(jié)束語

通過上述分析和探討，基于微信小程序的虛擬試衣間能夠大大改善人們購買衣物的復(fù)雜性和不可預(yù)知性，通過虛擬試衣間就可以進(jìn)行衣物搭配，同時(shí)，平臺建立在微信小程序的基礎(chǔ)?上大大降低了軟件的適配性以及系統(tǒng)的協(xié)調(diào)性，減少了大量的時(shí)間及人工成本，并且方便了用戶的使用，搜一搜即可找到虛

擬試衣間。還有一些問題待完善，比如，人物的建模目前的技術(shù)很難做到，只用照片的話還是與真實(shí)試穿有一絲差異。因此如何將衣服建立到模型上，在未來甚至建立3D環(huán)繞的虛擬試衣間，還需要繼續(xù)研究。

參考文獻(xiàn)：

[1] 蘇卓，喻春陽.基于2D圖像變換的虛擬試衣算法[J].計(jì)算機(jī)技術(shù)與發(fā)展，2018，28（2）：24-26 .

[2] 李健，崔棟梁.基于簡化的質(zhì)點(diǎn)彈簧模型的布料模擬[J].計(jì)算機(jī)工程與設(shè)計(jì)，2010，31（4）：819-821.

[3] 石敏，毛天露，夏時(shí)洪，等.布料動(dòng)畫方法研究進(jìn)展及問題[J].計(jì)算機(jī)學(xué)報(bào)，2012，35（12）：2446-2458.

[4] 張智，曾誠.基于RIA技術(shù)的在線試衣間系統(tǒng)的設(shè)計(jì)[J].計(jì)算機(jī)技術(shù)與發(fā)展，2011，21（10）：143-146.

[5] Cordier F，Seo H，Magnenat-Thalmann N.Made-to-meas-ure technologies for online clothing store[J].IEEE Comput-er Graphics and Applications，2003，23（1）：38-48.

[6] 中國電子商務(wù)研究中心.虛擬試穿遠(yuǎn)離網(wǎng)購?fù)素涁瑝鬧EB/OL].（2011-03-30）[2012-10-20].http：//b2b.toocle.com/detail-5717577.html.

【通聯(lián)編輯：謝媛媛】