柯尔克孜族花毡图案在线设计系统开发

周 曼，信晓瑜,2，张 辉，钱 娟,2

(1.新疆大学 纺织与服装学院,新疆 乌鲁木齐 830046； 2.新疆大学 丝绸之路服饰研究基地，新疆 乌鲁木齐 830046)

柯尔克孜族主要生活在新疆克孜勒苏柯尔克孜自治州，是我国传统游牧民族之一。其民间纺织品纹样繁复、色彩绚丽，是我国民族艺术的瑰宝，也是中华优秀传统文化的重要组成部分。近年来由于社会经济的发展和民族地区生产生活方式的转变，花毡、刺绣等曾经柯尔克孜族家家户户必备的民间传统纺织品制作工艺受到较大冲击。值得注意的是，柯尔克孜族纺织品图案艺术具有融入现代生活的天然优势，对其进行充分发掘和设计利用，有助于民族民间艺术的保护传承和可持续发展。部分学者曾对柯尔克孜族纺织品纹样进行过研究，包括对柯尔克孜族纺织品图案构成、色彩搭配、用途分类、文化渊源等进行的探究，对柯尔克孜族纺织品纹样艺术语言及工艺技法等进行的分析，还有利用数字化技术提取柯尔克孜族传统纺织品图案进行创新设计的相关探索。

随着计算机技术的进步，民族民间图案艺术的数字化保护与传承引起了社会各界的广泛关注，尤其是在纺织品设计领域备受青睐。如邓腾对邵阳蓝印花布花卉图案元素进行提取，并进行分割、合并、重构、再设计，为传统图案的古为今用提供了理论参考。汪会提出基于对比度和GrabCut算法的图案元素提取方法，可进行用户交互操作，提取出具有轮廓、色彩和结构的服饰图案元素，并进行快速有效存储，使得图案的设计更加智能化。李文庆在维吾尔族典型图案的基础上开发并实现了基于图案重组的原型设计系统。此外还有不少学者利用计算机技术建立集认知学习、图案设计、创新应用为一体的数字化保护平台，旨在对传统图案艺术进行有效的保护与传承。这些对民族图案数字化研究的相关探索，为民间图案艺术的活态保护和传承提供了新的研究思路，为民间图案融入现代化生活和新消费市场提供了可能途径。

本文以柯尔克孜族民间花毡纹样为主要研究对象，尝试探索一种对柯尔克孜族纹样进行数字化创新设计的方法，利用超文本标记语言(HTML)技术构建一个柯尔克孜族花毡图案在线设计开发系统，从而为民族风格纹样设计提供更便捷的解决方案。

1 花毡图案设计系统开发方案

1.1 系统设计思路

通过调研发现，柯尔克孜族花毡图案主要由2部分构成(见图1)，分别是中间装饰区域(图中区域4)和边框角隅区域(图中区域1、2、3)，图案布局形式多样，但大多布局均衡对称、和谐规整。图案母题与其游牧生活中常见物象息息相关，如动物羝角纹、飞禽纹、植物纹和自然景观纹样等。配色则比较热情绚丽，具有浓郁的游牧民族特色。

图1 花毡图案及其结构分布示意图Fig.1 Pattern and structure of Kirgiz felt.(a)Pattern of kirgiz felt;(b)Structure distribution of Kirgiz fert

在对柯尔克孜族花毡图案的构图、图元和色彩的相关分析基础上，首先确立了利用数字化手段对柯尔克孜族花毡纹样进行图元提取，建立图元信息库，再根据预设构图方式建立构图模板库，最后匹配色彩选择模块，最终完成柯尔克孜族花毡纹样的线上交互式自主设计的系统开发思路。

1.2 技术应用

随着互联网技术的飞速发展，用户可直接通过浏览器打开Web页面，在页面实现图案的自主绘制。图形处理类软件和工程制图类软件在网页应用程序上都有较好的应用。HTML的标记语言是网页制作的必备工具，具有自适应网页设计、根据新环境自动调节、能够自动更新，且更新速度快，后期测试维护便利、可以跨平台使用等特点。JavaScript常用来给HTML网页添加动态功能,比如响应用户的各项操作指令。该操作系统其源代码可直接由浏览器运行，方便图案设计的预览，能够及时调整和变更，跨平台的优势为后续手机端的研发提供了便利。而HTML5中具有的绘图功能，加上JavaScript即可绘制图片和动画，使得图案设计系统的开发更加便利和灵活，且未来能在App和小程序端应用，可为普通设计者提供便利。

