柯?tīng)柨俗巫寤謭D案在線設(shè)計(jì)系統(tǒng)開發(fā)

周 曼，信曉瑜,2，張 輝，錢 娟,2

(1.新疆大學(xué) 紡織與服裝學(xué)院,新疆 烏魯木齊 830046； 2.新疆大學(xué) 絲綢之路服飾研究基地，新疆 烏魯木齊 830046)

柯?tīng)柨俗巫逯饕钤谛陆俗卫仗K柯?tīng)柨俗巫灾沃?，是我?guó)傳統(tǒng)游牧民族之一。其民間紡織品紋樣繁復(fù)、色彩絢麗，是我國(guó)民族藝術(shù)的瑰寶，也是中華優(yōu)秀傳統(tǒng)文化的重要組成部分。近年來(lái)由于社會(huì)經(jīng)濟(jì)的發(fā)展和民族地區(qū)生產(chǎn)生活方式的轉(zhuǎn)變，花氈、刺繡等曾經(jīng)柯?tīng)柨俗巫寮壹覒魬舯貍涞拿耖g傳統(tǒng)紡織品制作工藝受到較大沖擊。值得注意的是，柯?tīng)柨俗巫寮徔椘穲D案藝術(shù)具有融入現(xiàn)代生活的天然優(yōu)勢(shì)，對(duì)其進(jìn)行充分發(fā)掘和設(shè)計(jì)利用，有助于民族民間藝術(shù)的保護(hù)傳承和可持續(xù)發(fā)展。部分學(xué)者曾對(duì)柯?tīng)柨俗巫寮徔椘芳y樣進(jìn)行過(guò)研究，包括對(duì)柯?tīng)柨俗巫寮徔椘穲D案構(gòu)成、色彩搭配、用途分類、文化淵源等進(jìn)行的探究，對(duì)柯?tīng)柨俗巫寮徔椘芳y樣藝術(shù)語(yǔ)言及工藝技法等進(jìn)行的分析，還有利用數(shù)字化技術(shù)提取柯?tīng)柨俗巫鍌鹘y(tǒng)紡織品圖案進(jìn)行創(chuàng)新設(shè)計(jì)的相關(guān)探索。

隨著計(jì)算機(jī)技術(shù)的進(jìn)步，民族民間圖案藝術(shù)的數(shù)字化保護(hù)與傳承引起了社會(huì)各界的廣泛關(guān)注，尤其是在紡織品設(shè)計(jì)領(lǐng)域備受青睞。如鄧騰對(duì)邵陽(yáng)藍(lán)印花布花卉圖案元素進(jìn)行提取，并進(jìn)行分割、合并、重構(gòu)、再設(shè)計(jì)，為傳統(tǒng)圖案的古為今用提供了理論參考。汪會(huì)提出基于對(duì)比度和GrabCut算法的圖案元素提取方法，可進(jìn)行用戶交互操作，提取出具有輪廓、色彩和結(jié)構(gòu)的服飾圖案元素，并進(jìn)行快速有效存儲(chǔ)，使得圖案的設(shè)計(jì)更加智能化。李文慶在維吾爾族典型圖案的基礎(chǔ)上開發(fā)并實(shí)現(xiàn)了基于圖案重組的原型設(shè)計(jì)系統(tǒng)。此外還有不少學(xué)者利用計(jì)算機(jī)技術(shù)建立集認(rèn)知學(xué)習(xí)、圖案設(shè)計(jì)、創(chuàng)新應(yīng)用為一體的數(shù)字化保護(hù)平臺(tái)，旨在對(duì)傳統(tǒng)圖案藝術(shù)進(jìn)行有效的保護(hù)與傳承。這些對(duì)民族圖案數(shù)字化研究的相關(guān)探索，為民間圖案藝術(shù)的活態(tài)保護(hù)和傳承提供了新的研究思路，為民間圖案融入現(xiàn)代化生活和新消費(fèi)市場(chǎng)提供了可能途徑。

