CN108897881A - 交互式图像显示方法、装置、设备和可读存储介质 - Google Patents
交互式图像显示方法、装置、设备和可读存储介质 Download PDFInfo
- Publication number
- CN108897881A CN108897881A CN201810730872.1A CN201810730872A CN108897881A CN 108897881 A CN108897881 A CN 108897881A CN 201810730872 A CN201810730872 A CN 201810730872A CN 108897881 A CN108897881 A CN 108897881A
- Authority
- CN
- China
- Prior art keywords
- image
- slide
- mask layer
- distance
- display
- 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
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input 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/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction 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/04845—Interaction 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
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)
- User Interface Of Digital Computer (AREA)
- Controls And Circuits For Display Device (AREA)
Abstract
本发明揭示了一种交互式图像显示和装置。所述方法包括:在第一图像上叠加显示第二图像,所述第二图像遮挡所述第一图像的预定区域;以及响应于接收的操作指令,在基于所述操作指令确定的范围内移除对所述第二图像的显示,以显示所述第一图像。基于本发明实施例提供的交互式图像显示方案,通过叠加图像遮挡显示,并基于接收的用户操作在相应范围内显示被遮挡的图像,使用户能够自主控制例如敏感图像的显示范围,能够实现从局部到整体的渐进式过程,避免造成不适的视觉冲击,从而提高了用户体验。
Description
技术领域
本发明涉及计算机应用技术领域,特别涉及一种交互式图像显示实现方法、装置、终端设备和计算机可读存储介质。
背景技术
随着计算机应用技术以及互联网特别是移动互联网的发展,网络上公开的信息迎来了爆炸式的增长,越来越多的领域选择通过网络的方式为用户提供服务,图片、视频等图像信息成为网络公开的重要媒介。然而,在一些应用场景中,网上展示的图像常常包括一些敏感内容,如果不进行处理直接显示,往往容易引起浏览用户的不适。
以近来日渐流行的医疗咨询服务产品为例,患者通过上传自己的病例图像,可以得到来自其他个人用户(例如医生)、机构以无偿或有偿方式提供的医疗支持,例如提供疾病诊断信息。与此同时,如果未经过特别的隐私设置,这些病例图像可能会以完全公开的方式展示在服务网站上,在图像包含敏感内容的情况下,直接展示会引起大多数人的不适。
目前针对上述包含敏感内容的图像,一般都采用提前预警或局部展示的方式,来防止引起用户不适。然而,提取预警的方式往往是先显示一副模糊图像,在用户点击后立即显示完整图像,并不能真正起到降低用户不适的作用。对于局部展示的方式,虽然能够降低对浏览用户的视觉冲击,但同时也可能丢失期望通过图像传递的关键信息。
发明内容
为了解决相关技术中对特定图像的处理显示无法在信息完整度与用户满意度之间取得平衡的问题,本发明的目的在于提供一种交互式图像显示、装置、终端设备和计算机可读存储介质。
根据本发明的实施例,提供一种交互式图像显示方法,所述方法包括:在第一图像上叠加显示第二图像,所述第二图像遮挡所述第一图像的预定区域;以及响应于接收的操作指令,在基于所述操作指令确定的范围内移除对所述第二图像的显示,以显示所述第一图像。
根据本发明的实施例,提供一种交互式图像显示装置,所述装置包括:遮挡模块,用于在第一图像上叠加显示第二图像,所述第二图像遮挡所述第一图像的预定区域;以及调节模块,用于响应于接收的操作指令,在基于所述操作指令确定的范围内移除对所述第二图像的显示,以显示所述第一图像。
根据本发明的实施例,提供一种终端设备,包括:处理器;以及存储器,所述存储器上存储有计算机可读指令,所述计算机可读指令被所述处理器执行时实现如上所述的交互式图像显示方法。
根据本发明的实施例,提供一种计算机可读存储介质,其上存储有计算机程序,所述计算机程序被处理器执行时实现如上所述的交互式图像显示方法。
本发明的实施例提供的技术方案可以包括以下有益效果:
基于本发明实施例提供的交互式图像显示方案,通过叠加图像遮挡显示,并基于接收的用户操作在相应范围内显示被遮挡的图像,使用户能够自主控制例如敏感图像的显示范围,能够实现从局部到整体的渐进式过程,避免造成不适的视觉冲击,从而提高了用户体验。
应当理解的是,以上的一般描述和后文的细节描述仅是示例性的,并不能限制本发明。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分,示出了符合本发明的实施例,并于说明书一起用于解释本发明的原理。
图1是根据本发明所涉及的实施环境的示意图;
图2是根据一示例性实施例示出的一种装置的框图
图3是根据一示例性实施例示出的一种交互式图像显示方法的流程图;
图4示意性示出步骤310的应用场景状态变化示意图。
图5是根据另一示例性实施例示出的一种交互式图像显示方法的流程图。
图6示意性示出步骤550的应用场景状态变化示意图。
图7是根据再一示例性实施例示出的一种交互式图像显示方法的流程图。
图8是根据一示例性实施例示出的一种交互式图像显示装置的框图。
图9是根据另一示例性实施例示出的一种交互式图像显示装置的框图。
具体实施方式
这里将详细地对示例性实施例执行说明,其示例表示在附图中。下面的描述涉及附图时,除非另有表示,不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本发明相一致的所有实施方式。相反,它们仅是与如所附权利要求书中所详述的、本发明的一些方面相一致的装置和方法的例子。
图1是根据本发明所涉及的实施环境的示意图。该实施环境包括:终端设备110和服务器130。
终端设备110和服务器130之间的关联方式,包括WiFi或者有线宽带实现的二者之间往来的数据关联方式。
在此实施环境中,服务器130用来提供图像的浏览服务,例如通过架构网站的形式为用户提供图像的浏览服务。
终端设备110中,通过启动安装部署的应用,例如浏览器应用,访问服务器130来浏览图像。
基于本发明的实施例提供的交互式图像显示方案,既可以由服务器130实现,例如以代码的形式内嵌在网站代码中;也可以由终端设备110实现,例如以代码的形式内嵌在操作系统代码中,或者内嵌在浏览器应用的代码中。本发明的实施例对具体实现的主体和方式并无限定,无论在哪端实现,最终都可使得终端设备110表现为执行以下过程:在第一图像上叠加显示第二图像以遮挡所述第一图像的预定区域;以及响应于接收的操作指令,在基于所述操作指令确定的范围内移除对所述第二图像的显示,以显示所述第一图像。
图2是根据一示例性实施例示出的一种装置的框图。例如,装置200可以是图1所示实施环境中的终端设备110。例如,终端设备110可以是带有显示功能的智能终端,例如智能手机、平板电脑等移动终端,也可以是个人电脑、工作站等非移动终端。
参照图2,装置200可以包括以下一个或多个组件:处理组件202,存储器204,电源组件206,多媒体组件208,传感器组件214以及通信组件216。
处理组件202通常控制装置200的整体操作,诸如与显示,电话呼叫,数据通信,相机操作以及记录操作相关联的操作等。处理组件202可以包括一个或多个处理器218来执行指令,以完成下述的方法的全部或部分步骤。此外,处理组件202可以包括一个或多个模块,便于处理组件202和其他组件之间的交互。例如,处理组件202可以包括多媒体模块,以方便多媒体组件208和处理组件202之间的交互。
存储器204被配置为存储各种类型的数据以支持在装置200的操作。这些数据的示例包括用于在装置200上操作的任何应用程序或方法的指令。存储器204可以由任何类型的易失性或非易失性存储设备或者它们的组合实现,如静态随机存取存储器(Static RandomAccess Memory,简称SRAM),电可擦除可编程只读存储器(Electrically ErasableProgrammable Read-Only Memory,简称EEPROM),可擦除可编程只读存储器(ErasableProgrammable Read Only Memory,简称EPROM),可编程只读存储器(Programmable Red-Only Memory,简称PROM),只读存储器(Read-Only Memory,简称ROM),磁存储器,快闪存储器,磁盘或光盘。存储器204中还存储有一个或多个模块,该一个或多个模块被配置成由该一个或多个处理器218执行,以完成下述图3、图5和图7任一所示方法中的全部或者部分步骤。
电源组件206为装置200的各种组件提供电力。电源组件206可以包括电源管理系统,一个或多个电源,及其他与为装置200生成、管理和分配电力相关联的组件。
多媒体组件208包括在所述装置200和用户之间的提供一个输出接口的屏幕。在一些实施例中,屏幕可以包括液晶显示器(Liquid Crystal Display,简称LCD)和触摸面板。如果屏幕包括触摸面板,屏幕可以被实现为触摸屏,以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界,而且还检测与所述触摸或滑动操作相关的持续时间和压力。屏幕还可以包括有机电致发光显示器(Organic Light Emitting Display,简称OLED)。
传感器组件214包括一个或多个传感器,用于为装置200提供各个方面的状态评估。例如,传感器组件214可以检测到装置200的打开/关闭状态,组件的相对定位,传感器组件214还可以检测装置200或装置200一个组件的位置改变以及装置200的温度变化。在一些实施例中,该传感器组件214还可以包括磁传感器,压力传感器或温度传感器。
通信组件216被配置为便于装置200和其他设备之间有线或无线方式的通信。装置200可以接入基于通信标准的无线网络,如WiFi(WIreless-Fidelity,无线保真)。在一个示例性实施例中,通信组件216经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中,所述通信组件216还包括近场通信(Near FieldCommunication,简称NFC)模块,以促进短程通信。例如,在NFC模块可基于射频识别(RadioFrequency Identification,简称RFID)技术,红外数据协会(Infrared DataAssociation,简称IrDA)技术,超宽带(Ultra Wideband,简称UWB)技术,蓝牙技术和其他技术来实现。
在示例性实施例中,装置200可以被一个或多个应用专用集成电路(ApplicationSpecific Integrated Circuit,简称ASIC)、数字信号处理器、数字信号处理设备、可编程逻辑器件、现场可编程门阵列、控制器、微控制器、微处理器或其他电子元件实现,用于执行下述方法。
图3是根据一示例性实施例示出的一种交互式图像显示方法的流程图。该交互式图像显示方法适用于图1所示实施环境的终端设备110,该终端设备110在一个示例性实施例中可以是图2所示的装置。如图3所示,该交互式图像显示方法,由终端设备110执行,可以包括以下步骤。
在步骤310中,在第一图像上叠加显示第二图像,遮挡第一图像的预定区域。
在一些场景中,可能存在避免直接显示第一图像的需求。例如,第一图像可能包含一些敏感内容,如果不加处理直接显示,容易造成用户观感不适。
为此,步骤310中在第一图像上叠加显示第二图像,利用第二图像来遮挡第一图像的预定区域。
在一个实施例中,这里的预定区域至少包括第一图像上包括敏感内容的部分区域,也可以是第一图像的全部区域。
在一个实施例中,第二图像的大小取决于第一图像上需要遮挡的预定区域的大小。在另一个实施例中,第二图像可与第一图像的大小保持一致,例如第二图像可以基于对第一图像进行预设的滤镜处理来得到。
图4示意性示出步骤310的应用场景状态变化示意图。如图所示,在终端界面400的图像显示区(假设与第一图像41区域重合)中,通过在第一图像41上叠加显示第二图像42(状态402),遮挡住第一图像41上的预定区域411(状态401中可见)。
在步骤330中,响应于接收的操作指令,在基于操作指令确定的范围内移除对第二图像的显示,以显示第一图像。
除了利用叠加显示的图像进行遮挡外,本发明实施例还可基于接收的用户操作缩小第二图像的遮挡范围,以便从缩小范围后未被遮挡的区域显示第一图像。
接续以图4为例,例如接收到的操作指令指示检测到用户在终端设备的屏幕上,与第二图像42对应的显示区域中,进行缩放操作(状态403,第二图像42中的箭头所示);进而可根据基于该缩放操作确定的范围,减少第二图像42的显示区域,从而使底层的第一图像41的预定区域411能够露出,即进行显示(状态404)。
图4示出缩放操作的示例,本发明实施例不限于此。在一个实施例中,步骤330还可响应于检测到的滑动操作,在相应的范围内移除对第二图像的显示,以显示第一图像。这里,在相应的范围内移除对第二图像的显示,是指在终端设备显示屏上的相应范围内,使得第二图像不再显示,详情可参见后文实施例,此处不加以详述。
根据终端设备的不同配置,步骤330的操作指令可基于不同的外部输入产生,本发明的实施例对此并无限制。例如,当终端设备带有触摸显示屏时,这里的操作指令可基于显示屏上检测的触摸操作产生;又例如,当终端设备带有鼠标或键盘等外设时,这里的操作指令可基于检测的外设输入信号来产生。
另外,本发明实施例所述的图像不仅限于图片,还可包括视频内容,为方便显示本文中均以图片为例进行说明,并不构成对本发明保护范围的限制。
基于本发明实施例提供的交互式图像显示方案,通过叠加图像遮挡显示,并基于接收的用户操作在相应范围内显示被遮挡的图像,使用户能够自主控制例如敏感图像的显示范围,能够实现从局部到整体的渐进式过程,避免造成不适的视觉冲击,从而提高了用户体验。
图5是根据另一示例性实施例示出的一种交互式图像显示方法的流程图。该交互式图像显示方法适用于图1所示实施环境的终端设备110,该终端设备110在一个示例性实施例中可以是图2所示的装置。如图5所示,该交互式图像显示方法,由终端设备110执行,可以包括以下步骤。
在步骤510中,设置可调节大小的遮罩层,叠加在第一图像上。
在步骤530中,在遮罩层中显示第二图像,使第二图像的显示范围与遮罩层的大小保持一致。
步骤510和530可视为上述步骤310的实施例。
为了实现在第一图像上叠加显示第二图像,同时考虑到后续步骤中对第二图像的显示范围的调整需求,本实施例中通过控制顶层图像显示范围的方式来展示底层图像,该顶层图像例如可以为第二图像或者遮罩层,该底层图像例如可以为第一图像。在一个实施例中,这里的叠加显示是指将第二图像所在图层叠加在第一图像的上方,当两者大小一致时,只显示出顶层的第二图像;当第二图像随着遮罩层缩小时,会在缩小的相应范围内漏出底层的第一图像。
在一个实施例中,步骤510设置的遮罩层原始大小可与第一图像上需要遮挡的预定区域相同,或者也可与第一图像的大小保持一致。
在一个实施例中,可将第二图像嵌套显示在遮罩层内,两者合并作为顶层叠加显示在第一图像上。这里的嵌套显示,是指使第二图像的显示范围与遮罩层的大小保持一致;例如,遮罩层的初始大小与第二图像的大小相同,从而显示出完整的第二图像;当遮罩层缩小时,相应的仅在缩小后的区域内显示出部分的第二图像。
接续,遮罩层的尺寸设置可以基于从用户接收的操作指令进行调节。这样一来,在遮罩层的大小随用户操作变化时,相应的仅在变化后的区域内显示出部分的第二图像,其余部分则不再显示,也即实现了在该其余部分移除了对第二图像的显示,从而显示出底层的第一图像,由此实现用户能够自主适应调整第一图像的显示范围的效果。
在步骤550中,在操作指令指示检测到滑动操作时,根据滑动操作的终点与起点之间的距离缩小遮罩层。
步骤550可视为上述步骤330的实施例。
本实施例中以接收到的操作指令指示检测到滑动操作为例进行说明。
在一个实施例中,这里的滑动操作可以是检测到的用户手指或指点笔在触摸屏上的滑动操作,也可以包括检测到的鼠标在屏幕上的拖动操作,还可以包括检测到的键盘上长按某个按键的操作,例如长按键盘上的箭头的操作。本发明的实施例对此并无限制,以下为便于说明主要以触摸屏上检测的滑动操作为例进行说明。
在一个实施例中,步骤550具体可包括调整遮罩层沿滑动操作的方向上的尺寸,并使该尺寸的调整量与滑动操作的距离成正比。例如,当确定滑动操作是沿屏幕的宽度方向时,则相应调整遮罩层的宽度。
另外,根据滑动操作进行中的方向变化,可相应确定是减小还是增加遮罩层的大小。在一个实施例中,当检测到沿第一方向的滑动操作持续第一距离时,使遮罩层在第一方向上的尺寸减小第一距离;接续,在检测到沿第二方向(与第一方向相反)的滑动操作持续第二距离时,使遮罩层在第一方向上的尺寸增加第二距离。例如,当检测到滑动操作向屏幕左边持续第一距离时,使遮罩层的宽度相应减小第一距离;接续,当检测到滑动操作向屏幕右边持续第二距离时,使遮罩层的宽度相应增加第二距离,直至恢复至遮罩层的原始宽度。这里,虽然是增加了遮罩层的宽度,但相比遮罩层的原始大小仍然是缩小的状态。
图6示意性示出步骤550的应用场景状态变化示意图。如图所示,状态601示出在终端界面600的图像显示区(假设与第一图像610区域重合)中,第一图像610被遮挡,仅显示出第二图像620;接续,在状态602中,操作指令指示检测到滑动操作从起点A开始向左滑动,遮罩层的宽度随之减小,从而露出被遮挡的第一图像610。
在一个实施例中,遮罩层减小的宽度可与滑动操作的距离保持一致,从而使得遮罩层中嵌套显示的第二图像620与第一图像610之间的分界线(图中遮罩层的右边界)随着用户手指与屏幕的接触点一起移动。例如,状态602中滑动操作一直向左截止到B点,遮罩层减小的宽度(图中也即第一图像610的显示宽度)为w1;在状态603中滑动操作从B点向右截止到C点,遮罩层减小的宽度变为w2。在整个过程中,遮罩层的大小与其原始大小相比所减小的范围(图6中为宽度),始终取决于滑动操作的终点(例如图6中的B点、C点)到起点(例如图6中的A点)之间的距离,例如二者可始终保持一致。
基于本发明实施例提供的交互式图像显示方案,通过遮罩层控制顶层图像显示范围的方式来展示底层图像,并基于用户的滑动操作距离在相应范围内显示被遮挡的图像,使用户能够自主控制例如敏感图像的显示范围,能够实现从局部到整体的渐进式过程,避免造成不适的视觉冲击,从而提高了用户体验。
图7是根据再一示例性实施例示出的一种交互式图像显示方法的流程图。该交互式图像显示方法适用于图1所示实施环境的终端设备110,该终端设备110在一个示例性实施例中可以是图2所示的装置。如图7所示,该交互式图像显示方法,由终端设备110执行,可以包括以下步骤。
在步骤710中,对第一图像进行预设的滤镜处理以获取第二图像。
在一个实施例中,本发明的技术方案可完全在终端设备110侧实现。例如,终端设备110,通过图像识别技术或者通过识别服务器端预留的标识,自动识别图像显示区中的第一图像是否包含需要遮挡的敏感信息,在确定包含时,首先对第一图像进行处理,以获取后续用来遮挡第一图像的第二图像。
在一个实施例中,可使用预设的滤镜,例如图像处理工具中提供的卡通化、马赛克、模糊等滤镜,对第一图像进行处理以得到第二图像。这样一来,第一图像中的轮廓、颜色、风格等信息中,至少有部分信息能够保留显示在第二图像中,从而为用户在浏览第一图像之前提供决定是否继续浏览的依据。
在步骤720中,设置可调节大小的遮罩层,叠加在第一图像上。
在步骤730中,在遮罩层中显示第二图像,使第二图像的显示范围与遮罩层的大小保持一致。
在步骤740中,在操作指令指示检测到滑动操作时,根据滑动操作的终点与起点之间的距离缩小遮罩层。
步骤720-740分别对应图5实施例的步骤510、530和550,此处不再赘述。
在步骤750中,检测滑动操作是否停止,如果是则进入步骤760,否则继续监测滑动操作的距离。
以在触摸屏上的操作为例,滑动操作一般会在触摸屏上产生连续位移的触摸信号。相应的,可依据预设时间内是否接收到触摸屏上的位移信号,来判断滑动操作是否停止。通过鼠标和键盘等外设触发的操作可进行类似检测,此处不再赘述。
如果检测到滑动操作仍在进行,则继续检测滑动操作相对于起点的距离,依此控制遮罩层的缩小范围和第一图像的显示范围。
如果检测到滑动操作停止,则进入步骤760判断该滑动操作属于暂停还是完全结束。本发明实施例中,可根据滑动操作停止后是否检测到其他操作以及其他操作的类型来确定该滑动操作是暂停还是完全结束。
在步骤760中,检测滑动操作停止后是否检测到持续按压操作,如果是则保持当前遮罩层的大小不变,否则进入步骤770。
在一个实施例中,这里的持续按压可以是检测到的用户手指或指点笔在触摸屏上的长按操作,也可以包括检测到的鼠标在屏幕上的持续点击操作。
以触摸屏上的操作为例,用户停止滑动操作可能是基于暂停的意图,这时用户手指或指点笔可能一直保持与触摸屏的接触,从而产生长按操作的信号。换言之,依据滑动操作后跟随的长按操作,可判断用户当前是暂停滑动操作,因此可保持当前遮罩层的大小不变。
以图6中示意的状态602和603为例,用户在滑动操作的过程中可能随时暂停在B点或者C点,相应的,遮罩层缩小的宽度,也即第一图像610露出的宽度w1或者w2也可以在暂停的时间内保持不变。
在一个实施例中,步骤760还可包括对持续按压操作时间的检测(图中未示出),如果检测到持续按压操作持续了预设时间(例如3秒),则始终保持当前遮罩层的大小,直至检测到新的滑动操作。换言之,在按压操作持续预设时间后,即使此时用户的手指或指点笔离开了触摸屏,也不会触发进入步骤770,而是继续保持当前遮罩层的大小,直至接收到新的滑动操作信号。
在步骤770中,在确定未检测到任何操作时,确定滑动操作的终点与起点之间的距离是否超过预设范围,如果是则保持当前遮罩层的大小不变,否则进入步骤780。
以触摸屏上的操作为例,如果步骤770在滑动操作结束后未检测到任何操作,则表明用户的手指或指点笔已经离开了屏幕,此时可触发对滑动操作距离的判断。
与步骤770不同,在另一个实施例中,如果步骤770在滑动操作结束后未检测到任何操作,也可以不触发对滑动操作距离的判断,而直接将遮罩层恢复至原始大小,例如恢复至完全遮挡第一图像(图中未示出),此处不加以赘述。
在触发判断滑动操作距离的情况下,如果确定滑动操作的终点与起点之间的距离超过预设范围,意味着用户当前已经适应了第一图像(例如真实图像)的内容,从而可保持当前遮罩层的大小不变,也即保持第一图像露出的范围不变。
与步骤770不同,在再一个实施例中,如果确定滑动操作的终点与起点之间的距离超过预设范围,还可以触发完全消除遮罩层的动作,从而使第一图像得以完整显示(图中未示出),此处不加以赘述。
这里的预设范围可基于与第一图像上需要遮挡的预定区域之间的相对大小来确定。例如,可检测滑动操作的上述距离与上述预定区域沿滑动操作的方向上的长度之间的比值是否超过0.5,来确定其是否超出预设范围。
以图6中示意的状态602为例,图中滑动操作的终点B与起点A之间的距离,已经超过了第一图像610沿滑动操作方向上的长度(也即图中的宽度w)的一半。如果检测到滑动操作在B点结束后,手指或指点笔已离开屏幕时,则可保持遮罩层当前缩小的宽度w1不变。在另一个实施例中,也可以触发完全消除遮罩层的动作,从而使第一图像得以完整显示(图中未示出)。
在步骤780中,将遮罩层恢复至原始大小。
在触发判断滑动操作距离的情况下,如果确定滑动操作的终点与起点之间的距离未超过预设范围,意味着用户可能已对第一图像(例如真实图像)的内容产生不适,从而可将遮罩层恢复至原始大小。
以图6中示意的状态603为例,图中滑动操作的终点C与起点A之间的距离,尚未超过第一图像610宽度w的一半。如果检测到滑动操作在C点结束后,手指或指点笔已离开屏幕时,则可将遮罩层恢复至原始大小的宽度w,从而回到最开始完全遮挡第一图像610的状态601。
在一个实施例中,步骤780的恢复过程可加入动画效果。例如,利用缓动函数(easeout),使动画时间持续0.2秒,在终端设备的屏幕上呈现出第二图像逐渐覆盖住第一图像的效果,防止图像显示出现突变而降低用户体验。
基于本发明实施例提供的交互式图像显示方案,通过遮罩层控制顶层图像显示范围的方式来展示底层图像,并基于用户的滑动操作距离在相应范围内显示被遮挡的图像,使用户能够自主控制例如敏感图像的显示范围,能够实现从局部到整体的渐进式过程,避免造成不适的视觉冲击,从而提高了用户体验。另外,根据滑动操作后是否跟随着持续按压操作,确定保持遮罩层的大小不变或恢复至原始大小,并根据结束滑动时已经显示的范围大小,相应地引入或去除阻尼效果,考虑了用户意图,进一步提高了用户体验。
下述为本发明装置实施例,可以用于执行本发明上述交互式图像显示方法实施例。对于本发明装置实施例中未披露的细节,请参照本发明交互式图像显示方法实施例。
图8是根据一示例性实施例示出的一种交互式图像显示装置的框图。该交互式图像显示装置,如图8所示,可以包括但不限于:遮挡模块810和调节模块820。
遮挡模块810用于在第一图像上叠加显示第二图像,所述第二图像遮挡所述第一图像的预定区域。
调节模块820用于响应于接收的操作指令,在基于所述操作指令确定的范围内移除对所述第二图像的显示,以显示所述第一图像。
基于本发明实施例提供的交互式图像显示方案,通过叠加图像遮挡显示,并基于接收的用户操作在相应范围内显示被遮挡的图像,使用户能够自主控制例如敏感图像的显示范围,能够实现从局部到整体的渐进式过程,避免造成不适的视觉冲击,从而提高了用户体验。
图9是根据另一示例性实施例示出的一种交互式图像显示装置的框图。如图9所示,在图8实施例的基础上,该交互式图像显示装置中还包括滤镜模块830;遮挡模块810包括遮罩层单元811和嵌入显示单元812;调节模块820包括操作检测单元821、距离检测单元822和显示调节单元823。
滤镜模块830用于对第一图像进行预设的滤镜处理以获取第二图像。
遮罩层单元811用于设置可调节大小的遮罩层,并叠加在所述第一图像上,所述遮罩层的大小基于所述操作指令进行调节。
嵌入显示单元812用于在所述遮罩层中显示所述第二图像,使所述第二图像的显示范围与所述遮罩层的大小保持一致。
操作检测单元821用于根据接收的操作指令检测用户操作,例如包括但不限于滑动操作、长按操作等等。
距离检测单元822用于在操作检测单元821检测到滑动操作时,检测滑动操作的终点与起点之间的距离。
显示调节单元823用于根据距离检测单元822检测的距离缩小所述遮罩层。
在一个实施例中,显示调节单元823调整遮罩层沿滑动操作的方向上的尺寸,并使该尺寸的调整量与滑动操作的距离成正比。
在一个实施例中,在操作检测单元821配合距离检测单元822检测到沿第一方向的滑动操作持续第一距离时,显示调节单元823使遮罩层在第一方向上的尺寸减小第一距离;在操作检测单元821配合距离检测单元822检测到沿第二方向(与第一方向相反)的滑动操作持续第二距离时,显示调节单元823使遮罩层在第一方向上的尺寸增加第二距离。
在一个实施例中,操作检测单元821检测到滑动操作且滑动操作停止后检测到持续按压操作时,显示调节单元823保持当前遮罩层的大小;操作检测单元821检测到滑动操作且滑动操作停止后无任何操作时,显示调节单元823将遮罩层恢复至原始大小。
在另一个实施例中,操作检测单元821检测到滑动操作且滑动操作停止后无任何操作时,距离检测单元822检测滑动操作的终点与起点之间的距离是否超过预设范围。在距离检测单元822确认上述距离超过预设范围时,显示调节单元823保持当前遮罩层的大小;在距离检测单元822确认上述距离未超过预设范围时,将遮罩层恢复至原始大小。
在一个实施例中,距离检测单元822检测上述距离与预定区域沿滑动操作方向上的长度之间的比值是否超过0.5,来确定该距离是否超过预设范围。
基于本发明实施例提供的交互式图像显示方案,通过遮罩层控制顶层图像显示范围的方式来展示底层图像,并基于用户的滑动操作距离在相应范围内显示被遮挡的图像,使用户能够自主控制例如敏感图像的显示范围,能够实现从局部到整体的渐进式过程,避免造成不适的视觉冲击,从而提高了用户体验。
另外,根据滑动操作后是否跟随着持续按压操作,确定保持遮罩层的大小不变或恢复至原始大小,并根据结束滑动时已经显示的范围大小,相应地引入或去除阻尼效果,考虑了用户意图,进一步提高了用户体验。
可选的,本发明还提供一种终端设备,该终端设备可以用于图1所示实施环境中,执行图3、图5、和图7任一所示的交互式图像显示方法的全部或者部分步骤。所述终端设备包括:
处理器;
用于存储处理器可执行指令的存储器;
其中,所述处理器被配置为执行:
在第一图像上叠加显示第二图像,所述第二图像遮挡所述第一图像的预定区域;以及
响应于接收的操作指令,在基于所述操作指令确定的范围内移除对所述第二图像的显示,以显示所述第一图像。
该实施例中的装置的处理器执行操作的具体方式已经在有关该交互式图像显示方法的实施例中执行了详细描述,此处将不做详细阐述说明。
在示例性实施例中,还提供了一种存储介质,该存储介质为计算机可读存储介质,例如可以为包括指令的临时性和非临时性计算机可读存储介质。该存储介指例如包括指令的存储器204,上述指令可由装置200的处理器218执行以完成上述方法。
应当理解的是,本发明并不局限于上面已经描述并在附图中示出的精确结构,并且可以在不脱离其范围执行各种修改和改变。本发明的范围仅由所附的权利要求来限制。
Claims (12)
1.一种交互式图像显示方法,其特征在于,所述方法包括:
在第一图像上叠加显示第二图像,所述第二图像遮挡所述第一图像的预定区域;以及
响应于接收的操作指令,在基于所述操作指令确定的范围内移除对所述第二图像的显示,以显示所述第一图像。
2.如权利要求1所述的方法,其特征在于,所述的在第一图像上叠加显示第二图像,包括:
设置可调节大小的遮罩层,叠加在所述第一图像上,所述遮罩层的大小基于所述操作指令进行调节;以及
在所述遮罩层中显示所述第二图像,使所述第二图像的显示范围与所述遮罩层的大小保持一致。
3.如权利要求2所述的方法,其特征在于,所述的在基于所述操作指令确定的范围内移除对所述第二图像的显示,包括:
在所述操作指令指示检测到滑动操作时,根据所述滑动操作的终点与起点之间的距离缩小所述遮罩层。
4.如权利要求3所述的方法,其特征在于,所述的根据所述滑动操作的终点与起点之间的距离缩小所述遮罩层,包括:
调整所述遮罩层沿所述滑动操作的方向上的尺寸,并使该尺寸的调整量与所述距离成正比。
5.如权利要求4所述的方法,其特征在于,所述的根据所述滑动操作的终点与起点之间的距离缩小所述遮罩层,包括:
在检测到沿第一方向的滑动操作持续第一距离时,使所述遮罩层在所述第一方向上的尺寸减小所述第一距离;以及
在检测到沿第二方向的滑动操作持续第二距离时,使所述遮罩层在所述第一方向上的尺寸增加所述第二距离,所述第二方向与所述第一方向相反。
6.如权利要求3所述的方法,其特征在于,所述的在基于所述操作指令确定的范围内移除对所述第二图像的显示,还包括:
在所述操作指令指示检测到滑动操作且所述滑动操作停止后检测到持续按压操作时,保持当前所述遮罩层的大小;
在所述操作指令指示检测到滑动操作且所述滑动操作停止后无任何操作时,将所述遮罩层恢复至原始大小。
7.如权利要求3所述的方法,其特征在于,所述的在基于所述操作指令确定的范围内移除对所述第二图像的显示,还包括:
在所述操作指令指示检测到滑动操作且所述滑动操作停止后无任何操作时,检测所述滑动操作的终点与起点之间的距离是否超过预设范围;
在确认所述距离超过所述预设范围时,保持当前所述遮罩层的大小;
在确认所述距离未超过所述预设范围时,将所述遮罩层恢复至原始大小。
8.如权利要求7所述的方法,其特征在于,所述的检测所述滑动操作的终点与起点之间的距离是否超过预设范围,包括:
检测所述距离与所述预定区域沿所述滑动操作的方向上的长度之间的比值是否超过0.5。
9.如权利要求1-8任一项所述的方法,其特征在于,还包括:
对所述第一图像进行预设的滤镜处理以获取所述第二图像。
10.一种交互式图像显示装置,其特征在于,所述装置包括:
遮挡模块,用于在第一图像上叠加显示第二图像,所述第二图像遮挡所述第一图像的预定区域;以及
调节模块,用于响应于接收的操作指令,在基于所述操作指令确定的范围内移除对所述第二图像的显示,以显示所述第一图像。
11.一种终端设备,其特征在于,包括:
处理器;以及
存储器,所述存储器上存储有计算机可读指令,所述计算机可读指令被所述处理器执行时实现根据权利要求1至9中任一项所述交互式图像显示方法。
12.一种计算机可读存储介质,其上存储有计算机程序,所述计算机程序被处理器执行时实现根据权利要求1至9中任一项所述的方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201810730872.1A CN108897881B (zh) | 2018-07-05 | 2018-07-05 | 交互式图像显示方法、装置、设备和可读存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201810730872.1A CN108897881B (zh) | 2018-07-05 | 2018-07-05 | 交互式图像显示方法、装置、设备和可读存储介质 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN108897881A true CN108897881A (zh) | 2018-11-27 |
CN108897881B CN108897881B (zh) | 2023-08-22 |
Family
ID=64347808
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201810730872.1A Active CN108897881B (zh) | 2018-07-05 | 2018-07-05 | 交互式图像显示方法、装置、设备和可读存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN108897881B (zh) |
Cited By (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN109636871A (zh) * | 2018-12-07 | 2019-04-16 | 北京金山云网络技术有限公司 | 图片颜色的变换方法、装置和终端设备 |
CN109996109A (zh) * | 2019-03-19 | 2019-07-09 | 北京奇艺世纪科技有限公司 | 一种图像处理方法和装置 |
CN111752425A (zh) * | 2019-03-27 | 2020-10-09 | 北京外号信息技术有限公司 | 用于选择在设备的显示媒介上的交互对象的方法 |
WO2021087826A1 (en) * | 2019-11-06 | 2021-05-14 | Qualcomm Incorporated | Methods and apparatus to improve image data transfer efficiency for portable devices |
CN112995774A (zh) * | 2019-12-13 | 2021-06-18 | 阿里巴巴集团控股有限公司 | 一种视频播放方法、装置、终端及存储介质 |
CN113064587A (zh) * | 2021-03-16 | 2021-07-02 | 北京达佳互联信息技术有限公司 | 组件操控方法、装置、电子设备及存储介质 |
CN116820229A (zh) * | 2023-05-17 | 2023-09-29 | 荣耀终端有限公司 | Xr空间的显示方法、xr设备、电子设备及存储介质 |
Citations (10)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20110185297A1 (en) * | 2010-01-26 | 2011-07-28 | Apple Inc. | Image mask interface |
CN102289486A (zh) * | 2011-08-08 | 2011-12-21 | 深圳超多维光电子有限公司 | 一种基于浏览器的图片显示方法和系统 |
US20120113239A1 (en) * | 2010-11-08 | 2012-05-10 | Hagai Krupnik | System and method for displaying an image stream |
CN102779129A (zh) * | 2011-05-11 | 2012-11-14 | 腾讯科技(深圳)有限公司 | 在网络浏览器上实现图片渐进渐出效果的方法和装置 |
CN103973891A (zh) * | 2014-05-09 | 2014-08-06 | 平安付智能技术有限公司 | 用于软件界面的数据安全处理方法 |
CN104090709A (zh) * | 2014-06-11 | 2014-10-08 | 小米科技有限责任公司 | 图片切换方法和装置 |
CN105094724A (zh) * | 2014-05-12 | 2015-11-25 | 宇龙计算机通信科技(深圳)有限公司 | 屏幕显示的控制方法和屏幕显示的控制装置 |
US20160275702A1 (en) * | 2015-03-17 | 2016-09-22 | Behr Process Corporation | Paint Your Place Application for Optimizing Digital Painting of an Image |
CN107122153A (zh) * | 2017-05-11 | 2017-09-01 | 大陆汽车车身电子系统(芜湖)有限公司 | 一种汽车仪表图像显示方法 |
CN107148775A (zh) * | 2015-09-15 | 2017-09-08 | 华为技术有限公司 | 图像处理方法和终端 |
-
2018
- 2018-07-05 CN CN201810730872.1A patent/CN108897881B/zh active Active
Patent Citations (10)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20110185297A1 (en) * | 2010-01-26 | 2011-07-28 | Apple Inc. | Image mask interface |
US20120113239A1 (en) * | 2010-11-08 | 2012-05-10 | Hagai Krupnik | System and method for displaying an image stream |
CN102779129A (zh) * | 2011-05-11 | 2012-11-14 | 腾讯科技(深圳)有限公司 | 在网络浏览器上实现图片渐进渐出效果的方法和装置 |
CN102289486A (zh) * | 2011-08-08 | 2011-12-21 | 深圳超多维光电子有限公司 | 一种基于浏览器的图片显示方法和系统 |
CN103973891A (zh) * | 2014-05-09 | 2014-08-06 | 平安付智能技术有限公司 | 用于软件界面的数据安全处理方法 |
CN105094724A (zh) * | 2014-05-12 | 2015-11-25 | 宇龙计算机通信科技(深圳)有限公司 | 屏幕显示的控制方法和屏幕显示的控制装置 |
CN104090709A (zh) * | 2014-06-11 | 2014-10-08 | 小米科技有限责任公司 | 图片切换方法和装置 |
US20160275702A1 (en) * | 2015-03-17 | 2016-09-22 | Behr Process Corporation | Paint Your Place Application for Optimizing Digital Painting of an Image |
CN107148775A (zh) * | 2015-09-15 | 2017-09-08 | 华为技术有限公司 | 图像处理方法和终端 |
CN107122153A (zh) * | 2017-05-11 | 2017-09-01 | 大陆汽车车身电子系统(芜湖)有限公司 | 一种汽车仪表图像显示方法 |
Non-Patent Citations (2)
Title |
---|
牛老师的集思空间: "JavaScript+css实现影像卷帘效果", 《开源博客》 * |
牛老师的集思空间: "JavaScript+css实现影像卷帘效果", 《开源博客》, 20 October 2014 (2014-10-20) * |
Cited By (11)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN109636871A (zh) * | 2018-12-07 | 2019-04-16 | 北京金山云网络技术有限公司 | 图片颜色的变换方法、装置和终端设备 |
CN109996109A (zh) * | 2019-03-19 | 2019-07-09 | 北京奇艺世纪科技有限公司 | 一种图像处理方法和装置 |
CN109996109B (zh) * | 2019-03-19 | 2021-12-17 | 北京奇艺世纪科技有限公司 | 一种图像处理方法和装置 |
CN111752425A (zh) * | 2019-03-27 | 2020-10-09 | 北京外号信息技术有限公司 | 用于选择在设备的显示媒介上的交互对象的方法 |
CN111752425B (zh) * | 2019-03-27 | 2022-02-15 | 北京外号信息技术有限公司 | 用于选择在设备的显示媒介上的交互对象的方法 |
WO2021087826A1 (en) * | 2019-11-06 | 2021-05-14 | Qualcomm Incorporated | Methods and apparatus to improve image data transfer efficiency for portable devices |
CN112995774A (zh) * | 2019-12-13 | 2021-06-18 | 阿里巴巴集团控股有限公司 | 一种视频播放方法、装置、终端及存储介质 |
CN113064587A (zh) * | 2021-03-16 | 2021-07-02 | 北京达佳互联信息技术有限公司 | 组件操控方法、装置、电子设备及存储介质 |
CN113064587B (zh) * | 2021-03-16 | 2024-03-26 | 北京达佳互联信息技术有限公司 | 组件操控方法、装置、电子设备及存储介质 |
CN116820229A (zh) * | 2023-05-17 | 2023-09-29 | 荣耀终端有限公司 | Xr空间的显示方法、xr设备、电子设备及存储介质 |
CN116820229B (zh) * | 2023-05-17 | 2024-06-07 | 荣耀终端有限公司 | Xr空间的显示方法、xr设备、电子设备及存储介质 |
Also Published As
Publication number | Publication date |
---|---|
CN108897881B (zh) | 2023-08-22 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN108897881A (zh) | 交互式图像显示方法、装置、设备和可读存储介质 | |
KR102571369B1 (ko) | 디스플레이 제어 방법, 저장 매체 및 전자 장치 | |
JP6177669B2 (ja) | 画像表示装置およびプログラム | |
EP3098701B1 (en) | Method and apparatus for managing terminal application | |
US20220382440A1 (en) | User interfaces for managing media styles | |
EP3293620A1 (en) | Multi-screen control method and system for display screen based on eyeball tracing technology | |
CN110007837B (zh) | 一种图片编辑方法及终端 | |
EP3182716A1 (en) | Method and device for video display | |
CN108255387B (zh) | 触屏移动端图像快速对比交互方法 | |
US9170728B2 (en) | Electronic device and page zooming method thereof | |
CN106371688A (zh) | 全屏幕单手操作方法及装置 | |
EP2887648B1 (en) | Method of performing previewing and electronic device for implementing the same | |
CN105068730B (zh) | 一种内容切换方法及移动终端 | |
KR20120084861A (ko) | 휴대용 단말기에서 화면 캡쳐 방법 및 장치 | |
WO2014201831A1 (en) | Wearable smart glasses as well as device and method for controlling the same | |
CN107172347B (zh) | 一种拍照方法及终端 | |
US20140043255A1 (en) | Electronic device and image zooming method thereof | |
CN107315792A (zh) | 页面更新方法、装置、电子设备和计算机可读存储介质 | |
CN111770374B (zh) | 视频播放方法及装置 | |
CN112394806A (zh) | 用户界面的显示方法和装置、电子设备及存储介质 | |
CN114518926A (zh) | 通知消息显示方法、装置、电子设备及介质 | |
CN110536005B (zh) | 一种对象显示调整方法及终端 | |
WO2024131821A1 (zh) | 拍照方法、装置及电子设备 | |
CN107979701B (zh) | 控制终端显示的方法及装置 | |
CN106896995B (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 |