一种从设计效果图到可视化实施画面转换的方法

技术领域

本发明涉及数据可视化技术领域，具体地涉及一种从设计效果图到可视化实施画面转换的方法。

背景技术

随着大数据产业蓬勃发展，数据可视化的应用也越来越广泛，数据可视化把大量历史数据及实时数据进行应用处理，实现数据形象化、抽象化，从数据中分析业务、决策和规划，让数据迭代推动企业的发展和进步。在当前的数据可视化应用案例中，通常是使用拼接屏系统进行大屏高分辨率渲染，用户通过大屏幕的可视化展示画面进行业务场景的使用，如演示汇报、运营监控等。而现有技术中通常通过三维制图软件绘制设计效果图，却无法将设计效果图进行可视化实施画面转换，因此，亟需一种从设计效果图到可视化实施画面转换的方法将设计效果图转换成可视化实施画面。

发明内容

本发明提供一种从设计效果图到可视化实施画面转换的方法，从而解决现有技术的上述问题。

一种从设计效果图到可视化实施画面转换的方法，包括以下步骤：

S1)建立图层命名规则，设置一键导出工具和一键导入工具；

S2)获取与设计效果图相对应的psd文件，一键导出工具根据图层命名规则组织与设计效果图相对应的切图和文件夹结构，获得包含切图信息的xml文件；

S3)将包含切图信息的xml文件输入一键导入工具，利用一键导入工具对包含切图信息的xml文件进行解析、并将不同功能模块的切图按设计效果图内的尺寸及位置进行画面拼装，获得可视化实施画面。

进一步的，切图信息包括切图的尺寸、切图在画布中的位置坐标以及切图所属的功能模块。

进一步的，在步骤S2)中，一键导出工具根据所述图层命名规则组织与设计效果图相对应的切图和文件夹结构，获得包含切图信息的xml文件，包括利用一键导出工具对与设计效果图相对应的psd文件内的每个图层分别进行剪裁，获得若干个剪裁后的切图，若干个剪裁后的切图分别对应于不同功能模块，分别计算若干个剪裁后的切图的尺寸、并获取若干个剪裁后的切图在画布内的位置坐标，将若干个剪裁后的切图的尺寸以及若干个剪裁后的切图在画布内的位置坐标按照不同功能模块的类别进行存储，获得包含切图信息的xml文件。

进一步的，将包含切图信息的xml文件输入所述一键导入工具，利用一键导入工具对包含切图信息的xml文件进行解析、并将不同功能模块的切图按设计效果图内的尺寸及位置拼装画面，获得可视化实施画面，包括利用一键导入工具对包含切图信息的xml文件进行解析，读取包含切图信息的xml文件内存储的切图的尺寸以及切图在画布中的位置坐标，在三维引擎内模拟一个Photoshop内的画布坐标系，进行一比一还原设计效果图。

进一步的，图层命名规则包括不同类型的功能模块，不同类型的功能模块包括文本Text、图片Image和以特定符号开头的不同类型控件；利用不同类型的关键字区分不同类型控件；在关键字前设置下划线用于表示控件的不同功能；以特定符号开头的不同类型控件包括图层组按钮、输入框、滑动列表、滑动条、页签和开关选择。

进一步的，文本Text中包括图片切图静态文本_ArtStatic、与三维引擎相关的静态文本_Static以及正常动态文本；图片切图静态文本_ArtStatic用于当做图片切图，导入三维引擎后为一张图片；与三维引擎相关的静态文本_Static为与三维引擎相关的静态文本，与三维引擎相关的静态文本_Static用于三维引擎生成时实现自动选择静态字体；正常动态文本不带关键字，正常动态文本用于在三维引擎生成时选择动态字体。

进一步的，图片Image包括若干个用于实现不同图片功能的关键字，若干个用于实现不同图片功能的关键字包括九宫格图片_9S、大图片_Texture、脚本会自动切左半部分实现左右对称的图片_LeftHalf、脚本会自动切下半部分实现上下对称的图片_BottomHalf、脚本会自动切左下四分之一实现上下左右均对称的图片_Quarter、命名同一个psd中多次用到的图@Common以及命名多个psd中都用到过的图@Global。