本文以柯?tīng)柨俗巫迕耖g花氈紋樣為主要研究對(duì)象，嘗試探索一種對(duì)柯?tīng)柨俗巫寮y樣進(jìn)行數(shù)字化創(chuàng)新設(shè)計(jì)的方法，利用超文本標(biāo)記語(yǔ)言(HTML)技術(shù)構(gòu)建一個(gè)柯?tīng)柨俗巫寤謭D案在線設(shè)計(jì)開發(fā)系統(tǒng)，從而為民族風(fēng)格紋樣設(shè)計(jì)提供更便捷的解決方案。

1 花氈圖案設(shè)計(jì)系統(tǒng)開發(fā)方案

1.1 系統(tǒng)設(shè)計(jì)思路

通過(guò)調(diào)研發(fā)現(xiàn)，柯?tīng)柨俗巫寤謭D案主要由2部分構(gòu)成(見(jiàn)圖1)，分別是中間裝飾區(qū)域(圖中區(qū)域4)和邊框角隅區(qū)域(圖中區(qū)域1、2、3)，圖案布局形式多樣，但大多布局均衡對(duì)稱、和諧規(guī)整。圖案母題與其游牧生活中常見(jiàn)物象息息相關(guān)，如動(dòng)物羝角紋、飛禽紋、植物紋和自然景觀紋樣等。配色則比較熱情絢麗，具有濃郁的游牧民族特色。

圖1 花氈圖案及其結(jié)構(gòu)分布示意圖Fig.1 Pattern and structure of Kirgiz felt.(a)Pattern of kirgiz felt;(b)Structure distribution of Kirgiz fert

在對(duì)柯?tīng)柨俗巫寤謭D案的構(gòu)圖、圖元和色彩的相關(guān)分析基礎(chǔ)上，首先確立了利用數(shù)字化手段對(duì)柯?tīng)柨俗巫寤旨y樣進(jìn)行圖元提取，建立圖元信息庫(kù)，再根據(jù)預(yù)設(shè)構(gòu)圖方式建立構(gòu)圖模板庫(kù)，最后匹配色彩選擇模塊，最終完成柯?tīng)柨俗巫寤旨y樣的線上交互式自主設(shè)計(jì)的系統(tǒng)開發(fā)思路。

1.2 技術(shù)應(yīng)用

隨著互聯(lián)網(wǎng)技術(shù)的飛速發(fā)展，用戶可直接通過(guò)瀏覽器打開Web頁(yè)面，在頁(yè)面實(shí)現(xiàn)圖案的自主繪制。圖形處理類軟件和工程制圖類軟件在網(wǎng)頁(yè)應(yīng)用程序上都有較好的應(yīng)用。HTML的標(biāo)記語(yǔ)言是網(wǎng)頁(yè)制作的必備工具，具有自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)、根據(jù)新環(huán)境自動(dòng)調(diào)節(jié)、能夠自動(dòng)更新，且更新速度快，后期測(cè)試維護(hù)便利、可以跨平臺(tái)使用等特點(diǎn)。JavaScript常用來(lái)給HTML網(wǎng)頁(yè)添加動(dòng)態(tài)功能,比如響應(yīng)用戶的各項(xiàng)操作指令。該操作系統(tǒng)其源代碼可直接由瀏覽器運(yùn)行，方便圖案設(shè)計(jì)的預(yù)覽，能夠及時(shí)調(diào)整和變更，跨平臺(tái)的優(yōu)勢(shì)為后續(xù)手機(jī)端的研發(fā)提供了便利。而HTML5中具有的繪圖功能，加上JavaScript即可繪制圖片和動(dòng)畫，使得圖案設(shè)計(jì)系統(tǒng)的開發(fā)更加便利和靈活，且未來(lái)能在App和小程序端應(yīng)用，可為普通設(shè)計(jì)者提供便利。

