黔南民族服飾圖案數(shù)字化生成技術(shù)研究

摘要：黔南的少數(shù)民族服飾圖案種類繁多，內(nèi)容形式豐富多彩，古樸生動(dòng)的民族圖案反映各少數(shù)民族對(duì)美好生活的向往。本文首先介紹了基于PAL的圖案生成技術(shù)，接著對(duì)JS+ CANVANS的圖案生成技術(shù)進(jìn)行了敘述，該技術(shù)基于JS與CAN-VANS標(biāo)記的組合，豐富了JS在圖案操作方面的功能，由于JS是基于對(duì)象的簡(jiǎn)化的腳本語(yǔ)言，學(xué)習(xí)使用較為簡(jiǎn)單，操作效率高，上述兩種技術(shù)對(duì)民族服飾圖案文化的保護(hù)、傳承具有積極的現(xiàn)實(shí)意義。

關(guān)鍵詞：民族服飾;圖案;數(shù)字化

中圖分類號(hào)：TP18 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2020）22-0035-02

開(kāi)放科學(xué)（資源服務(wù)）標(biāo)識(shí)碼（OSID）：

少數(shù)民族服飾圖案是各少數(shù)民族在各自獨(dú)特的地理、文化環(huán)境中，根據(jù)使用和美化目的，按照材料、工藝、技術(shù)及經(jīng)濟(jì)等條件，通過(guò)藝術(shù)構(gòu)思，對(duì)造型、色彩、裝飾紋樣等進(jìn)行創(chuàng)造、設(shè)計(jì)并流傳的圖案，具有鮮明的民族特色。黔南位于貴州省南部，有布依族、苗族、水族等43個(gè)少數(shù)民族，是全國(guó)30個(gè)少數(shù)民族自治州之一。各民族在長(zhǎng)期的生產(chǎn)生活中創(chuàng)造了絢麗多彩的民族文化，是中國(guó)民族民間文化不可或缺的組成部分。黔南的少數(shù)民族服飾圖案包括苗族、布依族、水族等民族的蠟染圖案、刺繡圖案、紡織圖案、銀飾圖案等。古樸生動(dòng)的民族圖案即是各民族千百年來(lái)生產(chǎn)生活的藝術(shù)沉淀，也反映他們對(duì)美好生活的向往。在IT技術(shù)高速發(fā)展的今天，如何應(yīng)用計(jì)算機(jī)技術(shù)、多媒體技術(shù)實(shí)現(xiàn)民族服飾圖案的數(shù)字化生成與應(yīng)用，對(duì)民族文化的保護(hù)、傳承具有積極的現(xiàn)實(shí)意義。

1 基于PAL的圖案生成

圖案裝配語(yǔ)言（ pattern assembling language）簡(jiǎn)稱PAL，PAL是一種描述性類XML的圖案裝配語(yǔ)言，具有語(yǔ)法簡(jiǎn)單、靈活、學(xué)習(xí)使用方便等特點(diǎn)，該語(yǔ)言對(duì)圖案的幾何裝配基于民族傳統(tǒng)圖案均具有的常見(jiàn)特點(diǎn)：圖案均由一些基本部分（圖元）組成，這些基本圖元可進(jìn)行鏡像、縮放、旋轉(zhuǎn)、環(huán)形交換等操作得到新的圖案;[1]圖案的構(gòu)圖結(jié)構(gòu)形式適應(yīng)用多種圖案，即改變圖元而保留還有圖案的幾何結(jié)構(gòu)可等到新的圖案。圖案裝配語(yǔ)言就是按照特定語(yǔ)法對(duì)圖案的幾何結(jié)構(gòu)進(jìn)行描述的語(yǔ)言，該語(yǔ)言的相關(guān)語(yǔ)句，通過(guò)解釋器可生成數(shù)字化的民族圖案。

：. =

：：=（）

：：=define grid（number， number）：theight：lwidth：

