基于款式的面料展示系统开发

华柄宇,王进美,祝双武

(西安工程大学,陕西 西安710048)

0 引言

在市场调研中发现,企业生产的布料摆在一定区域进行展示或用图片进行展示,没有和衣服款式匹配起来,就不能让消费者更加直观地看到面料做成衣服的效果,这对企业和服装店是一种不足。随着计算机技术的发展,纺织行业也运用了纺织CAD、服装CAD等相关软件以辅助企业设计面料和衣服,不仅缩短了产品设计和生产时间,且变得更加便捷、高效。但是面料在衣服款式上展示还存在不足。如果能开发出一款基于款式的面料展示系统,从纱线、组织、紧度、密度选择到面料模拟,面料在款式上的展示等都用计算机虚拟完成,就可大大节省生产时间和成本,并且达到私人定制效果。为此,设计开发了一款基于款式的面料展示系统,面料是由本校开发出来的纺织面料快速智能设计系统模拟出来的效果图,具有很真实的色彩和花型;款式由专业人士画出,像款式设计师、服装设计师等专业人士根据流行款式用计算机设计出来,可把面料填充在款式上以体现出动态的展示效果。

1 系统概述

基于款式的面料展示系统的最终功能是面料映射到服装款式上,使面料的花型、颜色等效果都能在服装款式上得到充分展示,从而使得面料的展示效果更加生动、直观,并且展示了正身位、右侧身位、背面、左侧身位等6个不同方向的面料展示,达到360°展示效果。为了实现上述功能,本文对系统的体系结构和具体实现及各个功能模块做了详细介绍,主要有打开面料图模块,款式图的图像处理模块,动态展示效果模块及功能模块整合;其中打开面料图模块的功能是选择填充的面料图,面料图是由我校开发出来的纺织面料快速智能设计系统模拟出来的效果图。

款式图的图像处理模块是核心,功能是把款式图的目标图像标识出来并存到文件中,为后续的面料填充调用读取。图像处理包括图像二值化、连通区域标识及存取,其中图像二值化是把款式图像通过设定固定阈值[1],把灰度图像变成仅用两个值(0或1)来分别表示背景图像和目标图像的二值图像;其中目标取值为1,背景取值为0,为后续处理提供了方便。连通区域的标识是标记目标图像连通区域并标号,每标记一个目标图像连通区域标号加1,直到标记完毕。然后把整幅款式图像的像素点坐标及标号值存入流文件中,其中标号大于等于2的连通区域是目标图像,方便以后调用读取。

动态展示模块的功能是展示面料在款式上填充后的效果图,且面料的花型、颜色等效果都能在服装款式上得到充分展示;使得面料的展示效果更加生动、直观,连续加载一种款式6个不同身位的面料填充效果图,能体现出动态的面料展示效果[2]。动态展示模块需要调用读取款式图像的像素点坐标及标号值,当标号值大于等于2时映射面料图的纹理,进行铺图。由于面料比款式图小,如果直接映射会导致有些目标图像区域映射错误,所以在映射过程中要把面料图创建成与款式图大小相当的位图,再去映射。由于款式部位不同,其面料图的映射方向也不尽相同。例如衣身部位与衣领的纹理就方向不同,在前面对款式图各部位的像素点坐标及标号要分别读取,并对创建的面料图位图作相对应的旋转变换[3]。

2 系统开发及所用算法

2.1 系统开发框架和环境

基于款式的面料展示系统的开发是分功能模块化进行研究开发的,如图1功能模块化图,当各个功能模块编程实现后把这些功能模块按先后顺序整合到一起,用一个直观的菜单形式展现出来。这些功能模块分别是打开面料图、款式图的图像处理和动态展示效果图,然后进行各个功能模块的系统整合,一个完整的基于款式的面料展示系统就被研发出来了。

图1 功能模块化图

在系统开发环境上,基于款式的面料展示系统是由Windows XP或Windows 7系统的电脑,以及Delphi 7.0集成开发环境开发的。

2.2 系统开发所用算法及相关技术

2.2.1 图像的二值化

图像二值化的基本原理是将图像上的点的灰度置为0或255,也就是将整个图像呈现出明显的黑白效果,即将256个亮度等级的灰度图像通过适当的阈值选取而获得仍然可以反映图像整体和局部特征的二值化图像。在数字图像处理中二值图像占有非常重要的地位,特别是在实用图像处理中以二值图像处理实现而构成的系统是很多的。要进行二值图像的处理与分析,首先要把灰度图像二值化,得到二值化图像,这样有利于在对图像做进一步处理时,图像的集合性质只与像素值为0或255的点的位置有关,不再涉及像素的多级值,使处理变得简单且数据的处理和压缩量小。为了得到理想的二值图像,一般采用封闭、连通的边界定义不交叠的区域。所有灰度大于或等于阈值的像素被判定为属于特定物体,其灰度值为255表示,否则这些像素点被排除在物体区域以外;灰度值为0,表示背景或者例外的物体区域。如果物体同背景的差别表现不在灰度值上(如纹理不同),可以将这个差别特征转换为灰度的差别,然后利用阈值选取技术来分割该图像。动态调节阈值实现图像的二值化可动态观察其分割图像的具体结果[1]。