為確保圖案素材的質(zhì)量和設(shè)計(jì)效果表現(xiàn)，本系統(tǒng)采取當(dāng)前最有應(yīng)用前景的SVG矢量圖形格式進(jìn)行素材處理。Canvas標(biāo)簽在HTML5眾多標(biāo)簽中備受矚目。它類似一塊矩形區(qū)域的畫布，在其上可用來(lái)直接繪制圖形，其本身并不具有繪圖能力，用戶可以控制其上的每一個(gè)像素點(diǎn)，并且可以使用JavaScript等腳本語(yǔ)言以及Canvas元素的內(nèi)置繪圖方式在頁(yè)面中繪制任何圖形，系統(tǒng)運(yùn)行速度和流暢度較高。并且它在默認(rèn)情況下無(wú)邊框和內(nèi)容，較適用于繪制本系統(tǒng)的模板庫(kù)。

基于以上分析，本文通過(guò)HTML5信息處理技術(shù)和JavaScript網(wǎng)頁(yè)制作技術(shù)的有效融合，并采用SVG格式的圖元和Canvas模板，進(jìn)行具有柯?tīng)柨俗巫屣L(fēng)格的圖案在線設(shè)計(jì)系統(tǒng)開發(fā)。通過(guò)JavaScript結(jié)合Canvas繪制構(gòu)圖模板庫(kù)，再利用JavaScript添加SVG格式柯?tīng)柨俗巫寤旨y樣圖元信息的填充指令，能迅速執(zhí)行對(duì)模板的填充、修改和清除，實(shí)現(xiàn)依托預(yù)設(shè)構(gòu)圖模板的圖案快速生成，為用戶提供實(shí)用便捷的柯?tīng)柨俗巫寤旨y樣數(shù)字化設(shè)計(jì)工具。Web界面系統(tǒng)操作架構(gòu)如圖2所示。

圖2 系統(tǒng)操作主流程圖Fig.2 System operation process

1.3 系統(tǒng)功能模塊設(shè)計(jì)

根據(jù)功能需求，將在線設(shè)計(jì)系統(tǒng)分為圖元區(qū)、模板區(qū)、設(shè)計(jì)區(qū)、命令區(qū)(數(shù)據(jù)傳輸)4個(gè)區(qū)域。其中圖元區(qū)紋樣信息主要包含主體裝飾紋樣和邊框、角隅等配飾紋樣，通過(guò)鼠標(biāo)選定相應(yīng)的紋樣，向數(shù)據(jù)庫(kù)發(fā)送操作指令執(zhí)行紋樣與模板的組合。模板區(qū)主要提供各種構(gòu)圖形式的預(yù)設(shè)，其中既包含柯?tīng)柨俗巫寤值膫鹘y(tǒng)構(gòu)圖形式，也衍生設(shè)計(jì)了一些具有現(xiàn)代構(gòu)圖特征的創(chuàng)新構(gòu)圖模板，通過(guò)對(duì)應(yīng)按鈕可執(zhí)行對(duì)不同風(fēng)格模板的選擇。在設(shè)計(jì)區(qū)中，選定模板的特定區(qū)域，和圖元庫(kù)相結(jié)合，系統(tǒng)將根據(jù)指令對(duì)圖元庫(kù)紋樣進(jìn)行計(jì)算處理，并將新的結(jié)果傳輸至模板，利用系統(tǒng)的圖像處理功能，向用戶實(shí)時(shí)預(yù)覽設(shè)計(jì)效果。命令區(qū)主要包含繪制、清除、背景色填充、色彩編輯、設(shè)計(jì)預(yù)覽、數(shù)據(jù)導(dǎo)出6項(xiàng)一級(jí)指令。系統(tǒng)功能框架如圖3所示。

圖3 系統(tǒng)功能模塊Fig.3 System function module

1.4 用戶界面設(shè)計(jì)

