CN116088740A - 界面处理方法和装置 - Google Patents

界面处理方法和装置 Download PDF

Info

Publication number
CN116088740A
CN116088740A CN202210736923.8A CN202210736923A CN116088740A CN 116088740 A CN116088740 A CN 116088740A CN 202210736923 A CN202210736923 A CN 202210736923A CN 116088740 A CN116088740 A CN 116088740A
Authority
CN
China
Prior art keywords
image
interface
message
management module
terminal device
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
CN202210736923.8A
Other languages
English (en)
Other versions
CN116088740B (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.)
Honor Device Co Ltd
Original Assignee
Honor Device 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 Honor Device Co Ltd filed Critical Honor Device Co Ltd
Priority to CN202311719274.1A priority Critical patent/CN118170296A/zh
Publication of CN116088740A publication Critical patent/CN116088740A/zh
Application granted granted Critical
Publication of CN116088740B publication Critical patent/CN116088740B/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/0484Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • 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/0484Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04847Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F2203/00Indexing scheme relating to G06F3/00 - G06F3/048
    • G06F2203/048Indexing scheme relating to G06F3/048
    • G06F2203/04804Transparency, e.g. transparent or translucent windows

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本申请实施例提供一种界面处理方法和装置,终端设备显示第一界面;第一界面中包括第一图像;终端设备接收到第一操作;响应于第一操作,终端设备对第一图像进行模糊处理,得到第二图像,以及显示第二界面;终端设备接收到第二操作;响应于第二操作,终端设备显示第三界面,第三界面包括裁剪框,第三界面的裁剪框内的图像为第一图像的第一部分内容,第三界面的裁剪框外的图像为第二图像的部分内容。这样,使得终端设备可以在接收到用户打开裁剪功能对应的第二界面时,对第一图像进行模糊处理得到第二图像,进而终端设备可以在接收到第二操作时,在裁剪框的外侧显示该第二图像的部分内容,避免基于第二操作对第一图像实时进行模糊处理的耗能情况。

Description

