一种基于浏览器的交互式设计系统和方法

1.本发明属于图像处理与视觉呈现相结合的技术领域，具体涉及一种基于浏览器的交互式设计系统和方法。


背景技术：

2.服装设计属于工艺美术范畴，是实用性和艺术性相结合的一种艺术形式。设计意指计划、构思、设立方案，也含有意象、作图、造型之意，而服装设计的定义就是解决人们穿着生活体系中诸问题的富有创造性的计划及创作行为，然而市面上各种的服装设计系统仍存在各种各样的问题。
3.服装设计过程中，设计师将图案施加于衣服上一般需要使用adobe photoshop或adobe illustrator等专业工具手动划分衣服中每个部件的图层，对齐每个部件上图案的大小，重复工作较多，费时费力且效率低下。
4.虽然出现了一些服装设计系统，如专利文献cn114049438a公开了一种服装设计系统及服装设计方法，该服装设计主要是对服装的款式进行设计，并不能实现对服装上的图案进行设计。再如专利文献cn111178638a公开了一种服装设计优化系统，主要是对定制服装进行优化，具体优化体型特征比例，但是并不能实现对服装上的图案进行设计。


技术实现要素：

5.鉴于上述，本发明的目的是提供一种基于浏览器的交互式设计系统和方法，提升图案施加到衣服上的效率。
6.为实现上述发明目的，实施例提供了一种基于浏览器的交互式设计系统，包括数据处理模块，数据模块，参数调整模块以及服装呈现模块；
7.所述数据处理模块用于对上传的服装图像转换为标准化格式文件；
8.所述数据模块用于解析标准化格式文件，并从中提取款式、服装部件、图案以及环境背景数据分别存储于款式数据库、服装部件数据库、图案数据库以及环境背景数据库；
9.所述参数调整模块用于提供款式、环境背景、图案、服装部件以及视角的选择功能，同时提供图案的应用参数；
10.所述服装呈现模块用于对选择的款式、环境背景、图案、服装部件、视角以及设定的应用参数进行渲染并呈现渲染结果。
11.优选地，所述数据处理模块将服装图像转换为svg格式文件。
12.优选地，所述数据处理模块还对同款式下不同视角的服装部件进行匹配，匹配后的数据文件与svg格式文件整合转化为标准化格式文件，所述标准化格式文件优选为json格式。
13.优选地，所述参数调整模块由选择框、滑块、底色颜色选择器组成，实现对应用参数的调整，其中，应用参数包括循环方式、大小、角度、偏移以及底色。
14.优选地，所述服装呈现模块包括显示部分和图标部分，其中，显示部分用于呈现渲
染结果，图标部分用作显示部分的操作项，包括上传图案、保存、下载效果图、重置所有、清空当前、撤销、图案详情查看、适应屏幕调整。
15.优选地，所述显示部分包括图案图层、底色图层、底图图层、闪烁图层，每个服装部件对应一个图案图层、底色图层以及闪烁图层。
16.优选地，选中服装部件的闪烁图层会呈现闪烁；选择的图案和生成的图案被应用于选中服装部件可视化呈现。
17.为实现上述发明目的，实施例提供了一种云试衣方法，所述方法采用上述基于浏览器的交互式设计系统，所述方法包括以下步骤：
18.上传服装图像；
19.利用数据处理模块用于对上传的服装图像转换为标准化格式文件；
20.利用数据模块解析标准化格式文件，并从中提取款式、服装部件、图案以及环境数据并存储；
21.通过参数调整模块选择服装款式、环境背景、图案、服装部件，并调整应用参数；
22.利用服装呈现模块对选择的款式、环境背景、图案、服装部件、视角以及设定的应用参数进行渲染并呈现渲染结果。
23.与现有技术相比，本发明具有的有益效果至少包括：
24.将上传的服装图像通过格式转换并解析后形成提取款式、服装部件、图案以及环境背景数据并存储，快速丰富数据库，并以此数据库为基础，为设计师提供可供选择的款式、环境背景、图案、服装部件、视角以及图案被生成图案时的应用参数，这样设计师只需要选择即实现了图案设计过程，设计结果被自动渲染后可视化呈现，大大提升了图案施加于衣服上的效率。
附图说明
25.为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图做简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动前提下，还可以根据这些附图获得其他附图。
26.图1是实施例提供的基于浏览器的交互式设计系统的结构示意图；
27.图2是实施例提供的云试衣方法的流程图。
具体实施方式
28.为使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例对本发明进行进一步的详细说明。应当理解，此处所描述的具体实施方式仅仅用以解释本发明，并不限定本发明的保护范围。
29.图1是实施例提供的基于浏览器的交互式设计系统的结构示意图。如图1所示，实施例提供的基于浏览器的交互式设计系统包括数据处理模块1、数据模块2、参数调整模块3以及服装呈现模块4，该系统在在浏览器呈现。
30.实施例中，数据处理模块1用于对上传的服装图像转换为标准化格式文件。其中，上传的服装图像可以是带模特的，也可以是不带模特的，且服装视角各异。输出的标准化文
件格式文件包括svg格式文件、json格式文件。
31.数据处理模块主要包含三个部分，第一部分是提供《数据处理手册》，该《数据处理手册》指导设计师怎样使用adobe illustrator通过标准化操作将标准格式的服装文件转化为标准格式的svg文件。通过该《数据处理手册》可以实现利用设计师的知识对服装部件进行划分。由于svg格式集成了强大的图像处理能力，将服装文件转化为标准格式的svg文件，方便网页端程序所用。
32.第二部分是对同款式下不同视角的服装部件进行匹配。如正视角下服装有“前片”这一部件，后视角下服装有“大身”这一部件。从立体视角看这两个部件有强烈的相关性。为了让切换服装视角后这些相关的服装部件的图案能够相互影响，需要设计师通过数据处理模块执行匹配。
33.第三部分是整合上传脚本，将第一部分得到的若干svg文件及第二部分输出的匹配后数据文件整合转化为json格式。整合成json格式是为了降低后续网络请求数提升程序响应速度。且json格式灵活，能为网页端程序的脚本直接处理，脚本会将处理得到的数据上传至系统中。
34.实施例中，数据模块2会请求服务端获取导入系统的标准化格式文件，并解析标准化格式文件，并从中提取款式、服装部件、图案以及环境背景数据分别存储于款式数据库、服装部件数据库、图案数据库以及环境背景数据库。数据库可以存储在云端，存储于数据库的数据可以被调用来用于服装设计。
35.实施例中，参数调整模块3用于提供款式、环境背景、图案、服装部件以及视角的选择功能。针对款式，会请求从款式数据库中提取款式并显示以供设计师选择，款式包括长款、短款、中长款等。针对环境背景，会从请求从环境背景数据库中提取环境背景并显示以供设计师选择，环境背景是一些列背景图像。针对图案，会请求从图案数据库中提取图案并显示以供设计师选择，每个图案以图片形式显示。针对服装部件，会请求从服装部件数据库提取服装部件并显示以供设计师选择，服装部件包括整体、袖子、前片、后面、门禁、帽子等。针对视角，提供正视角和后视角的选择。以上这些选择功能均通过选择框来呈现。用户通过这些选择功能可以选择调整款式、服装部件、图案及环境背景。
36.参数调整模块3还提供图案的应用参数。当选择服装部件和图案后，通过设置应用参数，可在服装部件上按照应用参数渲染图案得到设计的图案。应用参数通过选择框、滑块、底色颜色选择器呈现，应用参数包括循环方式、大小、角度、偏移以及底色。循环方式是指图案在选中服装部件上的循环方式，包括全循环、水平循环、垂直循环，且通过选择框呈现。大小是指图案在选中服装部件上呈现的大小，大小值通过滑块调整实现。角度是指图案在选中服装部件上呈现的角度，角度通过滑块调整实现。偏移是指图案在选中服装部件上的偏移方式，包括水平平移和竖直平移，平移值通过滑块调整实现。底色是指服装部件的底色，通过底色颜色选择器实现。
37.服装呈现模块4用于对选择的款式、环境背景、图案、服装部件、视角以及设定的应用参数进行渲染并呈现渲染结果。
38.具体地，服装呈现模块4包括显示部分和图标部分，其中，显示部分用于呈现渲染结果。显示部分包括图案图层、底色图层、底图图层、闪烁图层，每个服装部件对应一个图案图层、底色图层以及闪烁图层中的一个元素，即除底图图层外所有图层中的元素数均与服
装部件数+1相等，+1是考虑了整体作为一个部件，这样可单独调节每一服装部件的样式。图层间通过混合模式提升渲染效果。
39.图标部分用作显示部分的操作项，包括上传图案、保存、下载效果图、重置所有、清空当前、撤销、图案详情查看、适应屏幕调整等操作。
40.基于浏览器的交互式设计系统的使用流程包括：1.选中期望为其施加图案的款式；2.选中期望为其施加图案的服装部件；3.从图案数据库中选择图案施加到服装部件上；4.调整图案的大小、角度、偏移、底色；5.调整视角，切换有无模特，再执行步骤2、3操作。
41.使用基于浏览器的交互式设计系统时，选择服装部件后，在服装呈现模块中选择的服装部件会闪烁，并且选择图案后图案只会施加在选中的服装部件上，调整图案的应用参数也只影响选中服装部件的参数。调整大小、循环方式等参数会对选中服装部件的图案造成影响。切换视角后会改变服装呈现模块的底图，并且当前视角与之前视角中对应部件的图案样式会保留。每次调整后，服装呈现模块会实时渲染调整后图案并呈现，当然服装整体图像也会被成呈现。
42.实施例提供的基于浏览器的交互式设计系统，需要两类用户的配合，一类使用专业的设计软件对服装进行处理得到标准化的数据，将数据部署上系统后另一类即专业纺织品设计师访问系统可执行试衣的效果，观察图案在衣服上的效果，并对图案进行调整。
43.实施例提供的基于浏览器的交互式设计系统解决了全流程从服装样机数据处理到云试衣间生成的问题。该基于浏览器的交互式设计系统集成于浏览器客户端，只要用户设备中安装了浏览器即可使用，可在个人计算机及移动设备上使用，无需安装，无需安装更新包，使用便捷。方案集成了云端的图案数据库，能为服装施加各式各样的图案供服装设计师参考。
44.如图2所示，实施例还提供了云试衣方法，所述方法采用上述基于浏览器的交互式设计系统，所述方法包括以下步骤：
45.步骤1上传服装图像。
46.步骤2，利用数据处理模块用于对上传的服装图像转换为标准化格式文件。
47.步骤3，利用数据模块解析标准化格式文件，并从中提取款式、服装部件、图案以及环境数据并存储。
48.具体可以将款式、服装部件、图案以及环境数据分别存储于云端的款式数据库、服装部件数据库、图案数据库以及环境数据库；
49.步骤4，通过参数调整模块选择服装款式、环境背景、图案、服装部件，并调整应用参数。
50.步骤5，利用服装呈现模块对选择的款式、环境背景、图案、服装部件、视角以及设定的应用参数进行渲染并呈现渲染结果。
51.当然，应用的时候，可以直接采用步骤4和步骤5进行设计即可。
52.以上所述的具体实施方式对本发明的技术方案和有益效果进行了详细说明，应理解的是以上所述仅为本发明的最优选实施例，并不用于限制本发明，凡在本发明的原则范围内所做的任何修改、补充和等同替换等，均应包含在本发明的保护范围之内。