根據(jù)先前對(duì)系統(tǒng)功能模塊的設(shè)計(jì)規(guī)劃，將本系統(tǒng)的用戶界面(UI)分為3個(gè)區(qū)域，最左側(cè)組件為圖元庫(kù)，包含2個(gè)一級(jí)菜單，分別為配紋區(qū)和中心紋樣區(qū)。界面右側(cè)為模板結(jié)構(gòu)庫(kù)，包含2個(gè)一級(jí)菜單，分別為傳統(tǒng)構(gòu)圖和現(xiàn)代構(gòu)圖。中間區(qū)域分為上下2部分，上面為指令按鈕選擇區(qū)域，下面為設(shè)計(jì)繪圖預(yù)覽區(qū)域。簡(jiǎn)潔的界面為設(shè)計(jì)者提供更為清晰直觀的設(shè)計(jì)效果。

2 軟件開發(fā)過(guò)程

軟件開發(fā)過(guò)程可分為2部分，在相關(guān)素材準(zhǔn)備完畢的基礎(chǔ)上，開始搭建一個(gè)穩(wěn)定的系統(tǒng)環(huán)境，依次分別構(gòu)建圖元庫(kù)、構(gòu)圖模板庫(kù)和色彩庫(kù)。相關(guān)技術(shù)參數(shù)如下。

開發(fā)工具：visual studio code；軟件環(huán)境開發(fā)：MacOS，node，版本v8.16.2，webpack版本3.6.0，vue版本2.5.2；運(yùn)行：Mac/Windows，PC瀏覽器；UI框架：element-ui，版本2.15.0；腳本語(yǔ)言：JavaScript。

2.1 系統(tǒng)界面搭建

本系統(tǒng)界面搭建用到的UI框架來(lái)源于element-ui官網(wǎng)，版本2.15.0，基礎(chǔ)組件包含布局、色彩、字體、圖標(biāo)、按鈕等，配合vue快速開發(fā)，其源碼可直接復(fù)制到編程軟件，為開發(fā)者提供便捷高效的編寫形式。

2.2 數(shù)據(jù)庫(kù)搭建

柯?tīng)柨俗巫寤旨y樣多基于基礎(chǔ)的圖案元素進(jìn)行衍生變形，通過(guò)重復(fù)、位移、旋轉(zhuǎn)、鏡像等多種變化形式，衍生出多種圖案單元。首先將收集來(lái)的柯?tīng)柨俗巫寤謭D案資料進(jìn)行分類，然后將分類好的圖案導(dǎo)入CorelDraw軟件進(jìn)行單個(gè)圖案基元的分割與提取，運(yùn)用貝塞爾曲線和形狀工具進(jìn)行圖案的描摹和調(diào)整，最后選擇SVG格式保存，導(dǎo)出到本地文件夾或者服務(wù)器。提取完整圖元的過(guò)程如圖4所示。本例中使用了柯?tīng)柨俗巫宓湫偷聂平羌y紋樣，包含起輔助裝飾作用的角隅紋樣和中心裝飾紋樣，由此建立SVG圖元庫(kù)。圖元庫(kù)系統(tǒng)界面展示如圖5。

圖4 圖元提取Fig.4 Primitive extraction. (a) Antler patternⅠ; (b)Horn pattern;(c)Antler patternⅡ

圖5 圖元庫(kù)Fig.5 Primitive database. (a) Motif pattern database; (b)Decorative pattern database

在圖案構(gòu)圖設(shè)計(jì)上，一方面選擇了部分柯?tīng)柨俗巫鍌鹘y(tǒng)花氈的典型構(gòu)圖(見(jiàn)圖6)，另一方面也根據(jù)當(dāng)下流行的圖案構(gòu)圖形式，衍生設(shè)計(jì)出一系列具有現(xiàn)代特征的構(gòu)圖模板(見(jiàn)圖7)。用戶可以根據(jù)個(gè)人喜好，選擇性進(jìn)行紋樣填充搭配組合。利用Canvas直接進(jìn)行構(gòu)圖模板的繪制具有便捷高效的特點(diǎn)，能夠?yàn)楹笃诟嘈履０宓奶砑犹峁┘夹g(shù)保障。