界面处理方法和装置
本申请要求于2022年05月30日提交中国专利局、申请号为202210601438.X、申请名称为“界面处理方法和装置”的中国专利申请的优先权,其全部内容通过引用结合在本申请中。
技术领域
本申请涉及终端技术领域,尤其涉及一种界面处理方法和装置。
背景技术
随着互联网的普及和发展,人们对于终端设备的功能需求也越发多样化。例如,为了满足用于对于图像的编辑功能,较多终端设备可以实现用于对于图像的裁剪、旋转、以及添加文字等功能。
通常情况下,终端设备可以在显示裁剪功能对应的界面中,基于用户移动裁剪框或者移动图像的操作,对裁剪框外侧的部分图像进行模糊处理。然而,上述模糊处理过程的耗能较高。
发明内容
本申请实施例提供一种界面处理方法和装置,使得终端设备可以在接收到用户打开裁剪功能对应的第二界面时,对第一图像进行模糊处理得到第二图像,进而终端设备可以在接收到第二操作时,在裁剪框的外侧显示该第二图像的部分内容,避免基于第二操作对第一图像实时进行模糊处理的耗能情况。
第一方面,本申请实施例提供一种界面处理方法,终端设备显示第一界面;第一界面中包括第一图像;终端设备接收到第一操作;响应于第一操作,终端设备对第一图像进行模糊处理,得到第二图像,以及,显示第二界面,第二界面包括第一图像以及裁剪框;终端设备接收到第二操作;响应于第二操作,终端设备显示第三界面,第三界面包括裁剪框,第三界面的裁剪框内的图像为第一图像的第一部分内容,第三界面的裁剪框外的图像为第二图像的部分内容。这样,使得终端设备可以在接收到用户打开裁剪功能对应的第二界面时,对第一图像进行模糊处理得到第二图像,进而终端设备可以在接收到第二操作时,在裁剪框的外侧显示该第二图像的部分内容,避免基于第二操作对第一图像实时进行模糊处理的耗能情况。
在一种可能的实现方式中,终端设备对第一图像进行模糊处理,得到第二图像,包括:终端设备利用第一图像生成第三图像;其中,第三图像的尺寸为第一图像的预设倍数,第三图像中包括第一图像;在第三图像所占内存小于或等于预设内存的情况下,终端设备对第三图像进行模糊处理,得到第二图像。这样,终端设备可以基于对包含第一图像以及黑色边框的第三图像进行模糊处理,得到第二图像,使得第二图像可以在第一图像以及黑色边框的中间存在模糊渐变的效果,提高用户在裁剪功能中查看该第二图像的体验感。
在一种可能的实现方式中,方法还包括:在第三图像所占内存大于预设内存的情况下,终端设备基于预设内存对预设倍数进行调整,得到调整后的倍数;终端设备基于调整后的倍数以及第一图像生成第四图像;第四图像中包括第一图像;在第三图像所占内存小于或等于预设内存的情况下,终端设备对第三图像进行模糊处理,得到第二图像,包括:在第四图像所占内存小于或等于预设内存的情况下,终端设备对第四图像进行模糊处理,得到第二图像。这样,终端设备可以基于第三图像所占内存的判断,防止生成模糊图像的过程中发生内存溢出,进而节省生成模糊图像过程的耗能情况。
在一种可能的实现方式中,方法还包括:终端设备接收针对第三界面的第三操作;响应于第三操作,终端设备显示第四界面;其中,第四界面中包括裁剪框,第四界面的裁剪框内的图像为第五图像的部分内容,第四界面的裁剪框外的图像为第六图像的部分内容,第五图像为对第一图像进行放大后得到的图像;第六图像为对第二图像进行放大后得到的图像。这样,当终端设备对第一图像进行放大时,也可以同步对第二图像进行放大,并且放大倍数越多,该第二图像的模糊程度可以越高,提高用户在裁剪功能中查看该第二图像的体验感
在一种可能的实现方式中,方法还包括:终端设备接收针对第三界面的第四操作;响应于第四操作,终端设备显示第五界面;其中,第五界面中包括裁剪框,第五界面的裁剪框内的图像为第一部分内容,第五界面的裁剪框外的图像为第一图像的第二部分内容。这样,在终端设备接收到用户针对第三界面中的第一图像或第二图像的第四操作时,终端设备可以在裁剪框的外侧显示第一图像,使得用户可以在第五界面中查看到裁剪框内的部分内容位于第一图像中的位置,便于用户裁剪。
在一种可能的实现方式中,方法还包括:终端设备接收针对第五界面的第五操作;响应于第五操作,终端设备显示第三界面。这样,终端设备可以在接收到用户抬手的第五操作时,对裁剪框外侧的第二图像进行动态显示,使得动态显示的效果更符合用户使用裁剪功能的使用需求。
在一种可能的实现方式中,终端设备包括:预览图像管理模块、视图系统以及显示驱动,响应于第二操作,终端设备显示第三界面,包括:响应于第二操作,预览图像管理模块向视图系统发送第一消息;第一消息用于指示第二图像的透明度由100%调整至0%;视图系统基于第一消息生成第一动画,并向显示驱动发送第一动画;显示驱动基于第一动画显示第一界面。这样,终端设备可以在接收到第二操作时,对裁剪框外侧的第二图像进行动态显示,使得动态显示的效果更符合用户使用裁剪功能的使用需求。
在一种可能的实现方式中,终端设备还包括:裁剪框管理模块,方法还包括:响应于第二操作,裁剪框管理模块向视图系统发送第二消息;第二消息用于指示裁剪框内的三等分线的透明度由0%调整至100%;视图系统基于第一消息生成第一动画,包括:视图系统基于第一消息以及第二消息生成第一动画。这样,终端设备可以在接收到第二操作时,对裁剪框外侧的第二图像以及裁剪框内侧的三等分线进行动态显示,使得动态显示的效果更符合用户使用裁剪功能的使用需求。
在一种可能的实现方式中,响应于第四操作,终端设备显示第五界面,包括:响应于第四操作,预览图像管理模块向视图系统发送第三消息;第三消息用于指示第二图像的透明度由0%调整至100%;视图系统基于第三消息生成第二动画,并向显示驱动发送第二动画;显示驱动调用显示器显示第二动画。这样,在终端设备接收到用户针对第三界面中的第一图像或第二图像的第四操作时,终端设备可以在裁剪框的外侧显示第一图像,使得用户可以在第五界面中查看到裁剪框内的部分内容位于第一图像中的位置,便于用户裁剪。
在一种可能的实现方式中,方法还包括:响应于第四操作,裁剪框管理模块向视图系统发送第四消息;第四消息用于指示三等分线的透明度由100%调整至0%;视图系统基于第三消息生成第二动画,包括:视图系统基于第三消息以及第四消息生成第二动画。这样,在终端设备接收到用户针对第三界面中的第一图像或第二图像的第四操作时,终端设备可以在裁剪框的外侧显示第一图像并且在裁剪框的内侧显示三等分线,使得用户可以在第五界面中查看到裁剪框内的部分内容的宽高比例以及位于第一图像中的位置,便于用户裁剪。
在一种可能的实现方式中,第三界面中还包括:用于对图像进行旋转的第一控件,方法还包括:终端设备接收针对第一控件的第六操作;响应于第六操作,终端设备对第一图像以及第二图像进行旋转处理,显示第六界面并跳转至第七界面;其中,第六界面中包括:旋转后的第一部分内容;第七界面中包括旋转后的裁剪框,第七界面中旋转后的裁剪框内的图像为旋转后的第一部分内容,第七界面中旋转后的裁剪框外的图像为旋转后的第二图像的部分内容。这样,终端设备可以基于用户的旋转操作,对第一图像、第二图像以及裁剪框进行动态显示,使得动态显示的效果更符合用户使用裁剪功能的使用需求。
在一种可能的实现方式中,终端设备还包括:界面控件管理模块,响应于第六操作,终端设备对第一图像以及第二图像进行旋转处理,显示第六界面并跳转至第七界面,包括:响应于第六操作,界面控件管理模块向裁剪功能管理模块发送第五消息;第五消息用于指示对第一图像以及第二图像进行旋转处理,第五消息中包括旋转角度;裁剪功能管理模块向预览图像管理模块发送第五消息;预览图像管理模块基于第五消息向视图系统发送第六消息;第六消息用于指示第二图像的透明度由0%调整至100%,再由100%调整至0%,第六消息中包括旋转角度;视图系统基于第六消息,对第二图像的透明度进行调整,以及对第一图像以及第二图像进行旋转,生成第三动画,并向显示驱动发送第三动画;显示驱动基于第三动画显示第六界面并跳转至第七界面。这样,终端设备可以基于用户的旋转操作,对第一图像以及第二图像进行动态显示,使得动态显示的效果更符合用户使用裁剪功能的使用需求。
在一种可能的实现方式中,方法还包括:裁剪功能管理模块向裁剪框管理模块发送第五消息;裁剪框管理模块基于第五消息向视图系统发送第七消息;第七消息用于指示裁剪框的透明度由0%调整至100%,再由100%调整至0%;视图系统基于第六消息,对第二图像的透明度进行调整,以及对第一图像以及第二图像进行旋转,生成第三动画,包括:视图系统基于第六消息以及第七消息,对第二图像的透明度和裁剪框的透明度进行调整,以及对第一图像以及第二图像进行旋转,生成第三动画。这样,终端设备可以基于用户的旋转操作,对第一图像、第二图像以及裁剪框进行动态显示,使得动态显示的效果更符合用户使用裁剪功能的使用需求。
在一种可能的实现方式中,终端设备对第一图像进行模糊处理,得到第二图像,包括:裁剪功能管理模块向预览图像管理模块发送第八消息;第八消息用于指示对第二界面进行初始化;预览图像管理模块基于第八消息对第一图像进行模糊处理,得到第二图像。这样,使得裁剪功能管理模块可以在接收到用户打开裁剪功能对应的第二界面时指示预览图像管理模块对第一图像进行模糊处理得到第二图像,避免对第一图像实时进行模糊处理的耗能情况。
在一种可能的实现方式中,在第三界面中,裁剪框的内侧显示有三等分线;三等分线用于对裁剪框的宽以及裁剪框的高分别进行三等分。
第二方面,本申请实施例提供一种界面处理装置,显示单元,用于显示第一界面;第一界面中包括第一图像;处理单元,用于接收到第一操作;响应于第一操作,处理单元,还用于对第一图像进行模糊处理,得到第二图像,以及,显示单元,还用于显示第二界面,第二界面包括第一图像以及裁剪框;处理单元,还用于接收到第二操作;响应于第二操作,显示单元,还用于显示第三界面,第三界面包括裁剪框,第三界面的裁剪框内的图像为第一图像的第一部分内容,第三界面的裁剪框外的图像为第二图像的部分内容。
在一种可能的实现方式中,处理单元,具体用于利用第一图像生成第三图像;其中,第三图像的尺寸为第一图像的预设倍数,第三图像中包括第一图像;在第三图像所占内存小于或等于预设内存的情况下,处理单元,还具体用于对第三图像进行模糊处理,得到第二图像。
在一种可能的实现方式中,在第三图像所占内存大于预设内存的情况下,处理单元,还用于基于预设内存对预设倍数进行调整,得到调整后的倍数;处理单元,还用于基于调整后的倍数以及第一图像生成第四图像;第四图像中包括第一图像;在第四图像所占内存小于或等于预设内存的情况下,处理单元,还用于对第四图像进行模糊处理,得到第二图像。
在一种可能的实现方式中,处理单元,还用于接收针对第三界面的第三操作;响应于第三操作,显示单元,还用于显示第四界面;其中,第四界面中包括裁剪框,第四界面的裁剪框内的图像为第五图像的部分内容,第四界面的裁剪框外的图像为第六图像的部分内容,第五图像为对第一图像进行放大后得到的图像;第六图像为对第二图像进行放大后得到的图像。
在一种可能的实现方式中,处理单元,还用于接收针对第三界面的第四操作;响应于第四操作,显示单元,还用于显示第五界面;其中,第五界面中包括裁剪框,第五界面的裁剪框内的图像为第一部分内容,第五界面的裁剪框外的图像为第一图像的第二部分内容。
在一种可能的实现方式中,处理单元,还用于接收针对第五界面的第五操作;响应于第五操作,显示单元,还用于显示第三界面。
在一种可能的实现方式中,终端设备包括:预览图像管理模块、视图系统以及显示驱动,响应于第二操作,处理单元,还用于向视图系统发送第一消息;第一消息用于指示第二图像的透明度由100%调整至0%;处理单元,还用于基于第一消息生成第一动画,并向显示驱动发送第一动画;处理单元,还用于基于第一动画显示第一界面。
在一种可能的实现方式中,终端设备还包括:裁剪框管理模块,响应于第二操作,处理单元,还用于向视图系统发送第二消息;第二消息用于指示裁剪框内的三等分线的透明度由0%调整至100%;处理单元,还用于基于第一消息以及第二消息生成第一动画。
在一种可能的实现方式中,响应于第四操作,处理单元,还用于向视图系统发送第三消息;第三消息用于指示第二图像的透明度由0%调整至100%;处理单元,还用于基于第三消息生成第二动画,并向显示驱动发送第二动画;处理单元,还用于调用显示器显示第二动画。
在一种可能的实现方式中,响应于第四操作,处理单元,还用于向视图系统发送第四消息;第四消息用于指示三等分线的透明度由100%调整至0%;处理单元,还用于基于第三消息以及第四消息生成第二动画。
在一种可能的实现方式中,第三界面中还包括:用于对图像进行旋转的第一控件,处理单元,还用于接收针对第一控件的第六操作;响应于第六操作,处理单元,还用于对第一图像以及第二图像进行旋转处理,显示单元,还用于显示第六界面并跳转至第七界面;其中,第六界面中包括:旋转后的第一部分内容;第七界面中包括旋转后的裁剪框,第七界面中旋转后的裁剪框内的图像为旋转后的第一部分内容,第七界面中旋转后的裁剪框外的图像为旋转后的第二图像的部分内容。
在一种可能的实现方式中,终端设备还包括:界面控件管理模块,响应于第六操作,处理单元,还用于向裁剪功能管理模块发送第五消息;第五消息用于指示对第一图像以及第二图像进行旋转处理,第五消息中包括旋转角度;处理单元,还用于向预览图像管理模块发送第五消息;处理单元,还用于基于第五消息向视图系统发送第六消息;第六消息用于指示第二图像的透明度由0%调整至100%,再由100%调整至0%,第六消息中包括旋转角度;处理单元,还用于基于第六消息,对第二图像的透明度进行调整,以及对第一图像以及第二图像进行旋转,生成第三动画,并向显示驱动发送第三动画;处理单元,还用于基于第三动画显示第六界面并跳转至第七界面。
在一种可能的实现方式中,处理单元,还用于向裁剪框管理模块发送第五消息;处理单元,还用于基于第五消息向视图系统发送第七消息;第七消息用于指示裁剪框的透明度由0%调整至100%,再由100%调整至0%;处理单元,还用于基于第六消息以及第七消息,对第二图像的透明度和裁剪框的透明度进行调整,以及对第一图像以及第二图像进行旋转,生成第三动画。
在一种可能的实现方式中,处理单元,还用于向预览图像管理模块发送第八消息;第八消息用于指示对第二界面进行初始化;处理单元,还用于基于第八消息对第一图像进行模糊处理,得到第二图像。
在一种可能的实现方式中,在第三界面中,裁剪框的内侧显示有三等分线;三等分线用于对裁剪框的宽以及裁剪框的高分别进行三等分。
第三方面,本申请实施例提供一种终端设备,包括处理器和存储器,存储器用于存储代码指令;处理器用于运行代码指令,使得终端设备以执行如第一方面或第一方面的任一种实现方式中描述的方法。
第四方面,本申请实施例提供一种计算机可读存储介质,计算机可读存储介质存储有指令,当指令被执行时,使得计算机执行如第一方面或第一方面的任一种实现方式中描述的方法。
第五方面,一种计算机程序产品,包括计算机程序,当计算机程序被运行时,使得计算机执行如第一方面或第一方面的任一种实现方式中描述的方法。
应当理解的是,本申请的第二方面至第五方面与本申请的第一方面的技术方案相对应,各方面及对应的可行实施方式所取得的有益效果相似,不再赘述。
附图说明
图1为本申请实施例提供的一种裁剪功能的界面示意图;
图2为本申请实施例提供的一种终端设备的硬件结构示意图;
图3为本申请实施例提供的一种终端设备的软件结构示意图;
图4为本申请实施例提供的一种打开编辑功能的界面示意图;
图5为本申请实施例提供的一种裁剪功能初始化的流程示意图;
图6为本申请实施例提供的一种图像叠加的示意图;
图7为本申请实施例提供的一种生成模糊图像的流程示意图;
图8为本申请实施例提供的一种裁剪图像的界面示意图;
图9为本申请实施例提供的一种界面处理方法的流程示意图;
图10为本申请实施例提供的一种触发预览区域的界面示意图
图11为本申请实施例提供的另一种界面处理方法的界面示意图
图12为本申请实施例提供的一种裁剪界面示意图;
图13为本申请实施例提供的一种放大预览图像的界面示意图;
图14为本申请实施例提供的一种显示动画的示意图;
图15为本申请实施例提供的再一种图像处理的流程示意图;
图16为本申请实施例提供的一种旋转图像的界面示意图;
图17为本申请实施例提供的另一种显示动画的示意图;
图18为本申请实施例提供的一种界面处理装置的结构示意图;
图19为本申请实施例提供的另一种终端设备的硬件结构示意图。
具体实施方式
为了便于清楚描述本申请实施例的技术方案,在本申请的实施例中,采用了“第一”、“第二”等字样对功能和作用基本相同的相同项或相似项进行区分。例如,第一值和第二值仅仅是为了区分不同的值,并不对其先后顺序进行限定。本领域技术人员可以理解“第一”、“第二”等字样并不对数量和执行次序进行限定,并且“第一”、“第二”等字样也并不限定一定不同。
需要说明的是,本申请中,“示例性的”或者“例如”等词用于表示作例子、例证或说明。本申请中被描述为“示例性的”或者“例如”的任何实施例或设计方案不应被解释为比其他实施例或设计方案更优选或更具优势。确切而言,使用“示例性的”或者“例如”等词旨在以具体方式呈现相关概念。
本申请中,“至少一个”是指一个或者多个,“多个”是指两个或两个以上。“和/或”,描述关联对象的关联关系,表示可以存在三种关系,例如,A和/或B,可以表示:单独存在A,同时存在A和B,单独存在B的情况,其中A,B可以是单数或者复数。字符“/”一般表示前后关联对象是一种“或”的关系。“以下至少一项(个)”或其类似表达,是指的这些项中的任意组合,包括单项(个)或复数项(个)的任意组合。例如,a,b,或c中的至少一项(个),可以表示:a,b,c,a和b,a和c,b和c,或a、b和c,其中a,b,c可以是单个,也可以是多个。
通常情况下,终端设备可以在显示裁剪功能对应的界面中,对裁剪框外侧的部分内容进行模糊处理。示例性的,图1为本申请实施例提供的一种裁剪功能的界面示意图。在图1对应的实施例中,以终端设备为手机为例进行示例说明,该示例并不构成对本申请实施例的限定。
如图1所示的界面,该界面中还可以包括:照片101、裁剪框102、黑色背景104、用于退出编辑的控件、用于保存的控件、多个用于调整裁剪比例的控件、用于旋转照片的控件、用于对照片进行镜像处理的控件、用于调整旋转角度的滑动杆以及进度条、用于修剪照片的控件103(或称为修剪控件)、用于添加滤镜的控件、用于调节照片的控件、以及用于对照片进行更多编辑的控件等。其中,该用于修剪照片的控件103可以为选中状态,且该用于修剪照片的控件103用于指示终端设备在如图1所示的界面中对照片101进行裁剪等处理。
可以理解的是,如图1所示的界面,本申请实施例中可以用虚线指示图像的模糊情况,例如裁剪框102外侧的虚线可以用于指示裁剪框102外侧的图像为模糊图像。
如图1所示,在用户将照片101中的部分内容移动至裁剪框102的内侧时,终端设备可以对裁剪框102外侧的照片101的部分内容进行模糊处理,使得终端设备可以显示裁剪框102的内侧清晰、且裁剪框102的外侧模糊的界面。进一步的,当用户继续移动该裁剪框102或移动照片101时使得裁剪框102内侧(以及外侧)显示的内容发生变化,则终端设备可以继续对该裁剪框102外侧的部分图像实时进行模糊处理。
然而,在使用裁剪功能时,终端设备基于用户移动裁剪框或者移动照片的操作,实时对裁剪框外侧的部分内容进行模糊处理的耗能较高。
有鉴于此,本申请实施例提供一种界面处理方法,终端设备显示第一界面;第一界面中包括第一图像;终端设备接收到第一操作;响应于第一操作,终端设备可以在进入裁剪功能时对第一图像进行模糊处理,得到第二图像;进而显示第二界面,第二界面包括第一图像以及裁剪框;在接收到第二操作时,基于对该第二图像的透明度和/或第二图像的缩放等简单的处理,在裁剪框的外侧显示该第二图像的部分内容,避免实时进行模糊处理时耗能较高的情况。
可以理解的是,上述终端设备也可以称为终端,(terminal)、用户设备(userequipment,UE)、移动台(mobile station,MS)、移动终端(mobile terminal,MT)等。终端设备可以为具有裁剪功能的手机(mobile phone)、智能电视、穿戴式设备、平板电脑(Pad)、带无线收发功能的电脑、虚拟现实(virtual reality,VR)终端设备、增强现实(augmentedreality,AR)终端设备、工业控制(industrial control)中的无线终端、无人驾驶(self-driving)中的无线终端、远程手术(remote medical surgery)中的无线终端、智能电网(smart grid)中的无线终端、运输安全(transportation safety)中的无线终端、智慧城市(smart city)中的无线终端、智慧家庭(smart home)中的无线终端等等。本申请的实施例对终端设备所采用的具体技术和具体设备形态不做限定。
为了能够更好地理解本申请实施例,下面对本申请实施例的终端设备的结构进行介绍。示例性的,图2为本申请实施例提供的一种终端设备的结构示意图。
终端设备可以包括处理器110,外部存储器接口120,内部存储器121,通用串行总线(universal serial bus,USB)接口130,充电管理模块140,电源管理模块141,天线1,天线2,移动通信模块150,无线通信模块160,音频模块170,扬声器170A,受话器170B,麦克风170C,耳机接口170D,传感器模块180,按键190,指示器192,摄像头193,以及显示屏194等。其中传感器模块180可以包括压力传感器180A,陀螺仪传感器180B,气压传感器180C,磁传感器180D,加速度传感器180E,距离传感器180F,接近光传感器180G,指纹传感器180H,温度传感器180J,触摸传感器180K,环境光传感器180L,骨传导传感器180M等。
可以理解的是,本申请实施例示意的结构并不构成对终端设备的具体限定。在本申请另一些实施例中,终端设备可以包括比图示更多或更少的部件,或者组合某些部件,或者拆分某些部件,或者不同的部件布置。图示的部件可以以硬件,软件或软件和硬件的组合实现。
处理器110可以包括一个或多个处理单元。其中,不同的处理单元可以是独立的器件,也可以集成在一个或多个处理器中。处理器110中还可以设置存储器,用于存储指令和数据。
USB接口130是符合USB标准规范的接口,具体可以是Mini USB接口,Micro USB接口,USB Type C接口等。USB接口130可以用于连接充电器为终端设备充电,也可以用于终端设备与外围设备之间传输数据。也可以用于连接耳机,通过耳机播放音频。该接口还可以用于连接其他电子设备,例如AR设备等。
充电管理模块140用于从充电器接收充电输入。其中,充电器可以是无线充电器,也可以是有线充电器。电源管理模块141用于连接充电管理模块140与处理器110。
终端设备的无线通信功能可以通过天线1,天线2,移动通信模块150,无线通信模块160,调制解调处理器以及基带处理器等实现。
天线1和天线2用于发射和接收电磁波信号。终端设备中的天线可用于覆盖单个或多个通信频带。不同的天线还可以复用,以提高天线的利用率。
移动通信模块150可以提供应用在终端设备上的包括2G/3G/4G/5G等无线通信的解决方案。移动通信模块150可以包括至少一个滤波器,开关,功率放大器,低噪声放大器(low noise amplifier,LNA)等。移动通信模块150可以由天线1接收电磁波,并对接收的电磁波进行滤波,放大等处理,传送至调制解调处理器进行解调。
无线通信模块160可以提供应用在终端设备上的包括无线局域网(wirelesslocalarea networks,WLAN)(如无线保真(wireless fidelity,Wi-Fi)网络),蓝牙(bluetooth,BT),全球导航卫星系统(global navigation satellite system,GNSS),调频(frequencymodulation,FM)等无线通信的解决方案。
终端设备通过GPU,显示屏194,以及应用处理器等实现显示功能。GPU为图像处理的微处理器,连接显示屏194和应用处理器。GPU用于执行数学和几何计算,用于图形渲染。
显示屏194用于显示图像,视频等。显示屏194包括显示面板。在一些实施例中,终端设备可以包括1个或N个显示屏194,N为大于1的正整数。
终端设备可以通过ISP,摄像头193,视频编解码器,GPU,显示屏194以及应用处理器等实现拍摄功能。
摄像头193用于捕获静态图像或视频。在一些实施例中,终端设备可以包括1个或N个摄像头193,N为大于1的正整数。
外部存储器接口120可以用于连接外部存储卡,例如Micro SD卡,实现扩展终端设备的存储能力。外部存储卡通过外部存储器接口120与处理器110通信,实现数据存储功能。例如将音乐,视频等文件保存在外部存储卡中。
内部存储器121可以用于存储计算机可执行程序代码,可执行程序代码包括指令。内部存储器121可以包括存储程序区和存储数据区。
终端设备可以通过音频模块170,扬声器170A,受话器170B,麦克风170C,耳机接口170D,以及应用处理器等实现音频功能。例如音乐播放,录音等。
音频模块170用于将数字音频信息转换成模拟音频信号输出,也用于将模拟音频输入转换为数字音频信号。扬声器170A,也称“喇叭”,用于将音频电信号转换为声音信号。终端设备可以通过扬声器170A收听音乐,或收听免提通话。受话器170B,也称“听筒”,用于将音频电信号转换成声音信号。当终端设备接听电话或语音信息时,可以通过将受话器170B靠近人耳接听语音。耳机接口170D用于连接有线耳机。麦克风170C,也称“话筒”,“传声器”,用于将声音信号转换为电信号。本申请实施例中,终端设备可以拥有设置一个麦克风170C。
压力传感器180A用于感受压力信号,可以将压力信号转换成电信号。在一些实施例中,压力传感器180A可以设置于显示屏194。陀螺仪传感器180B可以用于确定终端设备的运动姿态。气压传感器180C用于测量气压。磁传感器180D包括霍尔传感器。加速度传感器180E可检测终端设备在各个方向上(一般为三轴)加速度的大小。距离传感器180F,用于测量距离。接近光传感器180G可以包括例如发光二极管(LED)和光检测器,例如光电二极管。环境光传感器180L用于感知环境光亮度。指纹传感器180H用于采集指纹。温度传感器180J用于检测温度。触摸传感器180K,也称“触控器件”。骨传导传感器180M可以获取振动信号。
触摸传感器180K可以设置于显示屏194,由触摸传感器180K与显示屏194组成触摸屏,或称“触控屏”。本申请实施例中,该触摸屏内可以设置有电容感测节点网格(下文简称电容传感器),当终端设备确定该电容传感器接收到的至少一个网格中的电容的数值超出电容阈值时,则可以确定发生触摸操作;进一步的,终端设备可以基于超出电容阈值的至少一个网格所占的区域,确定触摸操作对应的触摸区域。
按键190包括开机键,音量键等。按键190可以是机械按键。也可以是触摸式按键。终端设备可以接收按键输入,产生与终端设备的用户设置以及功能控制有关的键信号输入。指示器192可以是指示灯,可以用于指示充电状态,电量变化,也可以用于指示消息,未接来电,通知等。
可能的实现方式中,终端设备的硬件结构中也可以包括其他硬件模块,本申请实施例中对此不做限定。
终端设备的软件系统可以采用分层架构,事件驱动架构,微核架构,微服务架构,或云架构等,在此不再赘述。
示例性的,图3为本申请实施例提供的一种终端设备的软件结构示意图。如图3所示,分层架构可以将软件分成若干个层,每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中,将安卓(android)系统分为多层,从上至下分别为应用程序(application,APP)层,应用程序框架(framework)层,系统库,以及内核(kernal)层。
如图3所示,应用程序层中可以包括下述一种或多种:图库等应用程序,本申请实施例中对应用程序层中包括的其他应用不做具体限定。
本申请实施例中,图库是智能手机、平板电脑等终端设备上的一款图像管理的应用程序,又可以称为“相册”,本实施例对该应用程序的名称不做限制。图库可以终端设备的系统应用或也可以为三方应用,图库可以支持用户对存储于终端设备上的图像进行各种操作,例如浏览、编辑、删除、选择等操作。
图库中可以包括:编辑管理模块,编辑管理模块可以用于为终端设备提供与图像编辑相关的多种功能。可能的实现方式中,图库中还可以包括:分享管理模块、收藏管理模块、删除管理模块、以及其他功能模块等(图3中未示出),本申请实施例中对此不做限定。
编辑管理模块中可以包括:裁剪功能管理模块、滤镜管理模块、调节管理模块、美颜管理模块、文字管理模块、以及其他管理模块等。
其中,裁剪功能管理模块,用于为终端设备提供与图像裁剪相关的功能,例如将图像裁剪到任意大小、对图像进行旋转、以及对图像进行镜像处理等功能。滤镜管理模块,用于为终端设备中的图像提供多种滤镜模板,例如基于滤镜模块为图像添加滤镜。调节管理模块,用于为终端设备中的图像提供如亮度调节、对比度调节、饱和度调节、锐度调节、亮部调节、暗部调节、色温调节、以及黑白调节等功能。美颜管理模块,用于对终端设备中的图像进行美颜处理。文字管理模块,用于为终端设备中的图像添加文字,并对添加的文字的大小、文字色彩等进行调整。其他管理模块中可以包括:用于为图像添加水印的功能模块、用于为图像添加相框的管理模块、用于对图像进行虚化处理的功能模块等,本申请实施例中对此不做限定。
裁剪功能管理模块中可以包括:界面控件管理模块、裁剪框管理模块、以及预览图像管理模块等。
其中,界面控件管理模块用于实现裁剪功能对应的页面中的控件的初始化和与控件相关的参数管理。裁剪框管理模块用于实现裁剪功能对应的页面中的裁剪框的初始化和与裁剪框相关的参数管理。预览图像管理模块用于实现裁剪框中的预览图像(或者包含预览图像以及黑色边框的清晰图像)以及模糊图像的图像绘制等。
应用程序框架层为应用程序层的应用程序提供应用编程接口(applicationprogramming interface,API)和编程框架。应用程序框架层包括一些预先定义的函数。
如图3所示,应用程序框架层可以包括:窗口管理器、内容提供器、资源管理器、视图系统、以及通知管理器等。
窗口管理器用于管理窗口程序。窗口管理器可以获取显示屏大小,判断是否有状态栏,锁定屏幕,触摸屏幕,拖拽屏幕,截取屏幕等。
内容提供器用来存放和获取数据,并使这些数据可以被应用程序访问。数据可以包括视频,图像,音频,拨打和接听的电话,浏览历史和书签,电话簿等。
资源管理器为应用程序提供各种资源,比如本地化字符串,图标,图像,布局文件,视频文件等。
视图系统包括可视控件,例如显示文字的控件,显示图像的控件等。视图系统可用于构建应用程序。显示界面可以由一个或多个视图组成的。例如,包括短信通知图标的显示界面,可以包括显示文字的视图以及显示图像的视图。
本申请实施例中,视图系统可以用于控制清晰图像、模糊图像、以及裁剪框(裁剪框中的三等分线)等内容的显示和取消显示等功能。
通知管理器使应用程序可以在状态栏中显示通知信息,可以用于传达告知类型的消息,可以短暂停留后自动消失,无需用户交互。比如通知管理器被用于告知下载完成,消息提醒等。通知管理器还可以是以图表或者滚动条文本形式出现在系统顶部状态栏的通知,例如后台运行的应用程序的通知,还可以是以对话窗口形式出现在屏幕上的通知。例如在状态栏提示文本信息,发出提示音,振动,指示灯闪烁等。
系统库可以包括多个功能模块。例如:表面管理器(surface manager),媒体库(media libraries),三维图形处理库,以及二维图形引擎等。
表面管理器用于对显示子系统进行管理,并且为多个应用程序提供了2D和3D图层的融合。
媒体库支持多种常用的音频,视频格式回放和录制,以及静态图像文件等。媒体库可以支持多种音视频编码格式,例如:MPEG4,H.264,MP3,AAC,AMR,JPG,PNG等。
三维图形处理库用于实现三维图形绘图,图像渲染,合成,和图层处理等功能。二维图形引擎是2D绘图的绘图引擎。
内核层是硬件和软件之间的层。内核层中包括下述一种或多种,例如:显示驱动、摄像头驱动、音频驱动、以及传感器驱动等。
可以理解的是,该终端设备的软件结构中也可以包括其他层以及其他模块,本申请实施例中对此不做限定。
下面结合应用程序启动或应用程序中发生界面切换的场景,示例性说明终端设备软件以及硬件的工作流程。
当终端设备的触摸传感器接收到触摸操作,相应的硬件中断被发给内核层。内核层将触摸操作加工成原始输入事件(包括触摸坐标,触摸力度,触摸操作的时间戳等信息)。原始输入事件被存储在内核层。应用程序框架层从内核层获取原始输入事件,识别该输入事件所对应的控件。以该触摸操作是触摸单击操作,该单击操作所对应的控件为图库中的编辑控件为例,图库调用应用框架层的接口,启动图库,进而通过调用内核层启动显示驱动,显示图库的编辑功能对应的界面。
下面以具体地实施例对本申请的技术方案以及本申请的技术方案如何解决上述技术问题进行详细说明。下面这几个具体的实施例可以独立实现,也可以相互结合,对于相同或相似的概念或过程可能在某些实施例中不再赘述。
在界面处理方法执行前,对终端设备显示图库中的编辑功能对应的界面的流程进行说明。
示例性的,图4为本申请实施例提供的一种打开编辑功能的界面示意图。本申请实施例中,以执行界面处理方法的应用程序为图库为例进行示例说明,该示例并不构成对本申请实施例的限定。
当终端设备接收到用户打开图库的操作时,终端设备可以显示如图4中的a所示的界面,该界面中可以包括:今天获取的照片401的图标、昨天获取的多个照片的图标、用于查看图库中的照片的控件(如照片控件)、用于查看图库中的相册的控件(如相册控件)、用于以时间维度查看照片的控件(如时刻控件)、用于以照片分类的形式查看照片的控件(如发现控件)、右上角用于查看图库的更多功能的控件等。
在如图4中的a所示的界面中,当终端设备接收到针对照片401的图标触发操作时,终端设备可以显示如图4中的b所示的界面。如图4中的b所示的界面,该界面中可以包括:照片401、用于指示获取照片401的时间的信息、用于退出当前界面的控件、用于查看照片401的更多信息的控件、用于分享照片的控件、用于收藏照片的控件、用于编辑照片的控件402、用于删除照片的控件、以及用于查看针对照片的更多功能的控件等。
本申请实施例中描述的触发操作可以为:点击操作、双击操作、滑动操作或语音操作等,本申请实施例中对此不做限定。
在如图4中的b所示的界面中,当终端设备接收到针对用于编辑照片的控件402的触发操作时,终端设备可以默认进入裁剪功能对应的界面,例如当终端设备接收到针对用于编辑照片的控件402的触发操作时,终端设备可以对裁剪功能进行初始化,并显示如图4中的c所示的界面。
如图4中的c所示的界面,该界面可以用于对照片进行裁剪,该界面可以称为裁剪功能对应的界面,或也可以称为裁剪界面,例如该界面中可以包括:照片401,该界面中显示的其他内容可以参见图1所示的界面,在此不再赘述。其中,该用于修剪照片的控件103可以为选中状态,用于指示终端设备可以在图4中的c所示的界面中对照片401进行裁剪等处理。其中,该黑色背景104的透明度可以实现调整。
其中,终端设备对裁剪功能进行初始化的过程可以参见图5对应的实施例。示例性的,图5为本申请实施例提供的一种裁剪功能初始化的流程示意图。在图5对应的实施例中,终端设备可以包括:裁剪功能管理模块、界面控件管理模块、预览图像管理模块以及裁剪框管理模块。
如图5所示,该裁剪功能初始化的过程可以包括如下步骤:
S501、当终端设备的裁剪功能管理模块接收到针对用于编辑照片的控件的操作时,终端设备的裁剪功能管理模块向界面控件管理模块、预览图像管理模块、以及裁剪框管理模块分别发送用于指示初始化的消息。
可以理解的是,裁剪功能管理模块可以同步向界面控件管理模块、预览图像管理模块、以及裁剪框管理模块发送用于指示初始化的消息;本申请实施例中对S502-S503所示的步骤、S504-S506所示的步骤、以及S507-S508所示的步骤之间的前后顺序不做限定。
S502、界面控件管理模块基于用于指示初始化的消息,初始化控件对应的展示参数。
其中,该控件对应的展示参数用于指示界面中显示的控件、以及控件的位置等,该控件可以为图4中的c所示的界面中的控件。
S503、界面控件管理模块向裁剪功能管理模块发送用于指示完成控件初始化的消息。
其中,该用于指示完成控件初始化的消息中还可以包括:控件对应的展示参数,使得裁剪功能管理模块(或者包含裁剪功能模块的编辑管理模块)可以将控件对应的展示参数发送至视图系统、以及显示驱动等,实现对于控件的显示。
S504、预览图像管理模块基于用于指示初始化的消息,初始化预览图像对应的展示参数。
其中,该预览图像对应的展示参数用于指示界面中预览图像的位置、预览图像的大小、以及预览图像等,预览图像可以为图4中的c所示的裁剪框内的照片401。
示例性的,该预览图像对应的展示参数中可以指示终端设备可以在如图4中的c所示的界面中,显示包含预览图像以及黑色边框的清晰图像,该图4中的c所示的界面中的照片401的四周可以包含一圈黑色边框。由于该清晰图像中的黑色边框与黑色背景104的颜色一致,因此无法直观的看出。
S505、预览图像管理模块初始化模糊图像。
其中,该模糊图像可以为:对S504所示的步骤中描述的清晰图像进行模糊处理时得到的。示例性的,预览图像管理模块可以基于高斯模糊算法等,确定清晰图像对应的模糊图像,本申请实施例中对模糊算法不做限定。
可以理解的是,终端设备可以在进入裁剪功能对应的界面时,生成模糊图像;进而,终端设备可以通过对该模糊图像的缩放或者透明度的调整,在裁剪框的外侧显示该模糊图像的部分内容,避免裁剪图像的过程中实时生成模糊图像造成的耗能较高的情况。
S506、预览图像管理模块向裁剪功能管理模块发送用于指示完成预览图像初始化的消息。
其中,该用于指示完成预览图像初始化的消息中还可以包括:预览图像对应的展示参数以及模糊图像,使得裁剪功能管理模块(或者包含裁剪功能模块的编辑管理模块)可以将预览图像对应的展示参数以及模糊图像发送至视图系统、以及显示驱动等,实现对于清晰图像以及模糊图像的显示。
S507、裁剪框管理模块基于用于指示初始化的消息,初始化裁剪框对应的展示参数。
其中,该裁剪框对应的展示参数用于指示裁剪框的位置、以及裁剪框的大小等,该裁剪框可以为图4中的c所示的裁剪框102。
S508、裁剪框管理模块向裁剪功能管理模块发送用于指示完成裁剪框初始化的消息。
其中,该用于指示完成裁剪框初始化的消息中可以包括:裁剪框对应的展示参数,使得裁剪功能管理模块(或者包含裁剪功能模块的编辑管理模块)可以将裁剪框对应的展示参数发送至视图系统、以及显示驱动等,实现对于裁剪框的显示。
进一步的,在裁剪功能管理模块接收到来自界面控件管理模块的用于指示完成控件初始化的消息,接收到来自预览图像管理模块的用于指示完成预览图像初始化的消息、以及接收到来自裁剪框管理模块的用于指示完成裁剪框初始化的消息时,裁剪功能管理模块可以确定当前已经完成裁剪功能对应的界面的初始化;进而,裁剪功能管理模块将控件对应的展示参数、预览图像对应的展示参数、模糊图像、以及裁剪框对应的展示参数等发送至视图系统以及显示驱动等模块,实现对于裁剪功能对应的界面的显示,例如显示驱动可以调用显示器显示如图4中的c所示的界面。
可以理解的是,视图系统可以实现对于多个图像数据的叠加和处理。示例性的,图6为本申请实施例提供的一种图像叠加的示意图。
如图6所示,终端设备的屏幕中可以叠加至少三层图像数据,例如该三层图像数据可以包括:清晰图像601、模糊图像602、以及裁剪框对应的图像603。
其中,清晰图像601可以为包含预览图像以及黑色边框的图像,该清晰图像601可以包含在S504所示步骤的预览图像对应的展示参数中;模糊图像602可以为对清晰图像601进行模糊处理后得到的图像,模糊图像602可以为S505所示步骤中描述的模糊图像,模糊图像602的尺寸大于预览图像的尺寸;裁剪框对应的图像603可以包含在S507所示步骤的裁剪框对应的展示参数中,该裁剪框对应的图像603中可以包括裁剪框以及黑色背景;该裁剪框的内侧用于显示清晰图像601中的部分内容,该裁剪框的外侧用于显示清晰图像601中的其他部分内容或者显示模糊图像602中的部分内容。
可以理解的是,裁剪框的内侧始终显示清晰图像中的部分内容,后文描述的对模糊图像的透明度进行调整的流程均可以理解为对裁剪框外侧的模糊图像进行透明度调整,对模糊图像进行透明度调整的步骤将不会对裁剪框内侧的清晰图像的显示构成影响。
基于此,视图系统可以基于针对清晰图像、模糊图像、以及裁剪框对应的图像中的各图像的处理,对裁剪功能对应的界面中显示的内容进行动态展示,进而增强用户使用裁剪功能的使用体验。
在图5对应的实施例的基础上,S505预览图像管理模块初始化模糊图像的方法可以参见图7对应的实施例。
示例性的,图7为本申请实施例提供的一种生成模糊图像的流程示意图。如图7所示,生成模糊图像的方法可以包括如下步骤:
S701、预览图像管理模块获取预览图像的宽和高。
S702、预览图像管理模块获取包含预览图像以及黑色边框、且面积为预览图像的1.5倍的清晰图像。
其中,该清晰图像相对于预览图像的扩大倍数也可以设置为其他数值,例如该扩大倍数也可以为1.2或1.7等,本申请实施例中对此不做限定。
S703、预览图像管理模块判断清晰图像是否大于50M。
其中,50M可以为内存大小,该内存大小也可以为其他数值,例如60M或70M等,本申请实施例中对此不做限定。
当预览图像管理模块确定清晰图像所占内存大于50M时,预览图像管理模块可以执行S704所示的步骤;或者,当预览图像管理模块确定清晰图像所占内存小于或等于50M时,预览图像管理模块可以执行S705所示的步骤。
可以理解的是,预览图像管理模块可以基于清晰图像的大小的判断,防止生成模糊图像的过程中发生内存溢出(out of memory,OOM),进而节省生成模糊图像的耗能情况。
S704、预览图像管理模块按照50M重新计算中清晰图像对于预览图像的扩大倍数。
S705、预览图像管理模块基于扩大倍数,生成边框为黑色的、且预览图像在中间的清晰图像。
S706、预览图像管理模块对清晰图像进行模糊处理,得到模糊图像。
其中,该模糊处理方法可以参见505所示的步骤中的描述,在此不再赘述。
基于此,终端设备可以根据图7对应的实施例生成大小合适的模糊图像。
可以理解的是,虽然预览图像管理模块可以生成清晰图像所对应的模糊图像,但由于模糊图像被裁剪框对应的图像所覆盖,因此模糊图像可以暂时不显示在如图4中的c所示的裁剪功能对应的界面中。
在图4对应的实施例的基础上,可能的实现方式中,终端设备可以基于用户操作对预览图像进行裁剪。
示例性的,图8为本申请实施例提供的一种裁剪图像的界面示意图。
在如图8中的a所示的界面中,终端设备可以基于矩形框801中的任一用于调整裁剪比例的控件,对预览图像800进行裁剪,使得终端设备显示如图8中的b所示的界面;或者,终端设备也可以基于用户双指针对预览图像800的触发操作、或者用户针对裁剪框的触发操作等操作,对预览图像800进行裁剪,使得终端设备显示如图8中的b所示的界面。如图8中的b所示的界面,该界面中可以包括:裁剪框内的裁剪图像、以及裁剪框外的模糊图像、用于指示重置的控件。
基于此,终端设备可以基于用户的操作,对预览图像进行灵活的调整,提高裁剪预览图像的使用体验。
在图8对应的实施例的基础上,终端设备可以基于用户的触发操作,对裁剪功能进行动态显示。
示例性的,图9为本申请实施例提供的一种界面处理方法的流程示意图。如图9所示,界面处理方法可以包括如下步骤:
S901、当预览图像管理模块监听到按下(down)事件时,预览图像管理模块初始化按下事件对应的动画,确定模糊图像的透明度由0%调整至100%。
其中,该按下事件可以为用户触发裁剪框内的预览图像时对应的事件、或者也可以为用户触发裁剪框外的模糊图像时对应的事件。
示例性的,图10为本申请实施例提供的一种触发预览区域的界面示意图。如图10中的a所示的界面,当终端设备接收到用户针对预览图像的按下操作时,终端设备的预览图像管理模块可以确定监听到按下事件时,并初始化按下事件对应的动画,例如确定模糊图像的透明度可以由0%调整至100%。
可以理解的是,当模糊图像的透明度为0%时,指示模糊图像显示,例如在如图10中的a所示的界面中裁剪框的外侧显示模糊图像;当模糊图像的透明度为100%时,指示模糊图像取消显示,例如在如图10中的b所示的界面中裁剪框的外侧不显示模糊图像。
终端设备可以在接收到用户在如图10中的a所示的界面中针对预览图像的按下操作时,对模糊图像进行取消显示,使得终端设备可以在裁剪框外侧显示清晰的预览图像,如显示图10中的b所示的界面中。可以理解的是,由于模糊图像覆盖在预览图像的上侧,因此当模糊图像的透明度为100%时,终端设备可以在裁剪框的外侧显示覆盖在模糊图像下侧的预览图像(或也可以理解为清晰图像)。
可以理解的是,对模糊图像的透明度进行调整的步骤均可以理解为对裁剪框的外侧的模糊图像进行调整,并且对裁剪框内侧的预览图像(或也可以理解为清晰图像)的显示不构成影响。
S902、预览图像管理模块向视图系统发送用于指示模糊图像的透明度由0%调整至100%的消息。
适应的,视图系统基于该用于指示模糊图像的透明度由0%调整至100%的消息,调整模糊图像的透明度。
S903、当预览图像管理模块监听到按下事件时,预览图像管理模块向裁剪框管理模块发送用于指示初始化按下事件的消息。
可以理解的时,S901以及S903可以由预览图像管理器同步执行,因此本申请实施例中对S901-S902所示的步骤,以及S903-S905所示的步骤的执行顺序不做限定。
S904、裁剪框管理模块初始化按下事件对应的动画,确定三等分线的透明度由100%调整至0%。
其中,三等分线可以为图10中的b所示的裁剪框内部的线条,三等分线用于对裁剪框的宽和高分别进行三等分。示例性的,如图10中的b所示的界面中,终端设备可以在接收到用户针对预览图像的按下操作时,显示裁剪框内的三等分线(或理解为显示三等分线时该三等分线的透明度为0%)。
示例性的,当三等分线的透明度为100%时,指示三等分线取消显示,例如在如图10中的a所示的界面中裁剪框的内侧不显示三等分线;当三等分线的透明度为0%时,指示三等分线显示,例如在如图10中的b所示的界面中裁剪框的内侧显示三等分线。
可以理解的是,显示的三等分线可以使得用户根据三等分线对应的比例进行合理的裁剪,增强用户使用裁剪功能的使用体验。
可能的实现方式中,当裁剪框管理模块监听到按下事件时,裁剪框管理模块可以初始化按下事件对应的动画,并确定三等分线的透明度由100%调整至0%。
S905、裁剪框管理模块向视图系统发送用于指示三等分线的透明度由100%调整至0%的消息。
适应的,视图系统基于该用于指示三等分线的透明度由100%调整至0%的消息,调整裁剪框内三等分线的透明度。
S906、视图系统将模糊图像的透明度由0%调整至100%,以及将三等分线的透明度由100%调整至0%,得到按下事件对应的动画。
S907、视图系统向显示驱动发送按下事件对应的动画。
S908、显示驱动调用显示器显示按下事件对应的动画。
示例性的,在显示器显示如图10中的a所示的界面的情况下,当显示驱动接收到来自视图系统的按下事件对应的动画时,显示驱动可以调用显示器显示图10中的b所示的界面。
在如图10中的b所示的界面中,当终端设备接收到用户将触发到屏幕上的手指抬起时,预览图像管理模块可以执行S909-S916所示的步骤,并显示如图10中的a所示的界面。
S909、当预览图像管理模块监听到抬起(up)事件时,预览图像管理模块初始化抬起事件对应的动画,确定模糊图像的透明度由100%调整至0%。
其中,该抬起事件可以为用户抬起触发屏幕的手指(或触控板等)时对应的事件。
示例性的,如图10中的b所示的界面,当终端设备接收到用户在按压预览图像的情况下,抬起手指(或也可以理解为松手、或者结束该按压预览图像)的操作时,终端设备的预览图像管理模块可以确定监听到抬起事件时,并初始化抬起事件对应的动画,例如确定模糊图像的透明度由100%调整至0%。
如图10中的a所示的界面中,终端设备可以在接收到用户抬起手指的操作时,对模糊图像进行显示,例如在裁剪框的外侧显示模糊图像。
S910、预览图像管理模块向视图系统发送用于指示模糊图像的透明度由100%调整至0%的消息。
适应的,视图系统基于该用于指示模糊图像的透明度由100%调整至0%的消息,调整模糊图像的透明度。
S911、当预览图像管理模块监听到抬起事件时,预览图像管理模块向裁剪框管理模块发送用于指示初始化抬起事件的消息。
可以理解的时,S909以及S911可以由预览图像管理器同步执行,因此本申请实施例中对S909-S910所示的步骤,以及S911-S913所示的步骤的执行顺序不做限定。
S912、裁剪框管理模块初始化抬起事件对应的动画,确定三等分线的透明度由0%调整至100%。
S913、裁剪框管理模块向视图系统发送用于指示三等分线的透明度由0%调整至100%的消息。
适应的,视图系统基于该用于指示三等分线的透明度由0%调整至100%的消息,调整裁剪框内三等分线的透明度。
S914、视图系统将模糊图像的透明度由100%调整至0%,以及将三等分线的透明度由0%调整至100%,生成抬起事件对应的动画。
S915、视图系统向显示驱动发送抬起事件对应的动画。
S916、显示驱动调用显示器显示抬起事件对应的动画。
示例性的,在显示器显示如图10中的b所示的界面的情况下,当显示驱动接收到来自视图系统的抬起事件对应的动画时,显示驱动可以调用显示器显示图10中的a所示的界面。
基于此,终端设备可以基于用户针对裁剪功能对应的界面的按下或抬起等操作,对裁剪框内的三等分线以及模糊图像进行动态显示;在终端设备接收到用户按下的操作时,终端设备可以在裁剪框外侧取消显示模糊图像,进而裁剪框外侧可以显示有预览图像中的部分内容,使得用户可以基于简单的操作,直观的看出裁剪框内显示的预览图像中的部分在整个预览图像中的位置,进而提高用户使用裁剪功能的使用体验。
在图9对应的实施例的基础上,S908之后,当终端设备监听到移动事件时,终端设备可以根据移动时产生的位置改变,对裁剪框内显示的内容进行调整。其中,该移动事件可以为双指按压裁剪框内的预览图像并向反方向移动时对应的事件,或者该移动事件也可以为单指按压裁剪框后向任意方向移动时对应的事件。
示例性的,图11为本申请实施例提供的另一种界面处理方法的界面示意图。如图11所示,该界面处理方法可以包括如下步骤:
可能的实现方式中,当接收到用户双指按压裁剪框内的预览图像并向反方向移动的操作(或者用户按压预览图像并向任一方向移动)时,预览图像管理模块可以确定监听到移动事件,并将移动时产生的数据发送至视图系统以及显示驱动,使得显示驱动可以对移动时对应的界面进行实时显示。或者,当接收到用户单指按压裁剪框后向任意方向移动的操作时,裁剪框管理模块可以确定监听到移动事件,并将移动时产生的数据发送至视图系统以及显示驱动,使得显示驱动可以对移动时对应的界面进行实时显示。
在监听到移动事件的基础上,当终端设备接收到用户抬起手指的操作时,预览图像管理模块可以执行S1101所示的步骤。
S1101、预览图像管理模块初始化抬起事件对应的动画,确定模糊图像的透明度由100%调整至0%,并确定发生抬起事件时裁剪框在预览图像中的坐标。
其中,发生抬起事件时裁剪框在预览图像中的坐标可以包括:裁剪框的四个顶点对应的坐标,该发生抬起事件时裁剪框在预览图像中的坐标可以用于指示移动事件结束时,用户对于预览图像的裁剪情况。
S1102、预览图像管理模块向视图系统发送用于指示模糊图像的透明度由100%调整至0%的消息、以及发生抬起事件时裁剪框在预览图像中的坐标。
S1103、预览图像管理模块向裁剪框管理模块发送用于指示初始化抬起事件的消息、以及发生抬起事件时裁剪框在预览图像中的坐标。
S1104、裁剪框管理模块初始化按下事件对应的动画,确定裁剪框所在位置处对应的三等分线的透明度由0%调整至100%。
S1105、裁剪框管理模块向视图系统发送用于指示裁剪框所在位置处对应的三等分线的透明度由0%调整至100%的消息。
S1106、视图系统根据发生抬起事件时裁剪框在预览图像中的坐标,将裁剪框外侧模糊图像的透明度由100%调整至0%,将裁剪框内侧的三等分线的透明度由0%调整至100%,以及将裁剪框内侧的图像放大到预设大小,得到抬起事件对应的动画。
示例性的,图12为本申请实施例提供的一种裁剪界面示意图。在图12中的a所示的界面中,当终端设备接收到用户单指按压裁剪框的右上角,并向左下角移动的操作时,终端设备可以显示如图12中的b所示的界面,进而跳转至如图12中的c所示的界面。其中,如图12中的b所示的界面中,裁剪框外侧可以显示清晰的预览图像,裁剪框内侧可以显示三等分线。如图12中的c所示的界面,裁剪框外侧可以显示模糊图像,裁剪框内侧可以取消显示三等分线。
可以理解的是,在终端设备由图12中的b所示的界面切换至图12中的c所示的界面的过程中,视图系统可以基于预设规则将图12中的b所示的界面中的裁剪框内侧的图像放大到预设大小。其中,裁剪框可以对应于一个最大显示区域,视图系统可以根据裁剪框的宽和高,对裁剪框中的内容放大到预设大小。例如,视图系统可以将裁剪框的宽扩大至最大显示区域中的宽对应的数值,并且该裁剪框的高可以随着裁剪框的宽扩大的比例适应扩大,进而居中显示在最大显示区域中;或者,将裁剪框的高扩大至最大显示区域中的高对应的数值,并且该裁剪框的宽可以随着裁剪框的高扩大的比例适应扩大,进而居中显示在最大显示区域中。
S1107、视图系统向显示驱动发送抬起事件对应的动画。
S1108、显示驱动调用显示器显示抬起事件对应的动画。
示例性的,在显示器显示如图12中的b所示的界面的情况下,当显示驱动接收抬起事件对应的动画时,显示驱动可以调用显示器显示图12中的c所示的界面。
基于此,终端设备可以基于用户针对裁剪框或预览图像的移动操作,对于预览图像进行灵活的裁剪。
可能的实现方式中,终端设备可以基于用户操作对裁剪框中的预览图像进行灵活放大,可以理解的是终端设备对裁剪框中的预览图像进行放大的程度越高,裁剪框外的模糊图像越模糊。示例性的,图13为本申请实施例提供的一种放大预览图像的界面示意图。
图13中的a可以为未对预览图像进行放大前终端设备显示的界面,图13中的b可以为对预览图像进行放大后终端设备显示的界面。对比于图13中的a所示的界面以及图13中的b所示的界面,图13中的b所示的界面中的针对预览图像的放大程度大于图13中的a所示的界面中的放大程度。图13中的b所示的界面中的预览图像的放大程度较大,裁剪框外侧的模糊图像越模糊。
可以理解的是,由于模糊图像不是终端设备实时生成的,而是在对预览图像进行任一触发前生成的,例如终端设备可以图5中的S505所示的步骤中生成的,而图13中的b所示的界面中的裁剪框外侧的放大的模糊图像是对S505所示的步骤中的模糊图像进行放大后得到的,因此对模糊图像放大的程度越高,则终端设备在裁剪框外侧显示的模糊图像越模糊。
基于此,终端设备可以根据图13对应的实施例,基于用户放大预览图像的操作,对模糊图像进行放大处理,使得放大后的模糊图像的动效更能符合用户使用裁剪功能的需求。
在图9以及图11对应的实施例的基础上,可能的实现方式中,对按下事件对应的动画以及抬起事件对应的动画进行说明。示例性的,图14为本申请实施例提供的一种显示动画的示意图。
在终端设备监听到按下事件以及移动事件时,裁剪框内的预览图像1401、裁剪框1402以及三等分线1403均可以跟随手势裁剪大小进行调整,并且动画速度按照阻尼曲线执行。其中,三等分线1403可以在150ms处将透明度由100%调整至0%,并且动画速度按照锐利曲线执行。裁剪框外的模糊图像1404在发生按下事件的150ms时,不跟随手势裁剪大小、动画速度按照锐利曲线执行、以及黑色背景设置的初始的透明度为60%。裁剪框外的模糊图像1404在发生移动事件时,将黑色背景的透明度由60%调整至27%等数值,使得用户可以更为明显的观察到图像裁剪时的覆盖在黑色背景下的预览图像。
在终端设备监听到抬起事件的1s后的250ms时,裁剪框内的预览图像1401、裁剪框1402、三等分线1403以及裁剪框外的模糊区域14004均可以在缩放时实现适配最大化,例如最大可能的适配最大显示区域,居中裁剪区域,动画速度按照标准曲线执行。其中,三等分线1403可以在150ms处将透明度由0%调整至100%,并且动画速度按照锐利曲线执行。裁剪框外的模糊图像1404在监听到抬起事件的1s后的150ms时,将黑色背景的透明度由27%调整至60%等数值,动画速度按照锐利曲线执行。
在图8对应的实施例的基础上,终端设备可以基于用户的触发操作,对预览图像以及模糊图像进行旋转。
示例性的,图15为本申请实施例提供的再一种图像处理的流程示意图。如图15所示,界面处理方法可以包括如下步骤:
S1501、在接收到用户针对旋转控件的触发操作时,界面控件管理模块确定旋转后的角度。
示例性的,图16为本申请实施例提供的一种旋转图像的界面示意图。如图16中的a所示的界面,当终端设备接收到用户针对旋转控件1601的触发操作时,终端设备可以确定旋转后的角度。其中,该旋转控件可以默认对图像进行逆时针旋转。例如,当预览图像(或模糊图像)的初始角度为0度为例,当终端设备接收到用户针对旋转控件1601的触发操作时,逆时针旋转后的角度可以确定为90度(或270度)。
S1502、界面控件管理模块向裁剪功能管理模块发送用于指示旋转的消息。
其中,用于指示旋转的消息中包括旋转后的角度。
S1503、裁剪功能管理模块向裁剪框管理模块发送用于指示旋转的消息。
可能的实现方式中,裁剪功能管理模块可以同时执行S1503所示的步骤以及S1506所示的步骤,且本申请实施例中对S1503-S1505所示步骤,以及S1506-S1508所示的步骤之间的先后顺序不做限定。
S1504、裁剪框管理模块初始化旋转动画,确定裁剪框的透明度由0%调整至100%,再由100%切换至0%。
示例性的,如在由图16中的a所示的界面切换至图16中的b所示的界面的过程中,裁剪框管理模块可以确定裁剪框的透明度由0%调整至100%,使得裁剪框可以取消显示;进一步的,在由图16中的b所示的界面切换至如图16中的c所示的界面的过程中,裁剪框管理模块可以确定裁剪框的透明度由100%切换至0%,使得裁剪框可以重新显示在界面中。
可以理解的是,由于在旋转的过程中,终端设备不支持裁剪框的触发,因此可以取消显示裁剪框,并在旋转结束时重新显示裁剪框。
S1505、裁剪框管理模块向视图系统发送用于指示将裁剪框的透明度由0%调整至100%,再由100%切换至0%的消息。
其中,该用于指示将裁剪框的透明度由0%调整至100%,再由100%切换至0%的消息中可以包括:旋转后的角度。
S1506、裁剪功能管理模块向预览图像管理模块发送用于指示旋转的消息。
S1507、预览图像管理模块初始化旋转动画,确定模糊图像的透明度由0%调整至100%,再由100%调整至0%。
示例性的,如在由图16中的a所示的界面切换至图16中的b所示的界面的过程中,预览图像管理模块可以确定模糊图像的透明度由0%调整至100%,使得模糊图像可以取消显示;进一步的,在由图16中的b所示的界面切换至如图16中的c所示的界面的过程中,预览图像管理模块可以确定模糊图像的透明度由100%切换至0%,使得模糊图像可以重新显示在裁剪框的外侧。
S1508、预览图像管理模块向视图系统发送用于指示将模糊图像的透明度由0%调整至100%,再由100%调整至0%的消息。
其中,该用于指示将模糊图像的透明度由0%调整至100%,再由100%调整至0%的消息中可以包括:旋转后的角度。
S1509、视图系统将裁剪框的透明度由0%调整至100%,再由100%切换至0%,基于旋转后的角度,对预览图像、模糊图像以及裁剪框进行旋转,将模糊图像的透明度由0%调整至100%,再由100%调整至0%,得到旋转功能对应的动画。
S1510、视图系统向显示驱动发送旋转功能对应的动画。
S1511、显示驱动调用显示器显示旋转功能对应的动画。
示例性的,显示驱动可以基于该旋转功能对应的动画,由图16中的a所示的界面切换至图16中的b所示的界面,进而切换至图16中的c所示的界面。
基于此,终端设备可以基于用户针对旋转控件的操作,对预览图像以及模糊图像进行灵活的旋转。
在图15对应的实施例的基础上,可能的实现方式中,对旋转功能对应的动画进行说明。
示例性的,图17为本申请实施例提供的另一种显示动画的示意图。裁剪框内的预览图像1701在接收到触发旋转按钮的300ms内对预览图像进行缩放且跟随旋转90度后适配比例,居中预览图像,且动画速度按照标准曲线执行。
裁剪框1702在接收到触发旋转按钮的50ms内,将裁剪框的透明度由0%调整至100%,此时动画速度按照锐利曲线执行;并且在接收到触发旋转按钮的300ms-450ms中将裁剪框的透明度由100%调整至0%,此时动画速度按照锐利曲线执行。
裁剪框外的模糊图像1703在接收到触发旋转按钮的300ms内对预览图像进行缩放且跟随旋转90度后适配比例,居中预览图像,且动画速度按照标准曲线执行;并且在接收到触发旋转按钮的50ms内将黑色背景的透明度由27%调整至0%,此时动画速度按照锐利曲线执行;并且在接收到触发旋转按钮的300ms-450ms中,将黑色背景的透明度由0%调整至27%,此时动画速度按照锐利曲线执行。
可以理解的是,本申请实施例中描述的界面仅作为一种示例,并不能构成对本申请实施例的限定。
上面结合图4-图17,对本申请实施例提供的方法进行了说明,下面对本申请实施例提供的执行上述方法的装置进行描述。如图18所示,图18为本申请实施例提供的一种界面处理装置的结构示意图,该界面处理装置可以是本申请实施例中的终端设备,也可以是终端设备内的芯片或芯片系统。
如图18所示,界面处理装置1800可以用于通信设备、电路、硬件组件或者芯片中,该界面处理装置包括:显示单元1801、以及处理单元1802。其中,显示单元1801用于支持界面处理装置1800执行的显示的步骤;处理单元1802用于支持界面处理装置1800执行信息处理的步骤。
具体的,本申请实施例提供一种界面处理装置1800,显示单元1801,用于显示第一界面;第一界面中包括第一图像;处理单元1802,用于接收到第一操作;响应于第一操作,处理单元1802,还用于对第一图像进行模糊处理,得到第二图像,以及,显示单元1801,还用于显示第二界面,第二界面包括第一图像以及裁剪框;处理单元1802,还用于接收到第二操作;响应于第二操作,显示单元1801,还用于显示第三界面,第三界面包括裁剪框,第三界面的裁剪框内的图像为第一图像的第一部分内容,第三界面的裁剪框外的图像为第二图像的部分内容。
可能的实现方式中,该界面处理装置1800中也可以包括通信单元1803。具体的,通信单元用于支持界面处理装置1800执行数据的发送以及数据的接收的步骤。其中,该通信单元1803可以是输入或者输出接口、管脚或者电路等。
可能的实施例中,界面处理装置还可以包括:存储单元1804。处理单元1802、存储单元1804通过线路相连。存储单元1804可以包括一个或者多个存储器,存储器可以是一个或者多个设备、电路中用于存储程序或者数据的器件。存储单元1804可以独立存在,通过通信线路与界面处理装置具有的处理单元1802相连。存储单元1804也可以和处理单元1802集成在一起。
存储单元1804可以存储终端设备中的方法的计算机执行指令,以使处理单元1802执行上述实施例中的方法。存储单元1804可以是寄存器、缓存或者RAM等,存储单元1804可以和处理单元1802集成在一起。存储单元1804可以是只读存储器(read-only memory,ROM)或者可存储静态信息和指令的其他类型的静态存储设备,存储单元1804可以与处理单元1802相独立。
图19为本申请实施例提供的另一种终端设备的硬件结构示意图,如图19所示,该终端设备包括处理器1901,通信线路1904以及至少一个通信接口(图19中示例性的以通信接口1903为例进行说明)。
处理器1901可以是一个通用中央处理器(central processing unit,CPU),微处理器,特定应用集成电路(application-specific integrated circuit,ASIC),或一个或多个用于控制本申请方案程序执行的集成电路。
通信线路1904可包括在上述组件之间传送信息的电路。
通信接口1903,使用任何收发器一类的装置,用于与其他设备或通信网络通信,如以太网,无线局域网(wireless local area networks,WLAN)等。
可能的,该终端设备还可以包括存储器1902。
存储器1902可以是只读存储器(read-only memory,ROM)或可存储静态信息和指令的其他类型的静态存储设备,随机存取存储器(random access memory,RAM)或者可存储信息和指令的其他类型的动态存储设备,也可以是电可擦可编程只读存储器(electrically erasable programmable read-only memory,EEPROM)、只读光盘(compactdisc read-only memory,CD-ROM)或其他光盘存储、光碟存储(包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等)、磁盘存储介质或者其他磁存储设备、或者能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质,但不限于此。存储器可以是独立存在,通过通信线路1904与处理器相连接。存储器也可以和处理器集成在一起。
其中,存储器1902用于存储执行本申请方案的计算机执行指令,并由处理器1901来控制执行。处理器1901用于执行存储器1902中存储的计算机执行指令,从而实现本申请实施例所提供的界面处理方法。
可能的,本申请实施例中的计算机执行指令也可以称之为应用程序代码,本申请实施例对此不作具体限定。
在具体实现中,作为一种实施例,处理器1901可以包括一个或多个CPU,例如图19中的CPU0和CPU1。
在具体实现中,作为一种实施例,终端设备可以包括多个处理器,例如图19中的处理器1901和处理器1905。这些处理器中的每一个可以是一个单核(single-CPU)处理器,也可以是一个多核(multi-CPU)处理器。这里的处理器可以指一个或多个设备、电路、和/或用于处理数据(例如计算机程序指令)的处理核。
计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行计算机程序指令时,全部或部分地产生按照本申请实施例的流程或功能。计算机可以是通用计算机、专用计算机、计算机网络或者其他可编程装置。计算机指令可以存储在计算机可读存储介质中,或者从一个计算机可读存储介质向另一计算机可读存储介质传输,例如,计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(digital subscriber line,DSL)或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。计算机可读存储介质可以是计算机能够存储的任何可用介质或者是包括一个或多个可用介质集成的服务器、数据中心等数据存储设备。例如,可用介质可以包括磁性介质(例如,软盘、硬盘或磁带)、光介质(例如,数字通用光盘(digital versatile disc,DVD))、或者半导体介质(例如,固态硬盘(solid state disk,SSD))等。
本申请实施例还提供了一种计算机可读存储介质。上述实施例中描述的方法可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。计算机可读介质可以包括计算机存储介质和通信介质,还可以包括任何可以将计算机程序从一个地方传送到另一个地方的介质。存储介质可以是可由计算机访问的任何目标介质。
作为一种可能的设计,计算机可读介质可以包括紧凑型光盘只读储存器(compactdisc read-only memory,CD-ROM)、RAM、ROM、EEPROM或其它光盘存储器;计算机可读介质可以包括磁盘存储器或其它磁盘存储设备。而且,任何连接线也可以被适当地称为计算机可读介质。例如,如果使用同轴电缆,光纤电缆,双绞线,DSL或无线技术(如红外,无线电和微波)从网站,服务器或其它远程源传输软件,则同轴电缆,光纤电缆,双绞线,DSL或诸如红外,无线电和微波之类的无线技术包括在介质的定义中。如本文所使用的磁盘和光盘包括光盘(CD),激光盘,光盘,数字通用光盘(digital versatile disc,DVD),软盘和蓝光盘,其中磁盘通常以磁性方式再现数据,而光盘利用激光光学地再现数据。
上述的组合也应包括在计算机可读介质的范围内。以上,仅为本发明的具体实施方式,但本发明的保护范围并不局限于此,任何熟悉本技术领域的技术人员在本发明揭露的技术范围内,可轻易想到变化或替换,都应涵盖在本发明的保护范围之内。因此,本发明的保护范围应以权利要求的保护范围为准。

