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

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

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

文章編號：1009-3044（2020）22-0035-02

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

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

1 基于PAL的圖案生成

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

：. =

：：=（）

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

：：= {）

：： =： l： l

：：=loadwhere：1< transformation table>

：： =（1

：：=

hzoomlvzoomlhmirrorlvmirrorlrotatelsheer

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

Pic_flowerf

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

Gen peta12 frompetall vmirror;

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

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

Load.patternset.flower.fl.leaf to leafl;//從圖案庫裝載葉子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;//對Petall圖元定位并在畫布上畫出

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

Paint peta12;//對Peta12圖元定位并在畫布上畫出

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

Paint peta13;//對Peta13圖元定位并在畫布上畫出

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

Paint Ieaf 1;，/對leafl圖元定位并在畫布上畫出

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

Paint leaf2;/，對leaf2圖元定位并在畫布上面出

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

Paint Ieaf 3;1//對leaf3圖元定位并在畫布上畫出

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

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

2.1 JS、HTML5、CANVANS 概述

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

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

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

a） JS+ CANVANS實現(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）;

）

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

b） JS+ CANVANS實現(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）;//重新映射畫布上的（0，0）位置。

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

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

】

說明：其中ctx.translate0方法用于在同布上重新映射畫布上的起始位置，ctx.scale0方法用于實現(xiàn)畫布的翻轉(zhuǎn)，根據(jù)參數(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）;

】）

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

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

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

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

3 小結(jié)

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

參考文獻(xiàn)：

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

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

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

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

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

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

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

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