黔南民族服饰图案数字化生成技术研究

摘要：黔南的少数民族服饰图案种类繁多，内容形式丰富多彩，古朴生动的民族图案反映各少数民族对美好生活的向往。本文首先介绍了基于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-），男，重庆人，教授，硕士，研究方向：计算机软件与理论。