Claims (17)

1.一种界面处理方法,其特征在于,所述方法包括:
终端设备显示第一界面;所述第一界面中包括第一图像;
所述终端设备接收到第一操作;
响应于所述第一操作,所述终端设备对所述第一图像进行模糊处理,得到第二图像,以及,显示第二界面,所述第二界面包括所述第一图像以及裁剪框;
所述终端设备接收到第二操作;
响应于所述第二操作,所述终端设备显示第三界面,所述第三界面包括所述裁剪框,所述第三界面的裁剪框内的图像为所述第一图像的第一部分内容,所述第三界面的裁剪框外的图像为所述第二图像的部分内容。
2.根据权利要求1所述的方法,其特征在于,所述终端设备对所述第一图像进行模糊处理,得到第二图像,包括:
所述终端设备利用所述第一图像生成第三图像;其中,所述第三图像的尺寸为所述第一图像的预设倍数,所述第三图像中包括所述第一图像;
在所述第三图像所占内存小于或等于预设内存的情况下,所述终端设备对所述第三图像进行模糊处理,得到所述第二图像。
3.根据权利要求2所述的方法,其特征在于,所述方法还包括:
在所述第三图像所占内存大于所述预设内存的情况下,所述终端设备基于所述预设内存对所述预设倍数进行调整,得到调整后的倍数;
所述终端设备基于所述调整后的倍数以及所述第一图像生成第四图像;所述第四图像中包括所述第一图像;
所述在所述第三图像所占内存小于或等于预设内存的情况下,所述终端设备对所述第三图像进行模糊处理,得到所述第二图像,包括:在所述第四图像所占内存小于或等于所述预设内存的情况下,所述终端设备对所述第四图像进行模糊处理,得到所述第二图像。
4.根据权利要求1-3任一项所述的方法,其特征在于,所述方法还包括:
所述终端设备接收针对所述第三界面的第三操作;
响应于所述第三操作,所述终端设备显示第四界面;其中,所述第四界面中包括所述裁剪框,所述第四界面的裁剪框内的图像为第五图像的部分内容,所述第四界面的裁剪框外的图像为第六图像的部分内容,所述第五图像为对所述第一图像进行放大后得到的图像;所述第六图像为对所述第二图像进行放大后得到的图像。
5.根据权利要求1-4任一项所述的方法,其特征在于,所述方法还包括:
所述终端设备接收针对所述第三界面的第四操作;
响应于所述第四操作,所述终端设备显示第五界面;其中,所述第五界面中包括所述裁剪框,所述第五界面的裁剪框内的图像为所述第一部分内容,所述第五界面的裁剪框外的图像为所述第一图像的第二部分内容。
6.根据权利要求5所述的方法,其特征在于,所述方法还包括:
所述终端设备接收针对所述第五界面的第五操作;
响应于所述第五操作,所述终端设备显示所述第三界面。
7.根据权利要求5所述的方法,其特征在于,所述终端设备包括:预览图像管理模块、视图系统以及显示驱动,所述响应于所述第二操作,所述终端设备显示第三界面,包括:
响应于所述第二操作,所述预览图像管理模块向所述视图系统发送第一消息;所述第一消息用于指示所述第二图像的透明度由100%调整至0%;
所述视图系统基于所述第一消息生成第一动画,并向所述显示驱动发送所述第一动画;
所述显示驱动基于所述第一动画显示所述第一界面。
8.根据权利要求7所述的方法,其特征在于,所述终端设备还包括:裁剪框管理模块,所述方法还包括:
响应于所述第二操作,所述裁剪框管理模块向所述视图系统发送第二消息;所述第二消息用于指示所述裁剪框内的三等分线的透明度由0%调整至100%;
所述视图系统基于所述第一消息生成第一动画,包括:所述视图系统基于所述第一消息以及所述第二消息生成所述第一动画。
9.根据权利要求8所述的方法,其特征在于,所述响应于所述第四操作,所述终端设备显示第五界面,包括:
响应于所述第四操作,所述预览图像管理模块向所述视图系统发送第三消息;所述第三消息用于指示所述第二图像的透明度由0%调整至100%;
所述视图系统基于所述第三消息生成第二动画,并向所述显示驱动发送所述第二动画;
所述显示驱动调用显示器显示所述第二动画。
10.根据权利要求9所述的方法,其特征在于,所述方法还包括:
响应于所述第四操作,所述裁剪框管理模块向所述视图系统发送第四消息;所述第四消息用于指示所述三等分线的透明度由100%调整至0%;
所述视图系统基于所述第三消息生成第二动画,包括:所述视图系统基于所述第三消息以及所述第四消息生成所述第二动画。
11.根据权利要求10所述的方法,其特征在于,所述第三界面中还包括:用于对图像进行旋转的第一控件,所述方法还包括:
所述终端设备接收针对所述第一控件的第六操作;
响应于所述第六操作,所述终端设备对所述第一图像以及所述第二图像进行旋转处理,显示第六界面并跳转至第七界面;其中,所述第六界面中包括:旋转后的所述第一部分内容;所述第七界面中包括旋转后的所述裁剪框,所述第七界面中所述旋转后的所述裁剪框内的图像为所述旋转后的所述第一部分内容,所述第七界面中所述旋转后的所述裁剪框外的图像为旋转后的所述第二图像的部分内容。
12.根据权利要求11所述的方法,其特征在于,所述终端设备还包括:界面控件管理模块,所述响应于所述第六操作,所述终端设备对所述第一图像以及所述第二图像进行旋转处理,显示第六界面并跳转至第七界面,包括:
响应于所述第六操作,所述界面控件管理模块向所述裁剪功能管理模块发送第五消息;所述第五消息用于指示对所述第一图像以及第二图像进行旋转处理,所述第五消息中包括所述旋转角度;
所述裁剪功能管理模块向所述预览图像管理模块发送所述第五消息;
所述预览图像管理模块基于所述第五消息向所述视图系统发送第六消息;所述第六消息用于指示所述第二图像的透明度由0%调整至100%,再由100%调整至0%,所述第六消息中包括所述旋转角度;
所述视图系统基于所述第六消息,对所述第二图像的透明度进行调整,以及对所述第一图像以及所述第二图像进行旋转,生成第三动画,并向所述显示驱动发送所述第三动画;
所述显示驱动基于所述第三动画显示所述第六界面并跳转至所述第七界面。
13.根据权利要求12所述的方法,其特征在于,所述方法还包括:
所述裁剪功能管理模块向所述裁剪框管理模块发送所述第五消息;
所述裁剪框管理模块基于所述第五消息向所述视图系统发送第七消息;所述第七消息用于指示所述裁剪框的透明度由0%调整至100%,再由100%调整至0%;
所述视图系统基于所述第六消息,对所述第二图像的透明度进行调整,以及对所述第一图像以及所述第二图像进行旋转,生成第三动画,包括:所述视图系统基于所述第六消息以及所述第七消息,对所述第二图像的透明度和所述裁剪框的透明度进行调整,以及对所述第一图像以及所述第二图像进行旋转,生成所述第三动画。
14.根据权利要求12所述的方法,其特征在于,所述终端设备对所述第一图像进行模糊处理,得到第二图像,包括:
所述裁剪功能管理模块向所述预览图像管理模块发送第八消息;所述第八消息用于指示对所述第二界面进行初始化;
所述预览图像管理模块基于所述第八消息对所述第一图像进行模糊处理,得到所述第二图像。
15.根据权利要求1所述的方法,其特征在于,在所述第三界面中,所述裁剪框的内侧显示有三等分线;所述三等分线用于对所述裁剪框的宽以及所述裁剪框的高分别进行三等分。
16.一种终端设备,包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序,其特征在于,所述处理器执行所述计算机程序时,使得所述终端设备执行如权利要求1-15任一项所述的方法。
17.一种计算机可读存储介质,所述计算机可读存储介质存储有计算机程序,其特征在于,所述计算机程序被处理器执行时,使得计算机执行如权利要求1-15任一项所述的方法。
CN202210736923.8A 2022-05-30 2022-06-27 界面处理方法和装置 Active CN116088740B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202311719274.1A CN118170296A (zh) 2022-05-30 2022-06-27 界面处理方法和装置

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202210601438 2022-05-30
CN202210601438X 2022-05-30