：：= {）

：： =： l： l

：：=loadwhere：1< transformation table>

：： =（1

：：=

hzoomlvzoomlhmirrorlvmirrorlrotatelsheer

上述是PAL部分語(yǔ)句，其中，圖案定義表（pattern parametertable）定義圖案的位置與大小等參數(shù);語(yǔ)句表（sentence table）中包含有圖案的生成、定位及賦值語(yǔ)句，用于從圖案庫(kù)中裝載圖案到具體位置，并可將它賦給某個(gè)變量，圖案變換語(yǔ)句用于對(duì)圖案進(jìn)行放大、縮小、鏡像、剪切等變換操作。下面以一個(gè)簡(jiǎn)單例子來(lái)說(shuō)明PAL語(yǔ)言如何生成數(shù)字化民族圖案。[2]

Pic_flowerf

Load.patternset.flower.fl.petal to petall;//從圖案庫(kù)裝載花瓣petal圖元

Gen peta12 frompetall vmirror;

Gen peta13 frompetall hmirror;，/從花瓣petall生成peta12、3并進(jìn)行鏡像操作

Gen peta13 frompeta13rotate 35;，，對(duì)花瓣peta13并進(jìn)行旋轉(zhuǎn)操作

Load.patternset.flower.fl.leaf to leafl;//從圖案庫(kù)裝載葉子leaf圖元

Gen leaf2 from leafl hzoom l.5 vzoom l.3;

Gen Ieaf3 from leafl vmirror; ll從Ieafl生成leaf2、3并進(jìn)行鏡像操作

Petall.x=20;Petall.y=35;

Paint petall;//對(duì)Petall圖元定位并在畫(huà)布上畫(huà)出

Peta12.x=22; Petall.y=35;

Paint peta12;//對(duì)Peta12圖元定位并在畫(huà)布上畫(huà)出

Peta13.x=24; Petall.y=31;

Paint peta13;//對(duì)Peta13圖元定位并在畫(huà)布上畫(huà)出

leafl.x=16; leaf l.y=26;

Paint Ieaf 1;，/對(duì)leafl圖元定位并在畫(huà)布上畫(huà)出

leaf 2.x=36; leaf2.y=32;

Paint leaf2;/，對(duì)leaf2圖元定位并在畫(huà)布上面出

leaf 3.x=18; leaf 3.y=28;

Paint Ieaf 3;1//對(duì)leaf3圖元定位并在畫(huà)布上畫(huà)出

上述即為圖案裝配語(yǔ)言CPAI）的部分示例代碼，通過(guò)對(duì)PAL語(yǔ)句的分析可知，PAL是一種簡(jiǎn)便的圖形操作工具語(yǔ)言，能實(shí)現(xiàn)圖案的縮放、鏡像、旋轉(zhuǎn)等幾何操作，在基本圖元與規(guī)則庫(kù)基礎(chǔ)上，能夠?qū)崿F(xiàn)民族圖案的數(shù)字化生成，系統(tǒng)速度快，可用于傳統(tǒng)民族圖案?jìng)鞒虚_(kāi)發(fā)與利用。

2 基于JS+CANVANS的圖案生成技術(shù)

2.1 JS、HTML5、CANVANS 概述