圖6 傳統(tǒng)結(jié)構(gòu)樣式Fig. 6 Traditional structure.(a)Rhombic arrangement; (b) Square arrangement；(c) Multiple rhombic arrangement

圖7 創(chuàng)新設(shè)計(jì)結(jié)構(gòu)樣式Fig.7 Patterns by innovative design structure

色彩是構(gòu)成圖案的基本元素之一，柯?tīng)柨俗巫迕耖g紡織品色彩強(qiáng)烈、對(duì)比鮮明，展現(xiàn)出濃郁的民族特色；但這種強(qiáng)烈的配色風(fēng)格未必適合當(dāng)前都市群眾的審美需求，因此，通過(guò)在Web頁(yè)面中加入調(diào)色板(見(jiàn)圖8)，使得配色設(shè)計(jì)更加便捷靈活，色彩的色相、明度、純度等相關(guān)參數(shù)可以自由調(diào)節(jié)，實(shí)現(xiàn)交互式自主設(shè)計(jì)。導(dǎo)入的色彩庫(kù)具有自主選擇色彩、調(diào)節(jié)透明度、調(diào)節(jié)RGB色值等功能，如在色板的左下角設(shè)定了RGBA數(shù)值調(diào)節(jié)框,其中RGB分別代表紅、綠、藍(lán)色值，A代表透明度數(shù)值，設(shè)計(jì)者也可直接調(diào)節(jié)RGBA數(shù)值來(lái)進(jìn)行指定色彩的選擇，配色方式高效便捷，有助于工作效率的提升。

圖8 系統(tǒng)界面調(diào)色板應(yīng)用Fig.8 System interface palette application

3 軟件使用方法及設(shè)計(jì)案例

3.1 匹配填充

在對(duì)圖案進(jìn)行分割和圖元提取后，對(duì)提取的柯?tīng)柨俗巫寤謭D元進(jìn)行重新排列，即進(jìn)行圖元與模板的匹配。在圖元的排列中，每個(gè)圖元的結(jié)構(gòu)是不同的，由此排列到模板的形式也是不同的。用圖元的不同結(jié)構(gòu)界定圖元是否規(guī)則，根據(jù)柯?tīng)柨俗巫寮y樣的形狀，將紋樣結(jié)構(gòu)幾何化，便于利用計(jì)算機(jī)程序計(jì)算，進(jìn)而進(jìn)行模板填充。設(shè)置界定正三角形、正方形、正菱形、長(zhǎng)方形元素為規(guī)則紋樣，其余為不規(guī)則紋樣，界定如圖9所示。其中，圖9(a)為不規(guī)則紋樣，(b)(c)為規(guī)則紋樣。通過(guò)對(duì)花氈的觀察，發(fā)現(xiàn)不規(guī)則紋樣多為起到輔助裝飾紋樣的邊角紋，規(guī)則紋樣多用于中心紋樣的母題裝飾。

圖9 紋樣規(guī)則界定Fig.9 Definition of pattern rules. (a)Trapezoid;(b)Regular triangle; (c)Regular diamond

對(duì)于規(guī)則性紋樣，常規(guī)的排列方式有基于典型數(shù)學(xué)函數(shù)模型位移、鏡像、翻轉(zhuǎn)等。對(duì)于不規(guī)則的紋樣，排列方式結(jié)合其區(qū)域位置來(lái)設(shè)計(jì)算法進(jìn)行識(shí)別與填充，效果如圖10所示，其中(a)為不規(guī)則紋樣的自適應(yīng)填充,(b)(c)為規(guī)則紋樣的自適應(yīng)填充。排列方式是對(duì)上述各種圖元分布規(guī)律的動(dòng)作描述，為SVG矢量圖形的自動(dòng)生成提供了依據(jù)，用戶可以將特定的圖元按照規(guī)則排列在一定的平面區(qū)域。用戶能夠在Web頁(yè)面左側(cè)選中紋樣，利用計(jì)算機(jī)外界輸入設(shè)備，點(diǎn)選填充區(qū)域，點(diǎn)擊繪制指令，即可執(zhí)行命令，進(jìn)行圖元的自動(dòng)填充，能夠高效快捷的完成圖案設(shè)計(jì)。

圖10 紋樣自動(dòng)填充Fig.10 Automatic pattern filling. (a) Border fill; (b) Center area fill 1; (c) Center area fill 2

3.2 色彩編輯

本文圖案設(shè)計(jì)系統(tǒng)在Web界面中導(dǎo)入色彩庫(kù)，可以對(duì)圖案的色彩進(jìn)行實(shí)時(shí)編輯，并能夠根據(jù)用戶喜好在圖元庫(kù)自主選擇需要填充的圖元，填充完成的圖元在進(jìn)行色彩編輯的時(shí)候能夠進(jìn)行自主切換，并分別對(duì)紋樣輪廓和紋樣內(nèi)部以及背景色進(jìn)行著色編輯，高效便捷。

3.3 圖案輸出

實(shí)驗(yàn)效果圖如圖11所示，用戶自主設(shè)計(jì)的圖案可直接輸出保存至本地或者服務(wù)器，導(dǎo)出格式可選擇為psd、png、jpg、svg等，方便用戶進(jìn)行二次創(chuàng)作和應(yīng)用。

圖11 系統(tǒng)設(shè)計(jì)圖案Fig.11 System design pattern case. (a) Traditional structuralⅠ；(b) Traditional structural Ⅱ；(c) Innovative design structure

4 結(jié)束語(yǔ)

本文采用HTML5技術(shù)完成了柯?tīng)柨俗巫寤謭D案設(shè)計(jì)系統(tǒng)的開發(fā)，該系統(tǒng)主要分為輸入輸出層、設(shè)計(jì)層與處理層。簡(jiǎn)化了花氈圖案的設(shè)計(jì)模式，將設(shè)計(jì)系統(tǒng)的功能模塊分為花型設(shè)計(jì)、色彩設(shè)計(jì)、數(shù)據(jù)輸出3部分。與傳統(tǒng)設(shè)計(jì)方式相比，主要實(shí)現(xiàn)了以下突破:①該系統(tǒng)通過(guò)瀏覽器運(yùn)行，用戶可通過(guò)pc瀏覽器訪問(wèn)設(shè)計(jì)系統(tǒng)并實(shí)現(xiàn)交互式實(shí)時(shí)設(shè)計(jì)效果的預(yù)覽和在線修改編輯，簡(jiǎn)潔的操作界面與便捷的設(shè)計(jì)模式能滿足用戶的基本設(shè)計(jì)需求，設(shè)計(jì)效率較高且交互性較強(qiáng)。②對(duì)柯?tīng)柨俗巫迕耖g花氈紋樣進(jìn)行收集整理和預(yù)處理基礎(chǔ)上提取民族元素的圖案基元，并進(jìn)行數(shù)字化圖案設(shè)計(jì)，不僅實(shí)現(xiàn)了用戶在瀏覽器上進(jìn)行花氈紋樣的個(gè)性化自主創(chuàng)新設(shè)計(jì)，也為未來(lái)民間裝飾圖案的數(shù)字化保護(hù)積累了新的經(jīng)驗(yàn)。實(shí)驗(yàn)源代碼和相關(guān)技術(shù)方法也可運(yùn)用于未來(lái)其他民族民間紋樣的創(chuàng)新設(shè)計(jì)中，且可作為手機(jī)端App和微信小程序的開發(fā)的基礎(chǔ)，為民間紡織品圖案的可持續(xù)發(fā)展提供了新思路。