Related Child Applications (1)

Application Number Title Priority Date Filing Date
CN202311719274.1A Division CN118170296A (zh) 2022-05-30 2022-06-27 界面处理方法和装置

Publications (2)

Publication Number Publication Date
CN116088740A true CN116088740A (zh) 2023-05-09
CN116088740B CN116088740B (zh) 2023-10-31

Family

ID=86187488

Family Applications (2)

Application Number Title Priority Date Filing Date
CN202210736923.8A Active CN116088740B (zh) 2022-05-30 2022-06-27 界面处理方法和装置
CN202311719274.1A Pending CN118170296A (zh) 2022-05-30 2022-06-27 界面处理方法和装置

Family Applications After (1)

Application Number Title Priority Date Filing Date
CN202311719274.1A Pending CN118170296A (zh) 2022-05-30 2022-06-27 界面处理方法和装置

Country Status (1)

Country Link
CN (2) CN116088740B (zh)

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105659286A (zh) * 2013-09-18 2016-06-08 英特尔公司 自动化图像裁剪和分享
JP2018107515A (ja) * 2016-12-22 2018-07-05 フリュー株式会社 写真作成ゲーム機および画像処理方法
CN111369575A (zh) * 2020-05-26 2020-07-03 北京小米移动软件有限公司 截屏方法及装置、存储介质
CN113031844A (zh) * 2021-03-22 2021-06-25 上海闻泰信息技术有限公司 截图方法、装置、计算机设备和计算机可读存储介质
CN113556461A (zh) * 2020-09-29 2021-10-26 华为技术有限公司 一种图像处理方法及相关装置
CN113810604A (zh) * 2021-08-12 2021-12-17 荣耀终端有限公司 文档拍摄方法和装置

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105659286A (zh) * 2013-09-18 2016-06-08 英特尔公司 自动化图像裁剪和分享
JP2018107515A (ja) * 2016-12-22 2018-07-05 フリュー株式会社 写真作成ゲーム機および画像処理方法
CN111369575A (zh) * 2020-05-26 2020-07-03 北京小米移动软件有限公司 截屏方法及装置、存储介质
CN113556461A (zh) * 2020-09-29 2021-10-26 华为技术有限公司 一种图像处理方法及相关装置
CN113031844A (zh) * 2021-03-22 2021-06-25 上海闻泰信息技术有限公司 截图方法、装置、计算机设备和计算机可读存储介质
CN113810604A (zh) * 2021-08-12 2021-12-17 荣耀终端有限公司 文档拍摄方法和装置

