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

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

關鍵詞：民族服飾;圖案;數字化

中圖分類號：TP18 文獻標識碼：A

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

開放科學（資源服務）標識碼（OSID）：

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

1 基于PAL的圖案生成

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

：. =

：：=（）

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

：：= {）

：： =： l： l

：：=loadwhere：1< transformation table>

：： =（1

：：=

hzoomlvzoomlhmirrorlvmirrorlrotatelsheer

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

Pic_flowerf

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

Gen peta12 frompetall vmirror;

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

Gen peta13 frompeta13rotate 35;，，對花瓣peta13并進行旋轉操作

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并進行鏡像操作

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是一種簡便的圖形操作工具語言，能實現圖案的縮放、鏡像、旋轉等幾何操作，在基本圖元與規則庫基礎上，能夠實現民族圖案的數字化生成，系統速度快，可用于傳統民族圖案傳承開發與利用。

2 基于JS+CANVANS的圖案生成技術

2.1 JS、HTML5、CANVANS 概述

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

2.2 JS+CANVANS的圖案生成技術

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

a） JS+ CANVANS實現圖案放大部分操作代碼及圖例

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

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

varimg= new Image0;

Img.src=“leaf.png”;//操作圖案

img.onload= function O（

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

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

）

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

b） JS+ CANVANS實現圖案翻轉部分操作代碼及圖例

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

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

varimg= new Image0;

img.src=“leaf.png”：

img.onload= function O{

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

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

Ctx.scale（-I，1）;//使當前繪圖垂直翻轉

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

】

說明：其中ctx.translate0方法用于在同布上重新映射畫布上的起始位置，ctx.scale0方法用于實現畫布的翻轉，根據參數的不同實現不同翻轉效果。翻轉效果如下圖所示：

c） JS+ CANVANS生成扇形、環形圖案部分代碼及圖例

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，為繪制下一圖案的新坐標，該坐標由計算公式如下：

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

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

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

3 小結

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

參考文獻：

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

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

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

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

[5]任意點旋轉O度后的點的坐標[EB/O L]. https：//j ingyan. baidu.com/article/2c8c28 ldfbf3dd0009252a7b.html

【通聯編輯：唐一東】

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

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