JavaScript簡(jiǎn)稱JS，是Netscape（網(wǎng)景）公司1995年為擴(kuò)展Netscape-Navigator瀏覽器而開(kāi)發(fā)的一種腳本語(yǔ)言，它主要用于編寫(xiě)網(wǎng)頁(yè)中的腳本，單獨(dú)的JavaScript是不允許訪問(wèn)本地硬盤(pán)的，也不能將數(shù)據(jù)存入服務(wù)器，更不允許對(duì)其他網(wǎng)絡(luò)文檔進(jìn)行修改與刪除，只能通過(guò)瀏覽器實(shí)現(xiàn)信息的瀏覽和交互，從而防止本地?cái)?shù)據(jù)的丟失，提高了用戶系統(tǒng)的安全性。HTML稱為超文本標(biāo)記語(yǔ)言，是一種標(biāo)識(shí)性的語(yǔ)言。它包括一系列標(biāo)簽，通過(guò)這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Intemet資源連接為一個(gè)邏輯整體[4]。HTML5是HTML最新的修訂版本，HTML5的設(shè)計(jì)目的是為了在移動(dòng)設(shè)備上支持多媒體，這使得用戶通過(guò)瀏覽器就能完成任務(wù)，而無(wú)需其他軟件的支持。Canvas標(biāo)記，是HTML5中新增的一個(gè)重要元素，專門(mén)用來(lái)進(jìn)行圖形繪制。HTML文件中放置一個(gè)canvas標(biāo)記就相當(dāng)于在頁(yè)面上放置了一塊“畫(huà)布”，可以在其中進(jìn)行圖形的描繪，但是Can-vas的繪制需要通過(guò)JS編寫(xiě)相關(guān)代碼才能實(shí)現(xiàn)繪圖操作。

2.2 JS+CANVANS的圖案生成技術(shù)

JS+CANVANS相關(guān)技術(shù)極大地豐富了JS的圖形操作功能，可實(shí)現(xiàn)對(duì)圖案的放大、縮小、組合、剪切、旋轉(zhuǎn)、翻轉(zhuǎn)等操作，并能將結(jié)果存放于本機(jī)上，由于JS+CANVANS技術(shù)相對(duì)簡(jiǎn)單，運(yùn)行環(huán)境僅要求有支持HTML5的瀏覽器即可，不要求安裝專業(yè)軟件，因而該技術(shù)對(duì)于民族圖案的數(shù)字化處理及開(kāi)發(fā)利用具有積極現(xiàn)實(shí)意義。下面以實(shí)現(xiàn)圖案的放大及組合操作為例，對(duì)JS+ CANVANS圖案生成技術(shù)進(jìn)行說(shuō)明：

a） JS+ CANVANS實(shí)現(xiàn)圖案放大部分操作代碼及圖例

var c=document.getElementByld（“canvasOne"）;

varctx= c.getContext（“2d”）;

varimg= new Image0;

Img.src=“l(fā)eaf.png”;//操作圖案

img.onload= function O（

ctx.drawlmage（img，0，0，100， 100）;

ctx.drawlmage（img， 50， 50， 200， 200）;

）

說(shuō)明：上述代碼中，標(biāo)記用于建立畫(huà)布，標(biāo)記中的width、heiight方法用于定義畫(huà)布的尺寸大小，getContext（“2d”）方法用于在畫(huà)布定義上二維繪圖的環(huán)境，ctx.drawlmage（img，0，0，100，100）方法用于在畫(huà)布上指定位置、繪制指定大小的圖案img。繪制效果如下圖所示：

b） JS+ CANVANS實(shí)現(xiàn)圖案翻轉(zhuǎn)部分操作代碼及圖例

var c=document.getElementByld（“canvasOne”）;

varctx= c.getContext（“2d”）;

varimg= new Image0;

img.src=“l(fā)eaf.png”：

