CN103995702A - 用户界面拉伸控制方法 - Google Patents

Abstract

本发明公开了一种用户界面的拉伸控制的方法，包括：在皮肤图片上通过用于标示拉伸位置的可视化标识绘制所述拉伸区域；监视到对所述皮肤图片存在拉伸需求时，识别所述皮肤图片的可视化标识从而获得拉伸区域，仅针对处于所述拉伸区域内的皮肤图片进行拉伸。本发明于拉伸控制的可视化标识直接由图片携带，以此替代数据文件，极大地方便了使用。

Description

用户界面拉伸控制方法

本发明专利申请是申请日为2011年9月29日、申请号为201110305017.4、名称为“一种用户界面的拉伸控制的方法”的中国发明专利申请的分案申请。

技术领域

本发明属于计算机领域，具体地说，涉及一种用户界面的拉伸控制的方法。

背景技术

如今，在用户终端上安装有各种各样的客户端软件，每种客户端软件都有各自的用户界面，通过用户界面完成客户端软件与用户的交互，可以说用户界面就是客户端软件的门户。

软件厂家通常都会为用户界面设计皮肤，皮肤的设计在考虑美观的同时，还要兼顾用户界面上皮肤组件摆放布局的合理使用，同时还要仔细设计拉伸方案。设计者在设计皮肤时，往往首先会设计出适合用户界面的皮肤图片；之后再针对皮肤图片编写一个数据文件，这个数据文件中会以代码或者数据表格的形式记录在皮肤图片上拉伸控制的参数，比如；拉伸区域、拉伸比例。这个数据文件对于普通用户来说是很难看懂的，但是电脑程序可以识别，要将所属皮肤加载到用户界面时，由电脑程序读取数据文件获知皮肤图片在拉伸时如何处理。

可以看到，数据文件的编写在皮肤设计中是绝对的核心操作，但是其编写的复杂程度可想而知，而且所编写的数据非常繁琐，导致容易出现错误，为皮肤设计带来了很大的难度。

从另一方面考虑，如果用户希望通过自定义的方式来自己设计皮肤的拉伸控制，数据文件的编写这种过于专业性的操作，导致用户自定义模式基本上不可实现。

因此需要提供一种方式，能使皮肤的拉伸控制设计变得简单高效，尤其是使数据文件的编写这种专业操作变得相对友好、直观，对于任何人而言，无论是普通用户还是专业设计人员都不需要专业技术就可以进行拉伸控制的设计。

发明内容

有鉴于此，本发明所要解决的技术问题是提供了一种用户界面的拉伸控制的方法，使得用于拉伸控制的可视化标识直接由图片携带，以此替代数据文件，极大地方便了使用。

为了解决上述技术问题，本发明公开了一种用户界面的拉伸控制的方法，包括：在皮肤图片上通过用于标示拉伸位置的可视化标识绘制所述拉伸区域；监视到对所述皮肤图片存在拉伸需求时，识别所述皮肤图片的可视化标识从而获得拉伸区域，仅针对处于所述拉伸区域内的皮肤图片进行拉伸。

进一步地，所述可视化标识，包括：沿所述背景图片的纵向延伸的一对或多对平行线和/或沿所述背景图片的横向延伸的一对或多对平行线。

进一步地，所述平行线使用所述皮肤图片上所占用面积小于一阈值的颜色和/或透明度来标明，每对平行线之间使用不同的颜色和/或透明度来区别。

进一步地，识别所述皮肤图片的可视化标识从而获得拉伸区域的步骤，包括：识别沿所述皮肤图片的纵向延伸的平行线，每对平行线之间相夹的部分为横向的拉伸区域；和/或，识别沿所述皮肤图片的横向延伸的平行线，每对平行线之间相夹的部分为纵向的拉伸区域。

进一步地，仅针对处于所述拉伸区域内的皮肤图片进行拉伸的步骤，包括：当存在多个拉伸区域时，对各拉伸区域设置权重；监视到对所述皮肤图片存在拉伸需求时，针对权重给每个拉伸区域分配相应的拉伸比例，权重越高的拉伸区域，其分配的拉伸比例越大。