Also Published As

Publication number Publication date
CN118170296A (zh) 2024-06-11
CN116088740B (zh) 2023-10-31

Similar Documents

Publication Publication Date Title
KR102534354B1 (ko) 시스템 탐색 바 표시 제어 방법, 그래픽 사용자 인터페이스 및 전자 디바이스
CN112269527B (zh) 应用界面的生成方法及相关装置
JP7473100B2 (ja) ユーザインタフェースレイアウト方法および電子デバイス
JP2023514631A (ja) インタフェースレイアウト方法、装置、及び、システム
JP7337954B2 (ja) 親ページと子ページとの間を切り替えるための方法及び関連する機器
CN111597000B (zh) 一种小窗口管理方法及终端
JP7302038B2 (ja) ユーザプロフィールピクチャ生成方法および電子デバイス
CN114115619A (zh) 一种应用程序界面显示的方法及电子设备
CN111221457A (zh) 多媒体内容的调整方法、装置、设备及可读存储介质
CN116095413B (zh) 视频处理方法及电子设备
CN111459363A (zh) 信息展示方法、装置、设备及存储介质
CN116088725B (zh) 界面显示方法和装置
CN116088740B (zh) 界面处理方法和装置
CN114546219B (zh) 图片列表的处理方法及相关装置
US20240143262A1 (en) Splicing Display Method, Electronic Device, and System
CN116088832B (zh) 界面处理方法和装置
CN114257755A (zh) 图像处理方法、装置、设备及存储介质
CN116684516B (zh) 壁纸设置方法和电子设备
CN114356196B (zh) 一种显示方法及电子设备
CN117369695A (zh) 界面显示方法和装置
WO2023160455A1 (zh) 删除对象的方法及电子设备
WO2024140964A1 (zh) 一种显示方法、装置及系统
WO2024008017A1 (zh) 内容分享方法、图形界面及相关装置
CN116954426A (zh) 隐藏照片的方法和装置
CN114546228A (zh) 表情图像发送方法、装置、设备及介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant