基于超文本标记语言5的横编计算机辅助设计系统
2017-10-25高梓越丛洪莲蒋高明汤梦婷于璐璐
高梓越， 丛洪莲， 蒋高明， 王 薇， 汤梦婷， 于璐璐
(1. 江南大学 教育部针织技术工程研究中心，江苏 无锡 214122;2. 生态纺织教育部重点实验室(江南大学)， 江苏 无锡 214122)
基于超文本标记语言5的横编计算机辅助设计系统
高梓越1,2， 丛洪莲1,2， 蒋高明1,2， 王 薇1,2， 汤梦婷1,2， 于璐璐1,2
(1. 江南大学 教育部针织技术工程研究中心，江苏 无锡 214122;2. 生态纺织教育部重点实验室(江南大学)， 江苏 无锡 214122)
为满足横编针织物在线设计的需求，在传统横编计算机辅助设计(CAD)的基础上，基于超文本标记语言5(HTML5)技术设计并实现互联网横编CAD系统。根据横编针织物的设计特点和成形原理，分别对花型数据和成形数据进行数学建模和数据结构优化，实现多视图设计和成形工艺设计。同时，结合数据库技术开发款式与组织库自定义的功能，并在研究花型编译的基础上，实现上机文件的生成。此外，研究了软件架构，基于B/S模式将程序部署在服务器上，系统的运行则在客户端，从而实现了数据处理与显示的分离。最后，通过提花围巾设计实例进行系统检验，结果表明该系统设计织物直观方便效率高，满足横编针织物在线设计的需求。
在线设计； 横编针织物； 数据库； 超文本标记语言5
横编计算机辅助设计(CAD)发展至今，在毛衫设计、成形工艺、制版设计等功能上已具有很高的实用性[1]，但在互联网时代，国内外的横编CAD软件都没有赋予其互联网的内容，依然存在安装维护成本高、过于封闭、扩展性差等缺点[2]，既不能面向产品的生产全过程，也不能满足互联网时代随时随地设计的需求。
开发互联网横编CAD系统，并不是简单地将单机软件移植到浏览器上，互联网应用程序的开发环境、开发语言与单机软件的差异，以及浏览器本身的局限性阻碍了横编CAD系统网络化的进程。本文将超文本标记语言5(HTML5)技术应用于开发横编CAD系统，提升系统交互的可靠性与操作的流畅性，将程序安装在远程服务器上，用户通过浏览器访问系统。
1 基于HTML5的横编CAD系统
针对横编CAD互联网化的需求，本文采用HTML5技术开发横编CAD系统，其主要特点有：1)采用HTML5技术，解决浏览器的交互性与兼容性，并提高设计花型的效率；2)在云端集中存储数据，后台使用基于SQL Server的数据库技术，保证了数据安全性，提高了数据管理的效率和数据处理的流畅性；3)提供款式与组织自定义功能，用户可自行设计款式与组织并保存，以重复使用。
1.1 界面交互
本文实现浏览器的交互性能主要应用HTML5中的绘图功能，即Canvas元素，Canvas元素作为HTML5新添加的功能，提供了功能强大的绘图方法，可很方便地绘制路径、矩形、圆弧、字符以及添加图像，绘图效率大幅提升[3]。
在使用横编CAD系统的设计功能时，如图1所示。选取织针编织动作、颜色、矩形绘图工具，即可在系统的花型设计区域绘制带有编织动作的绿色矩形图案，在绘制过程中应用到离屏Canvas进行图像换色，应用JS函数监听Mousedown、Mouseup事件绘制矩形并改变相应位置数组的值。
图1 横编CAD交互示例Fig.1 Example of interaction of flat knitting CAD
此外，HTML5还可添加监听其他鼠标事件和键盘事件，通过监听这些操作事件并编写相应的执行函数提高浏览器的交互性，如鼠标滚轮缩放图像、Ctrl+z撤销操作等。同时，各大浏览器对HTML5具有良好的兼容性，在电脑、手机上都可稳定运行。经实测，各绘图工具绘制花型方便，鼠标键盘事件相应快速准确，不同视图之间切换流畅，满足设计者的需求。
1.2 云端数据库
每个横编产品包含大量的花型数据、工艺数据与织造数据，传统的单机版横编CAD往往生成一个或多个文件存储数据，管理十分困难。与之不同，本文基于HTML5开发的横编CAD系统使用SQL Server数据库技术在云端集中存储数据，集中存储数据既保证数据的安全又便于对数据的管理。利用云端数据库技术极大地方便了用户对产品数据的存取调用，即用户无论在何时何地，使用任何设备都可访问数据库。也方便不同用户之间对产品的共享与协作，即用户可选择共享自己的产品数据，其他用户可查看并使用。
当用户在查找产品时，横编CAD系统向服务器发送HTTP响应，服务器发送指令查询数据库数据，若数据库中存在数据则返回给服务器，不存在数据则不返回，服务器发送HTTP响应给用户，用户即可得到所查找产品的所有数据。同时SQL与后台ASP.NET有天然的兼容性，可扩展性强，如图2所示。
图2 查找产品示意图Fig.2 Diagram of search product
1.3 款式与组织自定义
在设计横编产品过程中，款式与组织的重复使用能有效提高设计的效率。用户往往自行设计一些款式或组织结构，在之后的设计中循环调用，这种一次设计，多次使用的方法很大程度地减少工作量[4]，因此，本文系统设计款式与组织数据库，提供存储自定义款式与自定义组的功能。同产品数据一样，用户可随时随地管理、共享款式与组织数据。
2 横编CAD系统的架构
横编CAD系统架构图如图3所示。本文系统架构遵循B/S架构，主要分为3层：基于PC、手机等各客户端的设计层、基于Web服务器的实现层和基于数据库服务器的存储层[5]。这样的架构具有将数据的逻辑处理与数据的显示分离、易于交互、可扩展性强等特点。具体各层功能如下所述：1)设计层：本层主要由用户和客户端浏览器组成。运用HTML5和JavaScript提高浏览器的交互性，用户在客户端浏览器上进行横编产品的花型设计与工艺设计，通过HTTP与TCP/IP协议向Web服务器传输数据，同时接受Web服务器返回的数据，将结果展示给用户。2)处理层：本层由Web服务器组成。应用ASP.NET C#开发后台程序随时接受客户端发送的数据并进行处理，并通过SQL语句与数据库服务器相连，本层主要实现不同层中数据格式的解析、转换与传递。3)存储层：本层由数据库服务器组成。运用SQL Server数据库技术完成数据在云端的存储与调用，接受、执行服务器发送的指令并返回数据。本层具有较高的安全性，保证了用户数据的完整。
图3 系统架构图Fig.3 System architecture diagram
3 系统功能及其实现
3.1 系统的功能模块
横编CAD系统的主要功能如图4所示，包括织物设计模块、工艺设计模块、数据输出模块和产品数据库模块4部分[6]。
图4 系统功能模块图Fig.4 System functional diagram
3.1.1织物设计模块
该模块遵循多视图设计原则，设计时可在花型意匠图、编织工艺图与线圈结构图间进行切换，每种视图以不同的形式表达花型，且具备基本的绘图工具，均可便捷的编辑花型。设计完花型后，可依据设计选择提花类型与提花区域完成提花编辑[7]。
3.1.2工艺设计模块
该模块提供款式数据库，每种款式都有对应的规格数据默认值，通过编辑这些数据进行款式设计，并将自动计算衣片的成形工艺[8]，工艺同时保存在数据库中，可随时读取编辑与修改。
3.1.3数据输出模块
本模块中花型数据编译与检验并行，检验的目的为发现花型程序化错误的地方，程序有误则停止编译，并指出错误原因，在编译完成后可导出电脑横机的上机文件，即可上机完成编织。
3.1.4数据库模块
该模块是系统区别于现有的横编CAD系统的特征之一，完备的数据库提供产品信息的存储、查询、读取的功能。同时为组织库、款式库提供数据支持。
3.2 系统主要功能的实现
3.2.1多视图设计
为完整清晰地表示编织过程，可采用3种视图进行花型设计。不同视图可任意切换，且在任一视图上编辑，另2个视图均会作出相应变化，因此首先要对花型信息与参数信息进行数学建模与数据结构设计。
1)花型信息。花型信息即所有工艺点信息，每个工艺点信息主要包括编织动作与纱线颜色[9]，因此可将工艺点信息定义为一维矩阵P，如下式所示：
P=[kc]
(1)
式中：k为编织动作，用数字1～17表示；c为纱线颜色，数字1～36表示不同的颜色。
工艺行数为m，针数为n的花型信息可用而二维矩阵F表示，如下式所示。
(2)
式中：i=1,2,…,m；j=1,2,…,n；Pij表示在第i行第j根针的工艺点信息。
采用JavaScript语言对花型信息进行数据结构设计，将花型信息定义为动态的二维结构体数组。
2)参数信息。参数信息即所有工艺行的编织信息，每行的工艺行信息主要包括机头方向、工作系统、牵拉、机速、密度、纱嘴等。工艺行数为m，参数种类数为n的参数信息可用二维矩阵A表示，如下式所示。
(3)
式中：i=1,2,…,m；j=1,2,…,n。aij表示在第i行第j种参数的值。
参数信息的数据结构设计同花型信息，定义为动态的二位结构体数组。
3种视图包含全部或部分花型信息与参数信息，因此在设计界面建立4个
图5 设计视图区域显示内容Fig.5 Display contents of design view
图6 多视图设计Fig.6 Multiple view. (a) Pattern view; (b) Technical view; (c)Loop relation view
在视图切换过程中，2个结构体数组要在不同视图间传值，前端即HTML5使用hidden控件，后端即ASP.NET使用Session对象，可以保证数据转换的效率与安全。
3.2.2工艺设计
工艺设计主要指成形工艺设计，最主要的方法是收放针成形方法，根据收放针成形的原理可得出成形工艺数据的特点：1)成形数据包含整件服装的成形信息；2)服装成形信息由每个衣片的成形信息组成；3)每一衣片的数据由不同形状的部件信息组成；4)每一部件的信息由不同编织方式的段信息组成；5)每一段的信息由不同收放针的条信息组成；6)每一级信息除了包含下一级的信息外，还包含应用于本级的信息，如片信息中的横纵密、起始针数等，部信息中的花型行数、变化针数等，条信息中的循环次数等，因此成形数据的结构应设计为4级结构体数组(如图7所示)，由上到下依次为片信息、部信息、段信息和条信息。
图7 成形数据结构示意图Fig.7 Structural diagram of shaping data
工艺设计由模型编辑对话框完成，主要的设计流程如图8所示。在成形编辑完成后，系统将成形信息与组织点信息进行合成，显示到底组织上。
图8 工艺设计主要流程图Fig.8 Flow chart of technological designs
3.2.3花型编译与文件输出
花型编译是花型数据转程序化的过程，其具体流程如图9所示，在编译中要完善编织过程，即减少不必要的编织与增加辅助编织，同时合理安排机头方向减少行程数、优化分配系统缩短机头动程[10]。花型编译的目的是导出上机文件，以STOLL电脑横机为例，需要JAC、SET、SIN 3个文件，SIN控制编织系统，JAC控制织针编织动作，SET控制编织参数(密度、牵拉等)，3个文件相辅相成，共同作用。除此之外，还可导出花型文件，直接保存花型数据与工艺数据。
图9 花型编译流程图Fig.9 Flow chart of pattern compile
3.2.4数据库
通过SQL语言与数据库相连，对数据进行管理。在数据库中建立与花型数据信息相对应的字段，并设置序号为主键，进行编辑与删除等操作时对主键对应的数据进行操作。检索设置多字段模糊查询，检索结果精确且快速。除建立个人或企业数据库，还有公共数据库，用户可上传共享自己设计的产品，提高行业内部交流协作程度。
4 系统设计实例
以提花围巾产品为例，设计过程主要分一下几步。
1)导入BMP图片，如图10所示。选择文件菜单中的花型导入，通过对话框选择需要导入的图案，系统将自动跳转到换色界面，用户根据需要将图片中颜色换为系统色号。确定后系统会以图案的大小作为花高花宽。
图10 导入BMP示意图Fig.10 Diagram of input BMP
2)提花编辑。选择提花编织里的空气层提花，系统完成提花转换。图11示出空气层提花示意图。
图11 空气层提花示意图Fig.11 Diagram of net jacquard
3)导出上机文件。安排纱嘴后进行花型编译，选择生成STOLL上机文件。
5 结 论
本文开发与实现了基于HTML5的横编CAD系统，该系统基于B/S架构，主要分为设计层、处理层与存储层。简化了横编针织物的设计模式，将设计系统的功能模块分为织物设计、工艺设计、数据输出和产品数据库4部分。该系统与单机版横编CAD相比，主要实现了以下突破：1)该系统通过浏览器运行，用户可通过任意终端上的浏览器访问系统，丰富的设计工具与简单化的设计模式在设计功能上满足了用户的需求；2)利用HTML5技术提高了浏览器的绘图效率与交互性，实现了横编产品在浏览器上的快速设计；3)利用云端数据库更好的管理横编产品，增加款式库与组织库自定义与共享功能，提高了设计效率。
通过实际使用极大地缩短产品从设计到成品的流程，提高了产品开发的效率。同时，多元化的网络数据库加强了企业产品数据的管理，进一步提高了企业的信息化进程。今后可美化界面效果，继续简化设计过程，增加织物仿真模块，提高系统的实用性。
[1] 洪岩. 横编毛衫工艺设计系统的开发[D].无锡：江南大学,2014:1-2.
HONG Yan.Research and development of the CAD system for flat-knitted woolen sweater technology[D]. Wuxi:Jiangnan University, 2014:1-2.
[2] 闫怡，张瑞云，李汝勤．纺织 CAD 的网络设计发展趋势[J]． 纺织学报，2004，25(1):115-118．
YAN Yi，ZHANG Ruiyun，LI Ruqin． The trend of network aided design of fabric CAD [J]． Journal of Textile Research，2004，25(1):115-118．
[3] 余飞. 基于HTML5的图形图像协同处理技术研究与实现[D].荆州:长江大学,2015:8-10.
YU Fei.A reaserch and implementation of graph and image collaborative processing technology based on HTML5[D]. Jingzhou：Yangtze University,2015:8-10.
[4] 成舟,邵志清,张欢欢,等. HTML 5 Canvas技术在工程流程图中的研究与应用[J]. 华东理工大学学报(自然科学版),2015,41(2):260-265.
CHENG Zhou,SHAO Zhiqing,ZHANG Huanhuan,et al. Investigating and using HTML5 canvas techniques in engineering flowchart[J]. Journal of East China Unversity of Science and Technology (Natural Science Edition),2015,41(2):260-265.
[5] 王松,马崇启. 织物CAD在线设计系统[J]. 纺织学报,2014, 35(3):132-135.
WANG Song，MA Chongqi. Online fabric design system using CAD[J]. Journal of Textile Research，2014,35(3):132-135.
[6] 罗冰洋,莫易敏,郭艳. 电脑横机花型准备系统的设计[J]. 纺织学报,2007,28(7):116-120.
LUO Bingyang, MO Yimin, GUO Yan. Design of pattern preparation system of computerized flat knitting machine[J]. Journal of Textile Research,2007,28(7):116-120.
[7] 杨亦红,金永敏,万志平. 全电脑横机计算机辅助花型设计系统[J]. 计算机应用,2011,31(6):1713-1715.
YANG Yihong， JIN Yongmin， WAN Zhipin. Computer aided pattern designing system for full-electronic flat machine[J]. Journal of Computer Applications,2011,31(6):1713-1715.
[8] 刘童花,邓中民,索盈,等. 针织横编羊毛衫设计系统开发[J]. 武汉科技学院学报,2007,20(2):19-23.
LIU Tonghua, DENG Zhongmin, SUO Ying, et al. Development for the design system of wool sweater by flat knitting machine[J]. Journal of Wuhan University of Science and Engineering,2007,20(2):19-23.
[9] 徐巧,丛洪莲,张爱军,等. 纬编针织物CAD设计模型的建立与实现[J]. 纺织学报,2014,35(3):136-140,144.
XU Qiao，CONG Honglian，ZHANG Aijun，et al. Establishment and implementation of weft-knitted fabric′s design model in CAD system[J]. Journal of Textile Research,2014,35(3):136-140,144.
[10] 王继曼,宋广礼. 电脑横机编织工时的预测[J]. 纺织学报,2010,31(5):48-54.
WANG Jiman，SONG Guangli. Knitting time forecasting of computerized flat knitting machine[J]. Journal of Textile Research, 2010,31(5):48-54.
Computeraideddesignsystemforflat-knittedfabricbasedonhypertextmarkuplanguage5
GAO Ziyue1，2， CONG Honglian1，2， JIANG Gaoming1，2， WANG Wei1，2， TANG Mengting1，2， YU Lulu1，2
(1.EngineeringResearchCenterforKnittingTechnology,MinistryofEducation,JiangnanUniversity,Wuxi,Jiangsu214122,China； 2.KeyLaboratoryofEco-Textiles(JiangnanUniversity),MinistryofEducation,Wuxi,Jiangsu214122,China))
In order to meet the requirement of online design of flat-knitted fabric, on the basis of conventional flat-knitted computer aided design(CAD), this paper designed and implemented the Internet CAD system for flat-knitted fabric based on hyper text markup language 5 technology. According to the design features and shaping principle of the flat-knitted fabric, the data of pattern and shaping were mathematically modeled and data structure was optimized, respectively, and multi-view and shaping process design was realized. Meanwhile, by combining with database technology, the functions of sweater style and pattern custom database were developed. And based on the research of pattern compiling, the file export was realized. Besides, the software architecture was researched, and the system was deployed on the server based on the B/S mode and ran at the client terminal. Thus the separation of data process and display was realized. Finally, by the design example of jacquard scarf, the system was tested. And the results show that the system is intuitive, convenient and efficient for design fabric, meeting the demands of online design of flat-knitted fabrics.
on-line design; flat-knitted fabric; data base; hyper text markup language 5
TS 181.9
A
10.13475/j.fzxb.20161204406
2016-12-26
2017-06-21
国家自然科学基金项目(61602212)；江苏省产学研联合创新资金-前瞻性联合研究项目(BY2016022-09、BY2016022-42)
高梓越(1992—)，男，硕士生。主要研究方向为针织软件的开发与应用。丛洪莲，通信作者，E-mail：cong-wkrc@163.com。