图像二值化的方法有很多,阈值的选择是二值化图像的关键。二值化方法有迭代法[4],OTSU算法[5]等,OTSU算法也称大津算法,是全局二值化算法的经典算法之一。其基本思想是求取最佳门限阈值,图像灰度直方图被此阈值分割成黑白(背景与前景)两部分,并使两部分类间的方差取得最大值,类内方差值最小,即类间分离性最大,但类内的相似性最大。迭代法的主要思想是循环利用迭代的方法,逐步逼近最佳阈值[6]。而本文图像的二值化的具体方法是固定阈值法二值化,即通过设定固定阈值,把灰度图像变换成仅用两个值(0或1)来分别表示的目标图像和背景图像的二值图像,其中目标取值为1,背景取值为0。在实际的位图(Bitmap)中,0对应于RGB值均为0(黑色),1对应于RGB值均为255(白色)。

2.2.2 目标图像的连通区域标记算法

基于像素点的连通区域标记算法通常可以归纳为顺序法[7]和区域增长法。顺序法是二值图像区域标记的传统算法,需要扫描两次图像,对于未作标记的像素标号可以从它的邻域中获得。第一次扫描逐行逐列扫描像素,判断像素之间的邻域关系并标号,第二次扫描消除重复性标记的像素点,该算法需两次扫描图像增加了算法的运行时间。

区域增长法采用种子点填充的原理,只需要对图像进行一次扫描,可分为递归法、深度优先搜索法和广度优先搜索法。递归法需要消耗很大的堆栈空间,仅适用于小面积连通区域的标记,如果图像中含大面积的连通区域则会导致系统堆栈溢出,算法运行失败[8]。而本系统所用的款式图的连通区域面积较小,可以采用递归法标识连通区域。递归法常见的有四邻域标记算法和八邻域标记算法。

(1)四邻域标记算法 四邻域标记算法包括以下步骤:①判断此点四邻域中的最左,最上有没有点,如果都没有点,则表示一个新的区域的开始。②如果此点四邻域中的最左有点,最上没有点,则标记此点为最左点的值;如果此点四邻域中的最左没有点,最上有点,则标记此点为最上点的值。③如果此点四邻域中的最左有点,最上都有点,则标记此点为这两个中的最小的标记点,并修改大标记为小标记。

(2)八邻域标记算法 八邻域标记算法包括以下步骤:①判断此点八邻域中的最左、左上、最上、上右点的情况,如果都没有点则表示一个新的区域的开始。②如果此点八邻域中的最左有点,上右都有点,则标记此点为这两个中的最小的标记点,并修改大标记为小标记。③如果此点八邻域中的左上有点,上右都有点,则标记此点为这两个中的最小的标记点,并修改大标记为小标记。④否则按照最左,左上,最上,上右的顺序,标记此点为四个中的一个[9]。

2.2.3 位图的创建与旋转

在对款式图的目标图像进行铺图时,每块连通区域的纹理角度和方向都是不一样的。例如衣领和衣袖部位,在纹理映射之前要根据每块连通区域的特点对布料图像位图进行旋转角度调整;否则映射到模特身上的布料纹理、花型都是一样的,无法反映出真实效果。图像的旋转也是一个自定义过程,一般图像的旋转是以图像的中心为原点旋转一定角度。

图像的旋转其实就是图像上像素点的坐标变换,假如旋转前某一点的坐标为[x0,y0,1],旋转后的坐标为[x1,y1,1],在二维平面上点绕原点顺时针旋转θ角,则其变换矩阵如式1所示:

3 系统开发过程及功能展示

3.1 系统的功能结构图

在开发过程中该系统是模块化设计,主要按照功能化模块进行编程完成。这是因为将系统按功能模块化后,目的清晰,编程操作便捷,有问题容易解决。在系统的开发过程中主要分了如下几块:打开面料图,款式图的图像处理,动态展示效果,进行模块整合,如图2所示。

图2 系统的功能结构图

3.2 打开面料图模块

打开面料图模块功能是打开选择的面料图,在系统中显示出面料的图像,也就是用来铺在款式上的面料图像,如图3所示。

图3 打开面料图

3.3 款式图的图像处理

款式图的图像处理功能是把款式图的目标图像标识出来并存到文件中,为后续的面料填充调用读取。这一功能模块包括图像二值化及其初始化,款式图目标图像的标识,目标图像的像素点坐标及标号的保存,以及目标图像的像素点坐标及标号的读取,如图4所示。

图4 图像处理窗体界面

3.3.1 款式图像的二值化及其初始化