为确保图案素材的质量和设计效果表现，本系统采取当前最有应用前景的SVG矢量图形格式进行素材处理。Canvas标签在HTML5众多标签中备受瞩目。它类似一块矩形区域的画布，在其上可用来直接绘制图形，其本身并不具有绘图能力，用户可以控制其上的每一个像素点，并且可以使用JavaScript等脚本语言以及Canvas元素的内置绘图方式在页面中绘制任何图形，系统运行速度和流畅度较高。并且它在默认情况下无边框和内容，较适用于绘制本系统的模板库。

基于以上分析，本文通过HTML5信息处理技术和JavaScript网页制作技术的有效融合，并采用SVG格式的图元和Canvas模板，进行具有柯尔克孜族风格的图案在线设计系统开发。通过JavaScript结合Canvas绘制构图模板库，再利用JavaScript添加SVG格式柯尔克孜族花毡纹样图元信息的填充指令，能迅速执行对模板的填充、修改和清除，实现依托预设构图模板的图案快速生成，为用户提供实用便捷的柯尔克孜族花毡纹样数字化设计工具。Web界面系统操作架构如图2所示。

图2 系统操作主流程图Fig.2 System operation process

1.3 系统功能模块设计

根据功能需求，将在线设计系统分为图元区、模板区、设计区、命令区(数据传输)4个区域。其中图元区纹样信息主要包含主体装饰纹样和边框、角隅等配饰纹样，通过鼠标选定相应的纹样，向数据库发送操作指令执行纹样与模板的组合。模板区主要提供各种构图形式的预设，其中既包含柯尔克孜族花毡的传统构图形式，也衍生设计了一些具有现代构图特征的创新构图模板，通过对应按钮可执行对不同风格模板的选择。在设计区中，选定模板的特定区域，和图元库相结合，系统将根据指令对图元库纹样进行计算处理，并将新的结果传输至模板，利用系统的图像处理功能，向用户实时预览设计效果。命令区主要包含绘制、清除、背景色填充、色彩编辑、设计预览、数据导出6项一级指令。系统功能框架如图3所示。

图3 系统功能模块Fig.3 System function module

1.4 用户界面设计

根据先前对系统功能模块的设计规划，将本系统的用户界面(UI)分为3个区域，最左侧组件为图元库，包含2个一级菜单，分别为配纹区和中心纹样区。界面右侧为模板结构库，包含2个一级菜单，分别为传统构图和现代构图。中间区域分为上下2部分，上面为指令按钮选择区域，下面为设计绘图预览区域。简洁的界面为设计者提供更为清晰直观的设计效果。

2 软件开发过程

软件开发过程可分为2部分，在相关素材准备完毕的基础上，开始搭建一个稳定的系统环境，依次分别构建图元库、构图模板库和色彩库。相关技术参数如下。

开发工具：visual studio code；软件环境开发：MacOS，node，版本v8.16.2，webpack版本3.6.0，vue版本2.5.2；运行：Mac/Windows，PC浏览器；UI框架：element-ui，版本2.15.0；脚本语言：JavaScript。

2.1 系统界面搭建

本系统界面搭建用到的UI框架来源于element-ui官网，版本2.15.0，基础组件包含布局、色彩、字体、图标、按钮等，配合vue快速开发，其源码可直接复制到编程软件，为开发者提供便捷高效的编写形式。

2.2 数据库搭建

柯尔克孜族花毡纹样多基于基础的图案元素进行衍生变形，通过重复、位移、旋转、镜像等多种变化形式，衍生出多种图案单元。首先将收集来的柯尔克孜族花毡图案资料进行分类，然后将分类好的图案导入CorelDraw软件进行单个图案基元的分割与提取，运用贝塞尔曲线和形状工具进行图案的描摹和调整，最后选择SVG格式保存，导出到本地文件夹或者服务器。提取完整图元的过程如图4所示。本例中使用了柯尔克孜族典型的羝角纹纹样，包含起辅助装饰作用的角隅纹样和中心装饰纹样，由此建立SVG图元库。图元库系统界面展示如图5。

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

图5 图元库Fig.5 Primitive database. (a) Motif pattern database; (b)Decorative pattern database

在图案构图设计上，一方面选择了部分柯尔克孜族传统花毡的典型构图(见图6)，另一方面也根据当下流行的图案构图形式，衍生设计出一系列具有现代特征的构图模板(见图7)。用户可以根据个人喜好，选择性进行纹样填充搭配组合。利用Canvas直接进行构图模板的绘制具有便捷高效的特点，能够为后期更多新模板的添加提供技术保障。