img.onload= function O{

ctx.drawlmage（img，0，0，img.width， img.height）;

ctx.translate（0，300）;//重新映射畫(huà)布上的（0，0）位置。

Ctx.scale（-I，1）;//使當(dāng)前繪圖垂直翻轉(zhuǎn)

ctx.drawl mage（img，-90，0）; 11在指定位置繪制翻轉(zhuǎn)圖

】

說(shuō)明：其中ctx.translate0方法用于在同布上重新映射畫(huà)布上的起始位置，ctx.scale0方法用于實(shí)現(xiàn)畫(huà)布的翻轉(zhuǎn)，根據(jù)參數(shù)的不同實(shí)現(xiàn)不同翻轉(zhuǎn)效果。翻轉(zhuǎn)效果如下圖所示：

c） JS+ CANVANS生成扇形、環(huán)形圖案部分代碼及圖例

var c=document.getElementByld（"canvasOne"）;

varctx= c.getContext（"2d"）;

varirng= new Image0;

img.src 2 "flower.png";

img.onload= function 0{

for（i_1;i<=6;i++）f

rx= （20-200）*Math. cos（20*i*Math. PI/180） - （200-200）*Math.sin（20*i*Math. PI/180） +200;ry= （20-200）*Math. sin（20*i*Math.PI/18 0）+（200-200）*Math.cos（20*i*Math.PI/1 80）+200;

ctx.drawlmage（img， rx， ry， 60， 60）;

】）

說(shuō)明：其中rx，為繪制下一圖案的新坐標(biāo)，該坐標(biāo)由計(jì)算公式如下：

x0=（x rxO）*cos（a） （yryO）*sin（a）+ rx0;

y0=（x rxO）*sin（a）+（yryO）*cos（a）+ ry0;[5]

把上述坐標(biāo)計(jì)算語(yǔ)句放人循環(huán)體，可獲得多個(gè)新坐標(biāo)，從而可以圓點(diǎn)為中心繪制多個(gè)圖案，以實(shí)現(xiàn)生成扇形、環(huán)形圖案的效果。效果如圖5所示：

3 小結(jié)

黔南的少數(shù)民族服飾圖案種類繁多，內(nèi)容形式豐富多彩，古樸生動(dòng)的民族圖案反映各少數(shù)民族對(duì)美好生活的向往。本文首先介紹了基于PAL的圖案生成技術(shù)，該技術(shù)基于描述性裝配語(yǔ)言，具有語(yǔ)法簡(jiǎn)單靈活等特點(diǎn);接著對(duì)JS+ CANVANS的圖案生成技術(shù)進(jìn)行了敘述，JS+ CANVANS（htm15）是新型的圖案操作與生成技術(shù)，該技術(shù)基于JS與CANVANS標(biāo)記的組合，大大豐富了JS在圖案操作方面的功能，由于JS是基于對(duì)象的簡(jiǎn)化的腳本語(yǔ)言，學(xué)習(xí)使用較為簡(jiǎn)單，操作效率高，上述兩種技術(shù)的整理與應(yīng)用對(duì)民族服飾圖案文化的保護(hù)、傳承具有積極的現(xiàn)實(shí)意義。

參考文獻(xiàn)：

[1]張雷，陳世福.PAL：描述性圖案裝配語(yǔ)[Jl.計(jì)算機(jī)應(yīng)用研究，2001，18（1）：134-136.

[2]孟波，張志和，陳世福.圖案裝配語(yǔ)言PASL的設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)輔助設(shè)計(jì)與圖形學(xué)學(xué)報(bào)，2000，12（12）：900-904.

[3]孫素華.Dreamweaver CS5 Flash CS5 Photoshop CS5網(wǎng)頁(yè)設(shè)計(jì)從入門(mén)到精通[M].中國(guó)青年出版社，2014.

[4]百度百科.Web（全球廣域網(wǎng)）[EB/OL].https：//baike. baidu.com/item/HTMU97049？fr=aladdin

[5]任意點(diǎn)旋轉(zhuǎn)O度后的點(diǎn)的坐標(biāo)[EB/O L]. https：//j ingyan. baidu.com/article/2c8c28 ldfbf3dd0009252a7b.html

【通聯(lián)編輯：唐一東】

基金項(xiàng)目：本文系2017黔南州科技計(jì)劃（社會(huì)發(fā)展）項(xiàng)目《黔南民族服飾圖案圖元的數(shù)字化構(gòu)建與設(shè)計(jì)研究》部分成果（項(xiàng)目編號(hào)： （2017）94號(hào)）

作者簡(jiǎn)介：袁軍（1970-），男，重慶人，教授，碩士，研究方向：計(jì)算機(jī)軟件與理論。