进一步地，仅针对处于所述拉伸区域内的皮肤图片进行拉伸的步骤，包括：监视到对所述皮肤图片存在拉伸需求时，针对多个拉伸区域等比例分配拉伸尺寸。

进一步地，仅针对处于所述拉伸区域内的皮肤图片进行拉伸的步骤，包括：处于所述拉伸区域外的皮肤图片保持不变。

进一步地，还包括：所述平行线将所述皮肤图片划分为若干区域并依次编号，所述区域不包括所述平行线本身；依据所述编号的顺序将对应的区域内的皮肤图片的边界直接拼接，重新组合得到不包含所述平行线的皮肤图片并显示。

与现有的方案相比，本发明所获得的技术效果：

1)可视化标识直接由图片携带，以此替代数据文件，极大地方便了使用，而可视化标识作为一种信息可读性极强，对于用户容易识别，对于电脑程序识别也是非常方便的。

2)标注绘制的操作本身相对编写数据文件更为简单，显示效果更为直观，用户可以轻松了解皮肤图片的拉伸布置。

3)应用可视化标识直接在皮肤图片上进行标明，使得绘制拉伸区域变得简单直观，因此便于专业设计，有利于普通用户的自定义设计。

4)通过分区域组合的皮肤图片的显示方式使得可视化标识不会显示出来，保证皮肤图片不会被破坏。

5)使用多个拉伸区域，按其拉伸所产生的变形影响设置权重，分层次消化拉伸带来的图片变形，提升拉伸后的显示效果。

6)使皮肤图片变形的节奏一致，这样图片整体变形效果均匀，拉伸后原图的美感的破坏相对较小。

附图说明

图1为本发明整体方案的方法流程图；

图2为本发明显示皮肤图片的方法流程图；

图3为本发明显示皮肤图片的操作示意图。

具体实施方式

以下将配合图式及实施例来详细说明本发明的实施方式，藉此对本发明如何应用技术手段来解决技术问题并达成技术功效的实现过程能充分理解并据以实施。

本发明的核心构思在于：使用皮肤图片携带可视化标识，以此替代数据文件。

所述可视化标识，包括：沿所述背景图片的纵向延伸的一对或多对平行线和/或沿所述背景图片的横向延伸的一对或多对平行线；所述平行线使用所述皮肤图片上所占用面积小于一阈值的颜色和/或透明度来标明，每对平行线之间使用不同的颜色和/或透明度来区别，优选采用皮肤图片上没有出现的颜色和/或透明度，即阈值取0。可视化标识更直观简单，对于电脑程序和普通用户来说都是可读的。

以下以一实施例对本发明的整体方案进行说明。如图1所示，执行如下操作：

步骤100，在皮肤图片上通过用于标示拉伸位置的可视化标识绘制拉伸区域；

在实际使用中，可以使用色块、色条或者带有颜色的线段、带有透明度的条状、线段等来标出皮肤图片上的拉伸区域；标示拉伸位置一般可以通过标示拉伸区域的边界来实现。

这里需要说明的是，可视化标识是使用可视化手段进行标注的标识。1)在极端情况下，可以肉眼不可读而电脑程序可读(用肉眼不可识别的色差或者透明度差别标识，或者肉眼不可识别的尺寸标出)，但是一般是用作特殊用途，但是标注绘制这个操作本身相对编写数据文件是非常简单直观；2)但是一般来说它对于肉眼和电脑程序都可读，这样不仅标注绘制这个操作本身相对编写数据文件是非常简单直观，显示效果上就更为直观了，用户可以轻松了解组件布局在皮肤上的反映。

步骤200，监视到对所述皮肤图片存在拉伸需求时，识别所述皮肤图片的可视化标识从而获得拉伸区域，仅针对处于所述拉伸区域内的皮肤图片进行拉伸；

1)识别所述皮肤图片的可视化标识从而获得拉伸区域

因为拉伸区域一般是按横向和纵向分别标处，具体可以通过如下方式实现：识别沿所述皮肤图片的纵向延伸的平行线，每对平行线之间相夹的部分为横向的拉伸区域；和/或，识别沿所述皮肤图片的横向延伸的平行线，每对平行线之间相夹的部分为纵向的拉伸区域；