进一步的，特定符号为@，以特定符号@开头的图层组按钮@Button包括若干个用于实现不同按钮功能的关键字，所述若干个用于实现不同按钮功能的关键字包括按钮正常状态_Normal、按钮按下状态_Pressed、按钮高亮状态_HighLighted和按钮不可用时状态_Disabled；所述滑动列表包括以特定符号@开头的用于标识一块滑动区域的控件@ScrollView、以特定符号@开头的用于标识滑动区域的大小的控件@Size和以特定符号@开头的用于自动布局的元素控件@LE；所述滑动条包括以特定符号@开头的用作进度条的控件@Slider和以特定符号@开头的用于标识进度条滑动区域的大小的控件@SliderSize；所述开关选择包括以特定符号@开头的用于标识开关或选择框的控件@Toggle；所述页签包括以特定符号@开头的用于切换页签的页签组件@TabGroup。

进一步的，以特定符号@开头的用于标识开关或选择框的控件@Toggle包括若干个用于实现不同开关选择功能的关键字，若干个用于实现不同开关选择功能的关键字包括选择框的背景图_Background和选择框的选中状态图_Checkmark；以特定符号@开头的用于切换页签的页签组件@TabGroup包括若干个用于实现不同页签组件功能的关键字，若干个用于实现不同页签组件功能的关键字包括标识页签组件_Tab、标识页签所控制的页面_Page、标识页签选中时的背景图_TabSel、标识页签未选中时的背景图_TabUnSel。

本发明的有益效果是：本发明通过一键导出工具根据图层命名规则组织与设计效果图相对应的切图和文件夹结构，将设计效果图内UI元素的尺寸和位置自动进行计算，形成可逆向还原效果图的xml文件以及UI元素切图并进行存储，并通过一键导入工具实现了从设计效果图到可视化实施画面的转换。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本实施例一提供的从设计效果图到可视化实施画面转换的方法示意图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施方式仅仅用以解释本发明，并不用于限定本发明。需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，以便一系列单元的过程、方法、系统、产品或设备不必限于那些单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其他单元。

实施例一，一种从设计效果图到可视化实施画面转换的方法，如图1所示，包括以下步骤：

S1)建立图层命名规则，设置一键导出工具和一键导入工具；

S2)获取与设计效果图相对应的psd文件，一键导出工具根据图层命名规则组织与设计效果图相对应的切图和文件夹结构，获得包含切图信息的xml文件；

S3)将包含切图信息的xml文件输入一键导入工具，利用一键导入工具对包含切图信息的xml文件进行解析、并将不同功能模块的切图按设计效果图内的尺寸及位置进行画面拼装，获得可视化实施画面。

切图信息包括切图的尺寸、切图在画布中的位置坐标以及切图所属的功能模块。

在步骤S2)中，一键导出工具根据所述图层命名规则组织与设计效果图相对应的切图和文件夹结构，获得包含切图信息的xml文件，包括利用一键导出工具对与设计效果图相对应的psd文件内的每个图层分别进行剪裁，获得若干个剪裁后的切图，若干个剪裁后的切图分别对应于不同功能模块，分别计算若干个剪裁后的切图的尺寸、并获取若干个剪裁后的切图在画布内的位置坐标，将若干个剪裁后的切图的尺寸以及若干个剪裁后的切图在画布内的位置坐标按照不同功能模块的类别进行存储，获得包含切图信息的xml文件。

将包含切图信息的xml文件输入所述一键导入工具，利用一键导入工具对包含切图信息的xml文件进行解析、并将不同功能模块的切图按设计效果图内的尺寸及位置拼装画面，获得可视化实施画面，包括利用一键导入工具对包含切图信息的xml文件进行解析，读取包含切图信息的xml文件内存储的切图的尺寸以及切图在画布中的位置坐标，在三维引擎内模拟一个Photoshop内的画布坐标系，进行一比一还原设计效果图。

图层命名规则包括不同类型的功能模块，不同类型的功能模块具有文本Text、图片Image和以特定符号开头的不同类型控件；利用不同类型的关键字区分不同类型控件；在关键字前设置下划线用于表示控件的不同功能；以特定符号开头的不同类型控件包括图层组按钮、输入框、滑动列表、滑动条、页签和开关选择。

文本Text中包括图片切图静态文本_ArtStatic、与三维引擎相关的静态文本_Static以及正常动态文本；图片切图静态文本_ArtStatic用于当做图片切图，导入三维引擎后为一张图片；与三维引擎相关的静态文本_Static为与三维引擎相关的静态文本，与三维引擎相关的静态文本_Static用于三维引擎生成时实现自动选择静态字体；正常动态文本不带关键字，正常动态文本用于在三维引擎生成时选择动态字体。