款式图像首先要二值化,通过设定固定阈值,把灰度图像变换成仅用两个值(0或1)来分别表示的目标图像和背景图像的二值图像;设置为24位真彩色,其中目标取值为1,背景取值为0。实际位图(Bitmap)中,0对应于RGB值均为0(黑色),1对应于RGB值均为255(白色)。当确定按钮按下时,图像二值化并对图像的每个像素点赋值。

在图像二值化的同时对图像进行扫描,初始化赋值标号,白色的区域标号为1,黑色的区域标号为0,定义一个数组Yarray[i,j]记录图像的坐标点的标号,i表示行坐标,j表示列坐标。编程实现原理是图像二值化后,每个像素点的值分别是255或0,再次对图像从左到右,从上到下,一行一行使用Scanline进行扫描,通过把每个像素点的值除以255取整赋值给Yarray[i,j],这样就把整个款式图像的每个像素点值初始化成0或1了。

3.3.2 目标图像的标记

在款式图的标记中,款式图以内才是目标图像需要标识的,以外的为背景图像,是不需要标识的。当用鼠标点击某一目标区域时该目标区域被标识,标号增加1,显示为蓝色,如图5(a)所示;其余的目标图像连通区域以此类推,标识完所有的目标区域时,整个款式图显示蓝色,如图5(b)所示。在某一连通区域进行标识时要搜索边界,当到边界时就往回搜索,直到整个连通区域被标识完,这里所用的方法是四邻域标记算法,是一个递归的过程。目标图像的标号初始化值为2,是一个鼠标按下相应事件。

图5 目标图像标记图

3.3.3 目标图像的像素点坐标及其标号保存调用

用鼠标点击目标图像,直至目标图像全部被标识。如图5(b)右图所示蓝色的部分是目标图像,主要把其像素点坐标及其标号存到一个文件中,每当需要对这幅款式图进行铺图时调用保存在文件中的数据即可。

3.4 动态展示效果的实现

3.4.1 面料填充

在填充面料时要注意几个实际问题,一是在进行面料填充时要创建一个和款式图图像大小相同的面料位图,这样才能使款式图像与位图的像素点一一对应,使款式图中的目标图像全部填充面料的纹理和花型,形成完美的匹配。二是在进行面料填充时,有些部位是需要面料图旋转一定角度后再进行填充,因为在款式图图像标识时,不同的目标图像连通区域的纹理角度和方向有些是不一样的。例如领子部分和袖子部分的连通区域,在面料填充之前要根据目标图像每块连通区域的特点对布料图像进行旋转角度调整,否则映射到款式图像上的布料纹理、花型都是一样的,无法反映出真实效果。正常的面料填充效果图及动态展示效果图如图6所示。

解决第一个问题需要自定义一个过程(create_Image(var bmp:tbitmap;bmp1:tbitmap)),直接调用,按照款式图的大小创建位图;位图加载面料图像,把面料图(原图)用for循环的形式按照款式图的宽度和高度多铺几个就可以解决。用款式图的高度除以面料图的高度得到的值作为铺的行数,款式图的宽度除以面料图的宽度作为铺的列数,把创建好的位图像素点值赋值给款式图的目标图像相对应的像素点,就可以实现面料填充款式图。

解决第二个问题也是自定义一个过程(bmp_rotate(Srcbmp,DestBmp:Tbitmap;angle:extended)),把上述所创建的位图进行任意角旋转,然后再与目标图像需要旋转的连通区域的像素点一一对应;图像的旋转其实就是图像上相应的像素点的坐标变换,把位图旋转前某一点的像素值赋值给旋转后位图相对应的像素点,这样就可以达到整幅图像的旋转。

首先要确定需要旋转的角度(绕中心点顺时针),调用该过程,最后进行填充,这样就解决问题了。最后就是实现正常的面料填充了,当按下确定按钮时系统会自动调用创建位图、旋转位图两个过程;创建好所需要的位图和旋转位图,进行面料填充时自动调用所需的位图,如图6所示。

图6 面料填充

3.4.2 系统的使用

第一步,启动应用程序(基于款式的面料展示系统),单击文件菜单→打开,会出现一个选择面料图的对话框,选择想要的面料图,如图7(a)所示。

第二步,选中想要的面料图后,点击打开,会在Image1中显示所选中的面料图,如图7(b)所示。

图7 面料打开示意图

第三步,点击动态展示菜单→OK,面料在款式图上的展示效果会在Image2、Image3上体现出来,如图8所示。

图8 动态展示效果图

4 结语

基于款式的面料展示系统开发其功能是面料映射到服装款式上,使面料的花型、颜色等效果都能在服装款式上得到充分展示;使得面料的展示效果更加生动、直观,且展示了正身位、右侧身位、背面、左侧身位等6个不同方向的面料展示效果图,达到了360°展示效果。该系统的主要功能是实现用纺织CAD模拟出来的面料在款式上的具体展示,让用户很直观、方便地看到了将面料做成成衣后的真实效果,对其设计,生产都有很好的指导作用。