2)仅针对处于所述拉伸区域内的皮肤图片进行拉伸

监视到对所述皮肤图片存在横向的拉伸需求时，针对所述横向的拉伸区域内的皮肤图片进行横向拉伸，所述横向的拉伸区域外的皮肤图片保持不变，从而完成所述皮肤图片的横向拉伸；

监视到对所述皮肤图片存在纵向的拉伸需求时，针对所述纵向的拉伸区域内的皮肤图片进行纵向拉伸，所述纵向的拉伸区域外的皮肤图片保持不变，从而完成所述皮肤图片的纵向拉伸；

监视到对所述皮肤图片同时存在横向和纵向的拉伸需求时，可以先依上述方式进行纵向拉伸，再进行横向拉伸；也可以先依上述方式进行横向拉伸，再进行纵向拉伸。

针对步骤200的中拉伸操作，还存在多种策略：

1)分层次拉伸

当存在多个拉伸区域时，对各拉伸区域设置权重；监视到对所述皮肤图片存在拉伸需求时，针对权重给每个拉伸区域分配相应的拉伸比例，权重越高的拉伸区域，其分配的拉伸比例越大。

分层次拉伸的意义在于——对于一些色彩充盈、构图饱满的图片来说，其图片内容没有留下易于拉伸使用的区域，例如色彩单一、拉伸后变形不明显的区域；这样为了避免对于某块拉伸区域拉伸比例过大导致拉伸区域内的图片变形严重，与周边配合不协调，影响显示效果，则可以使用多个拉伸区域，按其拉伸所产生的变形影响设置权重，变形对全图还是有一定影响的，则应尽量少拉伸，因此权重设置较低，变形对全图片影响很小的，则应尽量多拉伸，因此权重设置较高；通过这种方式，分层次消化拉伸带来的图片变形，提升拉伸后的显示效果。

2)等比例拉伸

监视到对所述皮肤图片存在拉伸需求时，针对多个拉伸区域等比例分配拉伸尺寸。

分层次拉伸的意义在于——可以使变形的节奏一致，这样图片整体变形效果均匀，拉伸后原图的美感的破坏相对小一些。

另外，在步骤100中对皮肤图片绘制完拉伸区域后，皮肤图片在正常显示时需要考虑避免所绘制的可视化标识被显示出来破坏皮肤图片；而在步骤200中对皮肤图片进行拉伸后进行显示时也需要考虑避免所绘制的可视化标识被显示出来破坏皮肤图片。

可以通过以下方式来避免所绘制的可视化标识被显示出来，如图2所示，包括以下步骤：

步骤301，所述平行线将所述皮肤图片划分为若干区域并依次编号，所述区域不包括所述平行线本身；

步骤302，依据所述编号的顺序将对应的区域内的皮肤图片的边界直接拼接，重新组合得到不包含所述平行线的皮肤图片并显示。

例如，如图3所示，对一皮肤图片分别在纵向和横向使用两条平行线绘制出拉伸区域，这样所述皮肤图片就被这些平行线分为了9块区域，可以对这9块区域分别编号1-9，需要注意的是，这些区域最终被读取的是区域内的皮肤图片，这些区域并不包括平行线本身；

在显示所述皮肤图片时，依据所述编号的顺序将对应的区域内的皮肤图片再组合起来，这些区域不包括所述平行线，这些区域内的皮肤图片的边界直接拼接，这样就可以得到不包含所述平行线的皮肤图片并显示出来，当这些平行线较细时，这些平行线被省略掉后并不会影响原图的显示效果。

上述说明示出并描述了本发明的若干优选实施例，但如前所述，应当理解本发明并非局限于本文所披露的形式，不应看作是对其他实施例的排除，而可用于各种其他组合、修改和环境，并能够在本文所述发明构想范围内，通过上述教导或相关领域的技术或知识进行改动。而本领域人员所进行的改动和变化不脱离本发明的精神和范围，则都应在本发明所附权利要求的保护范围内。

Claims (14)

1.一种用户界面拉伸控制方法，其包括：

沿皮肤图片的横向和/或纵向绘制一对或多对平行线；

将一对或多对平行线间构成的区域设定为拉伸区域并标示出所述拉伸区域；