图6 传统结构样式Fig. 6 Traditional structure.(a)Rhombic arrangement; (b) Square arrangement；(c) Multiple rhombic arrangement

图7 创新设计结构样式Fig.7 Patterns by innovative design structure

色彩是构成图案的基本元素之一，柯尔克孜族民间纺织品色彩强烈、对比鲜明，展现出浓郁的民族特色；但这种强烈的配色风格未必适合当前都市群众的审美需求，因此，通过在Web页面中加入调色板(见图8)，使得配色设计更加便捷灵活，色彩的色相、明度、纯度等相关参数可以自由调节，实现交互式自主设计。导入的色彩库具有自主选择色彩、调节透明度、调节RGB色值等功能，如在色板的左下角设定了RGBA数值调节框,其中RGB分别代表红、绿、蓝色值，A代表透明度数值，设计者也可直接调节RGBA数值来进行指定色彩的选择，配色方式高效便捷，有助于工作效率的提升。

图8 系统界面调色板应用Fig.8 System interface palette application

3 软件使用方法及设计案例

3.1 匹配填充

在对图案进行分割和图元提取后，对提取的柯尔克孜族花毡图元进行重新排列，即进行图元与模板的匹配。在图元的排列中，每个图元的结构是不同的，由此排列到模板的形式也是不同的。用图元的不同结构界定图元是否规则，根据柯尔克孜族纹样的形状，将纹样结构几何化，便于利用计算机程序计算，进而进行模板填充。设置界定正三角形、正方形、正菱形、长方形元素为规则纹样，其余为不规则纹样，界定如图9所示。其中，图9(a)为不规则纹样，(b)(c)为规则纹样。通过对花毡的观察，发现不规则纹样多为起到辅助装饰纹样的边角纹，规则纹样多用于中心纹样的母题装饰。

图9 纹样规则界定Fig.9 Definition of pattern rules. (a)Trapezoid;(b)Regular triangle; (c)Regular diamond

对于规则性纹样，常规的排列方式有基于典型数学函数模型位移、镜像、翻转等。对于不规则的纹样，排列方式结合其区域位置来设计算法进行识别与填充，效果如图10所示，其中(a)为不规则纹样的自适应填充,(b)(c)为规则纹样的自适应填充。排列方式是对上述各种图元分布规律的动作描述，为SVG矢量图形的自动生成提供了依据，用户可以将特定的图元按照规则排列在一定的平面区域。用户能够在Web页面左侧选中纹样，利用计算机外界输入设备，点选填充区域，点击绘制指令，即可执行命令，进行图元的自动填充，能够高效快捷的完成图案设计。

图10 纹样自动填充Fig.10 Automatic pattern filling. (a) Border fill; (b) Center area fill 1; (c) Center area fill 2

3.2 色彩编辑

本文图案设计系统在Web界面中导入色彩库，可以对图案的色彩进行实时编辑，并能够根据用户喜好在图元库自主选择需要填充的图元，填充完成的图元在进行色彩编辑的时候能够进行自主切换，并分别对纹样轮廓和纹样内部以及背景色进行着色编辑，高效便捷。

3.3 图案输出

实验效果图如图11所示，用户自主设计的图案可直接输出保存至本地或者服务器，导出格式可选择为psd、png、jpg、svg等，方便用户进行二次创作和应用。

图11 系统设计图案Fig.11 System design pattern case. (a) Traditional structuralⅠ；(b) Traditional structural Ⅱ；(c) Innovative design structure

4 结束语

本文采用HTML5技术完成了柯尔克孜族花毡图案设计系统的开发，该系统主要分为输入输出层、设计层与处理层。简化了花毡图案的设计模式，将设计系统的功能模块分为花型设计、色彩设计、数据输出3部分。与传统设计方式相比，主要实现了以下突破:①该系统通过浏览器运行，用户可通过pc浏览器访问设计系统并实现交互式实时设计效果的预览和在线修改编辑，简洁的操作界面与便捷的设计模式能满足用户的基本设计需求，设计效率较高且交互性较强。②对柯尔克孜族民间花毡纹样进行收集整理和预处理基础上提取民族元素的图案基元，并进行数字化图案设计，不仅实现了用户在浏览器上进行花毡纹样的个性化自主创新设计，也为未来民间装饰图案的数字化保护积累了新的经验。实验源代码和相关技术方法也可运用于未来其他民族民间纹样的创新设计中，且可作为手机端App和微信小程序的开发的基础，为民间纺织品图案的可持续发展提供了新思路。