图片Image包括若干个用于实现不同图片功能的关键字，若干个用于实现不同图片功能的关键字包括九宫格图片_9S、大图片_Texture、脚本会自动切左半部分实现左右对称的图片_LeftHalf、脚本会自动切下半部分实现上下对称的图片_BottomHalf、脚本会自动切左下四分之一实现上下左右均对称的图片_Quarter、命名同一个psd中多次用到的图@Common以及命名多个psd中都用到过的图@Global。

本发明实施例中，特定符号为@，以特定符号@开头的图层组按钮@Button包括若干个用于实现不同按钮功能的关键字，所述若干个用于实现不同按钮功能的关键字包括按钮正常状态_Normal、按钮按下状态_Pressed、按钮高亮状态_HighLighted和按钮不可用时状态_Disabled；所述滑动列表包括以特定符号@开头的用于标识一块滑动区域的控件@ScrollView、以特定符号@开头的用于标识滑动区域的大小的控件@Size和以特定符号@开头的用于自动布局的元素控件@LE；所述滑动条包括以特定符号@开头的用作进度条的控件@Slider和以特定符号@开头的用于标识进度条滑动区域的大小的控件@SliderSize；所述开关选择包括以特定符号@开头的用于标识开关或选择框的控件@Toggle；所述页签包括以特定符号@开头的用于切换页签的页签组件@TabGroup。

以特定符号@开头的用于标识开关或选择框的控件@Toggle包括若干个用于实现不同开关选择功能的关键字，若干个用于实现不同开关选择功能的关键字包括选择框的背景图_Background和选择框的选中状态图_Checkmark；以特定符号@开头的用于切换页签的页签组件@TabGroup包括若干个用于实现不同页签组件功能的关键字，若干个用于实现不同页签组件功能的关键字包括标识页签组件_Tab、标识页签所控制的页面_Page、标识页签选中时的背景图_TabSel、标识页签未选中时的背景图_TabUnSel。

以下是关于若干个用于实现不同图片功能的关键字更详细的说明：

_9S：九宫格图片。命名为_9S:XX(四个边界宽度一样)或_9S:XX:XX:XX:XX(左:上:右:下)。比如_9S:20会把图层切成左上右下都为20像素的九宫格图片。_9S:10:10:15:15会把图层切成左10、上10、右15、下15的九宫格图。

_Texture：大的图片用Texture，比如背景。对应UGUI的RawImage。

_LeftHalf：命名左右对称的图片，脚本会自动切左半部分。

_BottomHalf：命名上下对称的图片，脚本会自动切下半部分。

_Quarter：命名上下左右均对称的图片，脚本会自动切左下四分之一。

@Common：命名同一个psd中多次用到的图，带该关键字以后只会切一张图。

@Global：命名多个psd中都用到过的图，带该关键字以后只会切一张图，且在unity中被多个界面引用。

以下是关于滑动列表中的关键字更详细的说明：

@ScrollView：标识一块滑动区域；

:H：滑动方向为水平滑动；

:V：滑动方向为垂直滑动；

@Size：标识滑动区域的大小；

@LE：自动布局元素，对应UGUI的LayoutElement。加该关键字后，滑动列表的子项(item)会自动布局。

以下是关于滑动条中的关键字更详细的说明：

@Slider：滑动条组件，可用作进度条；

:L：标识滑动方向从左到右；

:R：标识滑动方向从右到左；

:T：标识滑动方向从上到下；

:B：标识滑动方向从下到上；

@SliderSize：标识进度条滑动区域的大小；

_Bg：滑动条背景，可以用九宫格_9S；

_Fill：滑动条前景图，可以用九宫格_9S；

_Handle：滑动条的滑块。

以下是关于页签中的关键字更详细的说明：

@TabGroup：页签(Tab)组件，可方便地切换页签，点击时自动隐藏显示所控制的页面。页签组件控制各个Tab的切换，Tab控制页面的隐藏显示。

_Tab：标识Tab组件，冒号“:”后面是页签的标志符；

_Page：标识tab所控制的页面，页签中的具体内容都应放在这个图层组下面；

_TabSel：标识tab选中时的背景图；

_TabUnSel：标识tab未选中时的背景图。

通过采用本发明公开的上述技术方案，得到了如下有益的效果：

本发明通过一键导出工具根据图层命名规则组织与设计效果图相对应的切图和文件夹结构，将设计效果图内UI元素的尺寸和位置自动进行计算，形成可逆向还原效果图的xml文件以及UI元素切图并进行存储，并通过一键导入工具实现了从设计效果图到可视化实施画面的转换。

以上仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视本发明的保护范围。