监视到对所述皮肤图片存在拉伸需求时，识别出所标示的拉伸区域；

仅针对处于所述拉伸区域内的皮肤图片进行拉伸。

2.如权利要求1所述的方法，其中，

所述平行线使用所述皮肤图片上所占用面积小于一阈值的颜色和/或透明度来标明，每对平行线之间使用不同的颜色和/或透明度来区别。

3.如权利要求1或2所述的方法，其中，识别出所标示的拉伸区域进一步包括：

识别沿所述皮肤图片的纵向延伸的平行线，每对平行线之间相夹的部分为横向的拉伸区域；和/或，

识别沿所述皮肤图片的横向延伸的平行线，每对平行线之间相夹的部分为纵向的拉伸区域。

4.如权利要求1至3中任一项所述的方法，其中，仅针对处于所述拉伸区域内的皮肤图片进行拉伸进一步包括：

当存在多个拉伸区域时，对各拉伸区域设置权重；

监视到对所述皮肤图片存在拉伸需求时，针对权重给每个拉伸区域分配相应的拉伸比例，权重越高的拉伸区域，其分配的拉伸比例越大。

5.如权利要求1至3中任一项所述的方法，其中，仅针对处于所述拉伸区域内的皮肤图片进行拉伸进一步包括：

监视到对所述皮肤图片存在拉伸需求时，针对多个拉伸区域等比例分配拉伸尺寸。

6.如权利要求5所述的方法，其中，仅针对处于所述拉伸区域内的皮肤图片进行拉伸进一步包括：

处于所述拉伸区域外的皮肤图片保持不变。

7.如权利要求1至6中任一项所述的方法，还包括：

对所述平行线将所述皮肤图片划分成的若干区域并依次编号，所述区域不包括所述平行线本身；

依据所述编号的顺序将对应的区域内的皮肤图片的边界直接拼接，重新组合得到不包含所述平行线的皮肤图片并显示。

8.一种用户界面拉伸控制方法，其包括：

在皮肤图片上使用可视化标识绘制拉伸区域的边界，所述可视化标识包括色块、色条、带有颜色的线段、带有透明度的线段/带有透明度的条状中的任意一个或多个；

监视到对所述皮肤图片存在拉伸需求时，识别出所述可视化标识以确定拉伸区域；

仅针对处于所述拉伸区域内的皮肤图片进行拉伸。

9.如权利要求8所述的方法，其中，在皮肤图片上使用可视化标识绘制拉伸区域的边界进一步包括：

沿所述皮肤图片的纵向绘制一对或多对平行线；和/或

沿所述皮肤图片的横向绘制一对或多对平行线。

10.如权利要求9所述的方法，其中，识别出所述可视化标识以确定拉伸区域进一步包括：

识别沿所述皮肤图片的纵向延伸的平行线，每对平行线之间相夹的部分为横向的拉伸区域；和/或，

识别沿所述皮肤图片的横向延伸的平行线，每对平行线之间相夹的部分为纵向的拉伸区域。

11.如权利要求8至10中任一项所述的方法，其中，仅针对处于所述拉伸区域内的皮肤图片进行拉伸进一步包括：

当存在多个拉伸区域时，对各拉伸区域设置权重；

监视到对所述皮肤图片存在拉伸需求时，针对权重给每个拉伸区域分配相应的拉伸比例，权重越高的拉伸区域，其分配的拉伸比例越大。

12.如权利要求8至10中任一项所述的方法，其中，仅针对处于所述拉伸区域内的皮肤图片进行拉伸进一步包括：

监视到对所述皮肤图片存在拉伸需求时，针对多个拉伸区域等比例分配拉伸尺寸。

13.如权利要求12所述的方法，其中，仅针对处于所述拉伸区域内的皮肤图片进行拉伸进一步包括：

处于所述拉伸区域外的皮肤图片保持不变。

14.如权利要求8至13中任一项所述的方法，还包括：

对所述平行线将所述皮肤图片划分成的若干区域依次编号，所述区域不包括所述平行线本身；

依据所述编号的顺序将对应的区域内的皮肤图片的边界直接拼接，重新组合得到不包含所述平行线的皮肤图片并显示。