CN102799420A - 一种客户端皮肤编辑方法和皮肤编辑器 - Google Patents

一种客户端皮肤编辑方法和皮肤编辑器 Download PDF

Info

Publication number
CN102799420A
CN102799420A CN2011101339283A CN201110133928A CN102799420A CN 102799420 A CN102799420 A CN 102799420A CN 2011101339283 A CN2011101339283 A CN 2011101339283A CN 201110133928 A CN201110133928 A CN 201110133928A CN 102799420 A CN102799420 A CN 102799420A
Authority
CN
China
Prior art keywords
background picture
picture
viewing area
client
skin
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN2011101339283A
Other languages
English (en)
Other versions
CN102799420B (zh
Inventor
张晏兵
涂强
王旎
谢鑫
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Tencent Technology Shenzhen Co Ltd
Original Assignee
Tencent Technology Shenzhen Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Tencent Technology Shenzhen Co Ltd filed Critical Tencent Technology Shenzhen Co Ltd
Priority to CN201110133928.3A priority Critical patent/CN102799420B/zh
Priority to PCT/CN2012/073891 priority patent/WO2012159508A1/zh
Priority to RU2013157045/08A priority patent/RU2013157045A/ru
Priority to EP12789726.2A priority patent/EP2717157B1/en
Priority to CA2837123A priority patent/CA2837123A1/en
Priority to US14/122,223 priority patent/US20140136984A1/en
Publication of CN102799420A publication Critical patent/CN102799420A/zh
Application granted granted Critical
Publication of CN102799420B publication Critical patent/CN102799420B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/451Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Processing Or Creating Images (AREA)
  • User Interface Of Digital Computer (AREA)
  • Controls And Circuits For Display Device (AREA)

Abstract

本发明公开了一种客户端皮肤编辑方法和皮肤编辑器。该方法包括:在背景图片显示区域显示背景图片;生成客户端快照;当在背景图片显示区域移动所述客户端快照时,确定该客户端快照在背景图片显示区域上的位置,根据该位置截取被该客户端快照覆盖的区域图片;根据截取的所述区域图片更新客户端的皮肤。应用本发明能够提高客户端换肤的灵活性。

Description

一种客户端皮肤编辑方法和皮肤编辑器
技术领域
本发明涉及计算机技术及图像处理技术领域,尤其涉及一种客户端皮肤编辑方法和皮肤编辑器。
背景技术
网络即时通讯(IM)工具发展到今天,已经被大多数的网民所接受,已经成为用户必不可少的软件工具,IM工具可以通过点对点的技术来实现互联网上的即时沟通,甚至是几个朋友的群聊。
目前,大部分IM客户端都提供了换肤功能,用户可以选择自己喜欢的图片来作为客户端的背景,使得自己的客户端更有个性。
IM客户端的皮肤显示主要有两种模式:平铺和边缘填充。
所谓平铺,就是在IM客户端中从上到下,从左到右依次显示图片。所谓边缘填充,就是当IM客户端的尺寸小于或等于图片尺寸的时候,显示图片内容,当IM客户端尺寸大于图片的时候,超出图片的部分,就用图片的平均颜色来进行单色填充。
无论是平铺模式还是边缘填充模式,在换肤时,都是从图片的左上角开始,将图片作为IM客户端的皮肤进行显示。例如,在边缘填充模式下,如果图片的尺寸大于IM客户端的尺寸,则只能将图片的左上部分作为IM客户端的皮肤进行显示,无法采用图片的任意部分来作为IM客户端皮肤。再例如,在平铺模式下,IM客户端皮肤的左上角只能是图片的左上角,而不能是图片的任意部分。
可见,现有的换肤方法不够灵活,不能实现将图片的任意部分作为IM客户端的皮肤。
IM客户端以外的其他客户端在换肤时同样存在着不够灵活的问题。
发明内容
有鉴于此,本发明提供了一种客户端皮肤编辑方法和皮肤编辑器,以便提高客户端换肤的灵活性。
本发明的技术方案具体是这样实现的:
一种客户端皮肤编辑方法,该方法包括:
在背景图片显示区域显示背景图片;生成客户端快照;
当在背景图片显示区域移动所述客户端快照时,确定该客户端快照在背景图片显示区域上的位置,根据该位置截取被该客户端快照覆盖的区域图片;
根据截取的所述区域图片更新客户端的皮肤。
一种客户端皮肤编辑器,该皮肤编辑器包括快照生成模块、显示模块、截取模块和更新模块;
所述快照生成模块,用于生成客户端快照;
所述显示模块,用于显示客户端快照,在背景图片显示区域显示背景图片;
所述截取模块,用于当在背景图片显示区域移动客户端快照时,确定该客户端快照在背景图片显示区域上的位置,根据该位置截取被该客户端快照覆盖的区域图片;
所述更新模块,用于根据截取的所述区域图片更新客户端的皮肤。
由上述技术方案可见,本发明中,当在背景图片显示区域移动客户端快照时,通过确定客户端快照在背景图片显示区域上的位置,根据该位置截取被客户端快照覆盖的区域图片,利用截取的该区域图片更新客户端的皮肤,可以实现将背景图片的任意区域作为客户端的皮肤,使得客户端的皮肤不是必须从背景图片的左上角开始,从而提高了客户端换肤的灵活性。本发明适用于IM客户端的换肤,也适用于其他客户端的换肤。
附图说明
图1是本发明提供的客户端皮肤编辑方法流程图。
图2是本发明提供的实现皮肤预览的方法流程图。
图3是本发明提供的边缘填充模式下的皮肤编辑方法流程图。
图4是本发明提供的在背景图片显示区域以边缘填充模式显示当前背景图片的方法流程图。
图5是本发明提供的对背景图片显示区域的显示内容进行过渡处理的方法流程图。
图6是对背景图片显示区域的显示内容进行过渡处理的示意图。
图7是本发明提供的平铺模式下的皮肤编辑方法流程图。
图8是本发明提供的在背景图片显示区域以平铺模式显示当前背景图片的方法流程图。
图9是本发明提供的在平铺模式下截取区域图片的方法流程图。
图10是本发明在平铺模式下用于截取区域图片的画布示意图。
图11是本发明提供的客户端皮肤编辑器的结构图。
具体实施方式
图1是本发明提供的IM客户端皮肤编辑方法流程图。
如图1所示,该方法包括:
步骤101,在背景图片显示区域显示背景图片;生成IM客户端快照。
步骤102,当在背景图片显示区域移动所述IM客户端快照时,确定该IM客户端快照在背景图片显示区域上的位置,根据该位置截取被该IM客户端快照覆盖的区域图片。
步骤103,根据截取的所述区域图片更新IM客户端的皮肤。
采用图1所示方法,可以截取一张图片的任意区域来作为IM客户端的皮肤,从而提高了IM客户端换肤的灵活性。
作为一种实施方式,本发明可以根据背景图片的尺寸,确定显示模式为平铺模式还是为边缘填充模式,然后根据确定出的显示模式,在背景图片显示区域显示背景图片。一般地,在背景图片的尺寸远小于IM客户端快照的尺寸时,确定显示模式为平铺模式,在背景图片的尺寸与IM客户端的尺寸相差较少、或者远大于IM客户端的尺寸时,确定显示模式为边缘填充模式。
作为另一种实施方式,本发明还可以接收显示模式信息,根据接收的显示模式信息,采用相应的显示模式在背景图片显示区域显示背景图片,在该实施方式下,可以由用户选择显示模式。
为了实现所见即所得,本发明还提供了实时预览皮肤的技术方案:在截取区域图片的过程中,将截取的区域图片与IM客户端快照进行图片合成,从而形成预览皮肤。
可以通过将IM客户端上带有Alpha通道的图片的Alpha值设置为0,来实现皮肤预览。关于皮肤的实时预览,具体说明如下:
一般而言,展现在用户眼前的IM客户端是由3层组成:背景、Material和IM客户端上显示的内容。Material也是一张图片,该图片带有Alpha通道,将Material和背景图做Alpha混合时,将Alpha设为0,就可以达到透到背景图的效果。
图2是本发明提供的实现皮肤预览的方法流程图。
如图2所示,该方法包括如下步骤:
步骤201,将IM客户端的背景调成透明。
本步骤中,将Alpha设为0即可将IM客户端的背景调成透明。
步骤202,获得IM客户端的快照,此时快照中包含Material和IM客户端上显示的内容。
步骤203,在移动IM客户端快照的过程中,将截取的区域图片应用到快照中。此时,IM客户端快照由3层组成:截取的背景区域图片、Material和IM客户端上显示的内容,这样就达到了皮肤预览的效果。
目前,IM客户端皮肤的显示方式包括边缘填充模式和平铺模式,在边缘填充模式和平铺模式下,均可以应用图1所示方法来提高IM客户端换肤的灵活性。
下面分别对边缘填充模式下的皮肤编辑方法和平铺模式下的皮肤编辑方法进行详细介绍。
图3是本发明提供的边缘填充模式下的皮肤编辑方法流程图。
如图3所示,该流程包括:
步骤301,确定采用边缘填充模式显示背景图片。
本步骤中,可以是用户选择采用边缘填充模式显示背景图片,也可以是皮肤编辑器根据背景图片显示区域以及背景图片的尺寸自动确定显示模式为边缘填充模式。
步骤302,判断当前背景图片是否已采用边缘填充模式显示在背景图片显示区域内,如果是,执行步骤304,否则执行步骤303。
步骤303,在背景图片显示区域以边缘填充模式显示当前背景图片。
本步骤中,在背景图片显示区域以边缘填充模式显示当前背景图片的方法具体请参见图4~图6。
步骤304,确定该IM客户端快照在背景图片显示区域上的位置,根据该位置截取被该IM客户端快照覆盖的区域图片。
步骤305,将所述区域图片与所述IM客户端快照进行图片合成,形成预览皮肤。
假设可截取的图片显示区域为BkgRect,IM客户端快照区域为IMRect,则本步骤中,当IMRect完全包含在BkgRect中的时候,直接取得截取的图片内容,并利用该图片内容合成预览皮肤。当IMRect只是有一部分在BkgRect中的时候,IMRect中与BkgRect相交的区域用截取的图片内容,IMRect移出去的部分用背景图片的平均颜色填充,利用截取的图片内容和所述平均颜色合成预览皮肤。
步骤306,判断是否接收到将所述区域图片作为IM客户端皮肤的命令,如果是,执行步骤309,否则执行步骤307。
步骤307,接收移动IM客户端快照的命令。
步骤308,判断IM客户端快照与背景图片显示区域是否具有相交部分,以及该相交部分是否满足预定条件,如果有相交部分且该相交部分满足预定条件,则根据步骤307接收的命令移动IM客户端快照,并返回步骤304,如果没有相交部分,或者该相交部分不满足预定条件,则不允许移动IM客户端快照,并返回步骤307继续接收移动IM客户端快照的命令。
本步骤中,所述预定条件一般为IM客户端快照与背景图片显示区域相交至少预定数目个像素,例如相交至少5个像素。相交部分需要满足所述预定条件主要是因为,如果要截取背景图片,则IM客户端快照就不能全部移出背景图片所在的显示区域。
步骤309,利用所述区域图片更新IM客户端的皮肤。
图4是本发明提供的在背景图片显示区域以边缘填充模式显示当前背景图片的方法流程图。
如图4所示,该方法包括:
步骤401,判断背景图片的各边长是否均不大于背景图片显示区域的相应边长,如果是,执行步骤402,否则,执行步骤403。
本步骤中,可以预先确定背景图片尺寸BkgSize和背景图片显示区域尺寸BkgShowSize。当背景图片的长和宽不大于背景图片显示区域的长和宽时,即当BkgSize.cx≤BkgShowSize.cx且BkgSize.cy≤BkgShowSize.cy时,执行步骤402。当BkgSize.cx>BkgShowSize.cx或者BkgSize.cy>BkgShowSize.cy时,执行步骤403。
步骤402,从背景图片显示区域的左上角开始显示背景图片,进入步骤405。
步骤403,将该背景图片的尺寸进行等比例压缩,以使得背景图片的各边长均不大于背景图片显示区域的相应边长。
步骤404,从背景图片显示区域的左上角开始显示压缩后的背景图片。
步骤405,在背景图片显示区域中没有被背景图片覆盖的部分,采用该背景图片的平均颜色进行填充。
采用图4所述方法在背景图片显示区域显示当前背景图片后,可以实现截取背景图片的任意区域来作为IM客户端的皮肤。
为了进一步提高IM客户端换肤的灵活性,使得当IM客户端快照移出背景图片显示区域的时候,能够慢慢过渡到背景图,本发明还提出对背景图片显示区域的显示内容进行过渡处理,具体请参见图5。
图5是本发明提供的对背景图片显示区域的显示内容进行过渡处理的方法流程图。
如图5所示,该方法包括:
步骤501,对背景图片显示区域上边缘起向下预定范围内的显示内容,以背景图片显示区域的上边缘为对称轴,做轴对称镜像处理。
步骤502,对背景图片显示区域左边缘向右预定范围内的显示内容,以背景图片显示区域的左边缘为对称轴,做轴对称镜像处理。
步骤503,对所述向下预定范围和所述向右预定范围的相交范围内的显示内容,以背景图片显示区域的左上角为对称中心,做中心对称镜像处理。
其中,步骤501~503的顺序可调,步骤501~503也可以同时进行。
步骤504,缓存背景图片显示区域内的显示内容和经镜像处理得到的镜像显示内容。
当采用图5所示方法对背景图片显示区域的显示内容进行过渡处理时,图3中步骤304所述的截取被该IM客户端快照覆盖的区域图片包括:
截取所述背景图片显示区域的显示内容和所述镜像显示内容中被该IM客户端覆盖的显示内容。
图6是对背景图片显示区域的显示内容进行过渡处理的示意图。
如图6所示,背景图片显示区域上边缘起向下预定范围内的区域1的显示内容,以该上边缘为对称轴,向上镜像处理得到区域4的显示内容;背景图片显示区域左边缘起向右预定范围内的区域2的显示内容,以该左边缘为对称轴,向左镜像处理得到区域5的显示内容;区域1和区域2的相交区域为区域3,区域3的显示内容以背景图片显示区域的左上角为对称中心,进行镜像处理得到区域6的显示内容。
根据图6所示的过渡处理结果,采用图3所示方法截取区域图片时,可以截取图6所示的背景图片显示区域以及区域4、区域5和区域6中的显示内容。
图7是本发明提供的平铺模式下的皮肤编辑方法流程图。
如图7所示,该流程包括:
步骤701,确定采用平铺模式显示背景图片。
本步骤中,可以是用户选择采用平铺模式显示背景图片,也可以是皮肤编辑器根据背景图片显示区域以及背景图片的尺寸自动确定显示模式为平铺模式。
步骤702,判断当前背景图片是否已采用平铺模式显示在背景图片显示区域内,如果是,执行步骤704,否则执行步骤703。
步骤703,在背景图片显示区域以平铺模式显示当前背景图片。
本步骤中,在背景图片显示区域以平铺模式显示当前背景图片的方法具体请参见图8。
步骤704,确定该IM客户端快照在背景图片显示区域上的位置,根据该位置截取被该IM客户端快照覆盖的区域图片。
关于本步骤的具体实现方法,请参见图9~图10。
步骤705,将所述区域图片与所述IM客户端快照进行图片合成,形成预览皮肤。
本步骤中,将截取的区域图片以平铺模式显示在IM客户端快照区域,从而形成预览皮肤。
步骤706,判断是否接收到将所述区域图片作为IM客户端皮肤的命令,如果是,执行步骤709,否则执行步骤707。
步骤707,接收移动IM客户端快照的命令。
步骤708,判断IM客户端快照与背景图片显示区域是否具有相交部分,以及该相交部分是否满足预定条件,如果有相交部分且该相交部分满足预定条件,则根据步骤707接收的命令移动IM客户端快照,并返回步骤704,如果没有相交部分,或者该相交部分不满足预定条件,则不允许移动IM客户端快照,并返回步骤707继续接收移动IM客户端快照的命令。
本步骤具体同步骤308。
步骤709,利用所述区域图片更新IM客户端的皮肤。
本步骤中,采用截取的区域图片,以平铺模式更新IM客户端的皮肤。
图8是本发明提供的在背景图片显示区域以平铺模式显示当前背景图片的方法流程图。
如图8所示,该方法包括:
步骤801,判断背景图片的各边长是否均不大于背景图片显示区域的相应边长,如果是,执行步骤802,否则,执行步骤803。
本步骤中,可以预先确定背景图片尺寸BkgSize和背景图片显示区域尺寸BkgShowSize。当背景图片的长和宽不大于背景图片显示区域的长和宽时,即当BkgSize.cx≤BkgShowSize.cx且BkgSize.cy≤BkgShowSize.cy时,执行步骤802。当BkgSize.cx>BkgShowSize.cx或者BkgSize.cy>BkgShowSize.cy时,执行步骤803。
步骤802,从背景图片显示区域的左上角开始以平铺模式显示背景图片,结束本流程。
步骤803,将该背景图片的尺寸进行等比例压缩,以使得背景图片的各边长均不大于背景图片显示区域的相应边长。
步骤804,从背景图片显示区域的左上角开始以平铺模式显示压缩后的背景图片,结束本流程。
图9是本发明提供的在平铺模式下截取区域图片的方法流程图。
如图9所示,该方法包括:
步骤901,确定IM客户端快照在背景图片显示区域上的位置。
步骤902,根据IM客户端快照在背景图片显示区域的位置、以及单个背景图片的尺寸,确定IM客户端快照的左上角在所该左上角所在背景图片上的偏移位置。
本步骤中,假设背景图片显示区域为BkgRect,IM客户端快照区域为IMRect,要截取的区域为ClipRect,“.left”表示相应区域的左边缘,“.Width”表示相应区域的宽度,“.right”表示相应区域的右边缘,“.top”表示相应区域的上边缘,“.Height”表示相应区域的高度,“.bottom”表示相应区域的下边缘,则确定偏移位置的方法具体可以包括:
当BkgRect.left<=IMRect.left的时候,ClipRect.left=(IMRect.left-BkgRect.left)%Bkg.Width;ClipRect.right=ClipRect.left+Bkg.Width。
当BkgRect.left>IMRect.left的时候,ClipRect.left=(IMRect.left-BkgRect.left)%Bkg.Width+Bkg.Width;ClipRect.right  =ClipRect.left+Bkg.Width。
当BkgRect.top<=IMRect.top的时候,ClipRect.top=(IMRect.top-BkgRect.top)%Bkg.Height;ClipRect.bottom=ClipRect.top+Bkg.Height。
当BkgRect.top>IMRect.top的时候,ClipRect.top=(IMRect.top-BkgRect.top)%Bkg.Height+Bkg.Height;ClipRect.bottom=ClipRect.top+Bkg.Height。
其中,符号“%”表示取余操作。
步骤903,根据该偏移位置截取被该IM客户端快照覆盖的区域图片。
本步骤中,可以以所述偏移位置为待截取的区域图片的左上角,按照单个背景图片的尺寸,从背景图片显示区域的显示内容上截取区域图片。为了方便截取,也可以预先生成一画布,从画布上截取区域图片,具体请参见图10。
图10是本发明在平铺模式下用于截取区域图片的画布示意图。
如图10所示,该画布上按照2行2列的方式平铺了4张背景图片。
首先,确定出IM客户端快照的左上角在背景图显示区域上的位置,根据该位置确定出IM客户端快照的左上角在所该左上角所在背景图片上的偏移位置。
然后,以位于图10画布上第1行第1列的背景图片上的所述偏移位置为待截取的区域图片的左上角,按照单个背景图片的尺寸,从该画布上截取区域图片。
图11是本发明提供的IM客户端皮肤编辑器的结构图。
如图11所示,该皮肤编辑器包括快照生成模块1101、显示模块1102、截取模块1103和更新模块1104。
快照生成模块1101,用于生成IM客户端快照。
显示模块1102,用于显示IM客户端快照,在背景图片显示区域显示背景图片。
截取模块1103,用于当在背景图片显示区域移动IM客户端快照时,确定该IM客户端快照在背景图片显示区域上的位置,根据该位置截取被该IM客户端快照覆盖的区域图片。
更新模块1104,用于根据截取的所述区域图片更新IM客户端的皮肤。
其中的显示模块1102,用于根据背景图片的尺寸,确定显示模式为平铺模式还是为边缘填充模式,或者,接收显示模式信息,根据确定出的显示模式或接收的显示模式信息,在背景图片显示区域显示背景图片。
显示模块1102,用于在显示模式为边缘填充模式时,如果背景图片的各边长均不大于背景图片显示区域的相应边长,从背景图片显示区域的左上角开始显示背景图片,如果背景图片的一边长大于背景图片显示区域的相应边长,则先将该背景图片的尺寸进行等比例压缩,以使得背景图片的各边长均不大于背景图片显示区域的相应边长,然后从背景图片显示区域的左上角开始显示压缩后的背景图片,在背景图片显示区域中没有被所述背景图片覆盖的部分,采用该背景图片的平均颜色进行填充。
显示模块1102可以包括镜像模块和缓存模块。
所述镜像模块,用于对背景图片显示区域上边缘起向下预定范围内的显示内容,以背景图片显示区域的上边缘为对称轴,做轴对称镜像处理;对背景图片显示区域左边缘向右预定范围内的显示内容,以背景图片显示区域的左边缘为对称轴,做轴对称镜像处理;对所述向下预定范围和所述向右预定范围的相交范围内的显示内容,以背景图片显示区域的左上角为对称中心,做中心对称镜像处理。
所述缓存模块,用于缓存背景图片显示区域内的显示内容和经镜像处理得到的镜像显示内容。
相应地,截取模块1103,可以用于截取所述背景图片显示区域的显示内容和所述镜像显示内容中被该IM客户端覆盖的显示内容。
显示模块1102,可以用于在显示模式为平铺模式时,从背景图片显示区域的左上角开始,按照平铺模式显示背景图片。
截取模块1103,可以用于在显示模式为平铺模式时,根据IM客户端快照在背景图片显示区域上的位置、以及单个背景图片的尺寸,确定IM客户端快照的左上角在所该左上角所在背景图片上的偏移位置,根据该偏移位置截取被该IM客户端快照覆盖的区域图片。
截取模块1103,可以用于在显示模式为平铺模式时,生成画布,该画布上按照2行2列的方式平铺了4张背景图片,以位于第1行且位于第1列的背景图片上的所述偏移位置为待截取的区域图片的左上角,按照单个背景图片的尺寸,从该画布上截取区域图片。
更新模块1104,用于利用从该画布上截取的区域图片,采用平铺方式更新IM客户端的皮肤。
上述皮肤编辑器还可以包括预览模块。
所述预览模块,用于通过将IM客户端上带有Alpha通道的图片的Alpha值设置为0,将所述区域图片与所述IM客户端快照进行图片合成,形成预览皮肤。
本发明上述IM客户端的皮肤编辑方法和皮肤编辑器,不仅适用于IM客户端的换肤,还适用于其他客户端的换肤。
可见,通过本发明提供的皮肤编辑方法和皮肤编辑器,当用户选择完显示模式或者皮肤编辑器自动确定了显示模式后,就可以通过移动客户端快照来选择要截取的区域图片位置,然后皮肤编辑器会截取背景图片对应区域的图片,将截取的区域图片与客户端快照进行合成,形成预览皮肤,当用户选择好喜欢的皮肤后,即接收到用户确定将该区域图片作为客户端皮肤的命令后,将截取的该区域图片应用到客户端上进行换肤,使得为客户端换肤的灵活性大大提高。
以上所述仅为本发明的较佳实施例而已,并不用以限制本发明,凡在本发明的精神和原则之内,所做的任何修改、等同替换、改进等,均应包含在本发明保护的范围之内。

Claims (16)

1.一种客户端皮肤编辑方法,其特征在于,该方法包括:
在背景图片显示区域显示背景图片;生成客户端快照;
当在背景图片显示区域移动所述客户端快照时,确定该客户端快照在背景图片显示区域上的位置,根据该位置截取被该客户端快照覆盖的区域图片;
根据截取的所述区域图片更新客户端的皮肤。
2.根据权利要求1所述的方法,其特征在于,所述在背景图片显示区域显示背景图片包括:
根据背景图片的尺寸,确定显示模式为平铺模式还是为边缘填充模式,或者,接收显示模式信息;
根据确定出的显示模式或接收的显示模式信息,在背景图片显示区域显示背景图片。
3.根据权利要求2所述的方法,其特征在于,当显示模式为边缘填充模式时,所述显示背景图片包括:
如果背景图片的各边长均不大于背景图片显示区域的相应边长,从背景图片显示区域的左上角开始显示背景图片;
如果背景图片的一边长大于背景图片显示区域的相应边长,则先将该背景图片的尺寸进行等比例压缩,以使得背景图片的各边长均不大于背景图片显示区域的相应边长,然后从背景图片显示区域的左上角开始显示压缩后的背景图片;
在背景图片显示区域中没有被所述背景图片覆盖的部分,采用该背景图片的平均颜色进行填充。
4.根据权利要求3所述的方法,其特征在于,该方法还包括:
对背景图片显示区域上边缘起向下预定范围内的显示内容,以背景图片显示区域的上边缘为对称轴,做轴对称镜像处理;对背景图片显示区域左边缘向右预定范围内的显示内容,以背景图片显示区域的左边缘为对称轴,做轴对称镜像处理;对所述向下预定范围和所述向右预定范围的相交范围内的显示内容,以背景图片显示区域的左上角为对称中心,做中心对称镜像处理;
缓存背景图片显示区域内的显示内容和经镜像处理得到的镜像显示内容;
所述截取被该客户端快照覆盖的区域图片包括:
截取所述背景图片显示区域的显示内容和所述镜像显示内容中被该客户端覆盖的显示内容。
5.根据权利要求2所述的方法,其特征在于,当显示模式为平铺模式时,所述显示背景图片包括:
从背景图片显示区域的左上角开始,按照平铺模式显示背景图片;
所述截取该客户端快照覆盖的区域图片包括:
根据客户端快照在背景图片显示区域上的位置、以及单个背景图片的尺寸,确定客户端快照的左上角在所该左上角所在背景图片上的偏移位置,根据该偏移位置截取被该客户端快照覆盖的区域图片。
6.根据权利要求5所述的方法,其特征在于,根据该偏移位置截取被该客户端快照覆盖的区域图片包括:
预先生成画布,该画布上按照2行2列的方式平铺了4张背景图片,以位于第1行且位于第1列的背景图片上的所述偏移位置为待截取的区域图片的左上角,按照单个背景图片的尺寸,从该画布上截取区域图片;
根据截取的所述区域图片更新客户端的皮肤包括:
利用从该画布上截取的区域图片,采用平铺方式更新客户端的皮肤。
7.根据权利要求1所述的方法,其特征在于,该方法还包括:
当移动客户端快照时,判断客户端快照与背景图片显示区域是否至少重合预定数目个像素,如果是,允许移动客户端快照,否则禁止移动客户端快照。
8.根据权利要求1所述的方法,其特征在于,根据截取的所述区域图片更新客户端的皮肤包括:
将所述区域图片与所述客户端快照进行图片合成,形成预览皮肤;
如果接收到将该区域图片作为客户端皮肤的确认触发,则将客户端的皮肤更新为该区域图片。
9.根据权利要求8所述的方法,其特征在于,将所述区域图片与所述客户端快照进行图片合成,形成预览皮肤包括:
将客户端上带有Alpha通道的图片的Alpha值设置为0。
10.一种客户端皮肤编辑器,其特征在于,该皮肤编辑器包括快照生成模块、显示模块、截取模块和更新模块;
所述快照生成模块,用于生成客户端快照;
所述显示模块,用于显示客户端快照,在背景图片显示区域显示背景图片;
所述截取模块,用于当在背景图片显示区域移动客户端快照时,确定该客户端快照在背景图片显示区域上的位置,根据该位置截取被该客户端快照覆盖的区域图片;
所述更新模块,用于根据截取的所述区域图片更新客户端的皮肤。
11.根据权利要求10所述的皮肤编辑器,其特征在于,
所述显示模块,用于根据背景图片的尺寸,确定显示模式为平铺模式还是为边缘填充模式,或者,接收显示模式信息,根据确定出的显示模式或接收的显示模式信息,在背景图片显示区域显示背景图片。
12.根据权利要求11所述的皮肤编辑器,其特征在于,
所述显示模块,用于在显示模式为边缘填充模式时,如果背景图片的各边长均不大于背景图片显示区域的相应边长,从背景图片显示区域的左上角开始显示背景图片,如果背景图片的一边长大于背景图片显示区域的相应边长,则先将该背景图片的尺寸进行等比例压缩,以使得背景图片的各边长均不大于背景图片显示区域的相应边长,然后从背景图片显示区域的左上角开始显示压缩后的背景图片,在背景图片显示区域中没有被所述背景图片覆盖的部分,采用该背景图片的平均颜色进行填充。
13.根据权利要求12所述的皮肤编辑器,其特征在于,
所述显示模块包括镜像模块和缓存模块;
所述镜像模块,用于对背景图片显示区域上边缘起向下预定范围内的显示内容,以背景图片显示区域的上边缘为对称轴,做轴对称镜像处理;对背景图片显示区域左边缘向右预定范围内的显示内容,以背景图片显示区域的左边缘为对称轴,做轴对称镜像处理;对所述向下预定范围和所述向右预定范围的相交范围内的显示内容,以背景图片显示区域的左上角为对称中心,做中心对称镜像处理;
所述缓存模块,用于缓存背景图片显示区域内的显示内容和经镜像处理得到的镜像显示内容;
所述截取模块,用于截取所述背景图片显示区域的显示内容和所述镜像显示内容中被该客户端覆盖的显示内容。
14.根据权利要求11所述的皮肤编辑器,其特征在于,
所述显示模块,用于在显示模式为平铺模式时,从背景图片显示区域的左上角开始,按照平铺模式显示背景图片;
所述截取模块,用于在显示模式为平铺模式时,根据客户端快照在背景图片显示区域上的位置、以及单个背景图片的尺寸,确定客户端快照的左上角在所该左上角所在背景图片上的偏移位置,根据该偏移位置截取被该客户端快照覆盖的区域图片。
15.根据权利要求14所述的皮肤编辑器,其特征在于,
所述截取模块,用于在显示模式为平铺模式时,生成画布,该画布上按照2行2列的方式平铺了4张背景图片,以位于第1行且位于第1列的背景图片上的所述偏移位置为待截取的区域图片的左上角,按照单个背景图片的尺寸,从该画布上截取区域图片;
所述更新模块,用于利用从该画布上截取的区域图片,采用平铺方式更新客户端的皮肤。
16.根据权利要求10至15任一权利要求所述的皮肤编辑器,其特征在于,该皮肤编辑器还包括预览模块;
所述预览模块,用于通过将客户端上带有Alpha通道的图片的Alpha值设置为0,将所述区域图片与所述客户端快照进行图片合成,形成预览皮肤。
CN201110133928.3A 2011-05-23 2011-05-23 一种客户端皮肤编辑方法和皮肤编辑器 Active CN102799420B (zh)

Priority Applications (6)

Application Number Priority Date Filing Date Title
CN201110133928.3A CN102799420B (zh) 2011-05-23 2011-05-23 一种客户端皮肤编辑方法和皮肤编辑器
PCT/CN2012/073891 WO2012159508A1 (zh) 2011-05-23 2012-04-12 一种客户端皮肤编辑方法和皮肤编辑器
RU2013157045/08A RU2013157045A (ru) 2011-05-23 2012-04-12 Способ редактирования графического оформления клиента и редактор графического оформления
EP12789726.2A EP2717157B1 (en) 2011-05-23 2012-04-12 Method for editing skin of client and skin editor
CA2837123A CA2837123A1 (en) 2011-05-23 2012-04-12 Method for editing skin of client and skin editor
US14/122,223 US20140136984A1 (en) 2011-05-23 2012-04-12 Method for Editing Skin of Client and Skin Editor

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201110133928.3A CN102799420B (zh) 2011-05-23 2011-05-23 一种客户端皮肤编辑方法和皮肤编辑器

Publications (2)

Publication Number Publication Date
CN102799420A true CN102799420A (zh) 2012-11-28
CN102799420B CN102799420B (zh) 2015-12-02

Family

ID=47198537

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201110133928.3A Active CN102799420B (zh) 2011-05-23 2011-05-23 一种客户端皮肤编辑方法和皮肤编辑器

Country Status (6)

Country Link
US (1) US20140136984A1 (zh)
EP (1) EP2717157B1 (zh)
CN (1) CN102799420B (zh)
CA (1) CA2837123A1 (zh)
RU (1) RU2013157045A (zh)
WO (1) WO2012159508A1 (zh)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104850428A (zh) * 2015-04-23 2015-08-19 百度在线网络技术(北京)有限公司 一种更新移动客户端的用户界面的方法与装置
CN106648348A (zh) * 2016-09-18 2017-05-10 天脉聚源(北京)传媒科技有限公司 一种显示图片的方法及装置
CN108876800A (zh) * 2017-05-09 2018-11-23 腾讯科技(深圳)有限公司 一种信息处理方法和设备
CN111427489A (zh) * 2020-03-25 2020-07-17 深圳市迅雷网络技术有限公司 一种客户端窗体移动方法、装置和设备及可读存储介质

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105589883B (zh) * 2014-10-24 2020-03-06 阿里巴巴集团控股有限公司 网页的页面元素的显示方法和装置

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101075172A (zh) * 2006-08-23 2007-11-21 腾讯科技(深圳)有限公司 截图方法、截图装置及即时通讯客户端
KR20080017776A (ko) * 2006-08-22 2008-02-27 엘지전자 주식회사 이동통신 단말기의 영상 디스플레이 방법
CN101470604A (zh) * 2007-12-25 2009-07-01 百度在线网络技术(北京)有限公司 修改背景图片的方法、装置及***
CN101976194A (zh) * 2010-10-29 2011-02-16 中兴通讯股份有限公司 一种设置用户界面的方法及装置
CN102045435A (zh) * 2009-10-20 2011-05-04 深圳富泰宏精密工业有限公司 手机及其壁纸的处理方法

Family Cites Families (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20040029751A (ko) * 2002-10-02 2004-04-08 삼성전자주식회사 카메라를 구비한 휴대용 전화기에서 배경그림과 촬영사진을 합성하는 방법
WO2008150471A2 (en) * 2007-05-31 2008-12-11 Visan Industries Systems and methods for rendering media
JP2009276931A (ja) * 2008-05-13 2009-11-26 Canon Inc Ui制御装置、その制御方法及びプログラム
CN101820350A (zh) * 2009-02-27 2010-09-01 北京搜狗科技发展有限公司 自动更换皮肤的方法、装置及***
CN101493768A (zh) * 2009-03-13 2009-07-29 腾讯科技(深圳)有限公司 一种设置皮肤元素显示效果的方法和装置
CN101561747A (zh) * 2009-05-25 2009-10-21 腾讯科技(深圳)有限公司 输出客户端的用户界面的方法和装置
KR101878147B1 (ko) * 2010-01-12 2018-07-13 엘지전자 주식회사 비디오 신호의 처리 방법 및 장치

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20080017776A (ko) * 2006-08-22 2008-02-27 엘지전자 주식회사 이동통신 단말기의 영상 디스플레이 방법
CN101075172A (zh) * 2006-08-23 2007-11-21 腾讯科技(深圳)有限公司 截图方法、截图装置及即时通讯客户端
CN101470604A (zh) * 2007-12-25 2009-07-01 百度在线网络技术(北京)有限公司 修改背景图片的方法、装置及***
CN102045435A (zh) * 2009-10-20 2011-05-04 深圳富泰宏精密工业有限公司 手机及其壁纸的处理方法
CN101976194A (zh) * 2010-10-29 2011-02-16 中兴通讯股份有限公司 一种设置用户界面的方法及装置

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104850428A (zh) * 2015-04-23 2015-08-19 百度在线网络技术(北京)有限公司 一种更新移动客户端的用户界面的方法与装置
CN106648348A (zh) * 2016-09-18 2017-05-10 天脉聚源(北京)传媒科技有限公司 一种显示图片的方法及装置
CN108876800A (zh) * 2017-05-09 2018-11-23 腾讯科技(深圳)有限公司 一种信息处理方法和设备
CN108876800B (zh) * 2017-05-09 2022-11-29 腾讯科技(深圳)有限公司 一种信息处理方法和设备
CN111427489A (zh) * 2020-03-25 2020-07-17 深圳市迅雷网络技术有限公司 一种客户端窗体移动方法、装置和设备及可读存储介质
CN111427489B (zh) * 2020-03-25 2021-12-03 深圳市迅雷网络技术有限公司 一种客户端窗体移动方法、装置和设备及可读存储介质

Also Published As

Publication number Publication date
EP2717157A1 (en) 2014-04-09
EP2717157B1 (en) 2021-09-29
RU2013157045A (ru) 2015-06-27
EP2717157A4 (en) 2014-07-09
US20140136984A1 (en) 2014-05-15
CN102799420B (zh) 2015-12-02
CA2837123A1 (en) 2012-11-29
WO2012159508A1 (zh) 2012-11-29

Similar Documents

Publication Publication Date Title
RU2530272C2 (ru) Способ и устройство создания пользовательского интерфейса
CN102799420A (zh) 一种客户端皮肤编辑方法和皮肤编辑器
CN101365117B (zh) 一种自定义分屏模式的方法
EP2464093B1 (en) Image file generation device, image processing device, image file generation method, and image processing method
CN107480255A (zh) 基于互联网的对商品进行3d在线设计定制及展示的方法
CN101420534B (zh) 多画面显示方法和装置
US20100083146A1 (en) Image Display updating system, server client system and drawing operation echo back script
CN104346115B (zh) 将图片分配到多个终端进行显示的方法及终端
CN105892839A (zh) 一种基于即时通信工具的截图处理方法和装置
EP2852902A1 (en) User interface, information display method, and computer readable medium
CN109785816A (zh) 移动终端及其显示控制方法
CN106598219A (zh) 基于虚拟现实技术选择座位的方法、***及虚拟现实头戴
CN101692196A (zh) 一种窗口排列方法、***及显示终端
CN101958002A (zh) 图像处理装置以及图像处理方法
US9280847B2 (en) Image composition apparatus, image retrieval method, and storage medium storing program
CN109144652A (zh) 一种视图显示方法、装置、电子设备及存储介质
CN103702230B (zh) 图像显示方法及装置
CN107025877A (zh) 一种显示设备及其分屏显示方法
CN105808035A (zh) 图标显示方法及装置
CN1806713A (zh) 一种美甲图案的选取方法
EP0194092A2 (en) Display system and method
CN106201838A (zh) 视频下载进度显示方法及装置
CN1503576A (zh) 移动终端的显示布置
US9165395B2 (en) Image processing apparatus and method
EP1437687A1 (en) Hierarchical sort of objects linked in virtual three-dimensional space

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
C14 Grant of patent or utility model
GR01 Patent grant