一种页面背景展示方法及装置制造方法及图纸

技术编号:29672372 阅读:17 留言:0更新日期:2021-08-13 21:53
本公开提供了一种页面背景展示方法及装置,其中,该方法包括:响应针对目标页面的展示事件,获取所述目标页面的背景资源;基于展示窗口的尺寸信息及所述背景资源,生成所述目标页面对应的背景位图;基于所述展示窗口的尺寸信息,从所述背景位图中确定初始展示区域;将所述初始展示区域中的图像数据绘制在页面绘制画布的投影区域中,利用所述展示窗口展示绘制后的所述投影区域。本公开实施例不需要将背景资源作为控件中的Item项目,从而不需要在访问页面时提前将整个页面的背景加载出来,进而降低打开页面时加载页面所需的时间。

【技术实现步骤摘要】
一种页面背景展示方法及装置
本公开涉及计算机
,具体而言,涉及一种页面背景展示方法及装置。
技术介绍
在应用程序(Application,APP)的页面中使用列表呈现多个内容是目前的一种主流方式,列表可以由多个卡片和背景组成,卡片是一个独立展示内容的单元,列表中背景的尺寸通常大于展示窗口的尺寸,可以随着卡片的滑动而改变呈现的部位,从而给用户带来更好的场景感知和沉浸效果。在生成页面时,通常将背景资源作为控件中的一个Item项目,在其他Item中动态添加多个计算好尺寸的卡片内容,最后组合多个Item从而实现背景随页面滑动而滚动的效果。
技术实现思路
本公开实施例至少提供一种页面背景展示方法及装置。第一方面,本公开实施例提供了一种页面背景展示方法,包括:响应针对目标页面的展示事件,获取所述目标页面的背景资源;基于展示窗口的尺寸信息及所述背景资源,生成所述目标页面对应的背景位图;基于所述展示窗口的尺寸信息,从所述背景位图中确定初始展示区域;将所述初始展示区域中的图像数据绘制在页面绘制画布的投影区域中,利用所述展示窗口展示绘制后的所述投影区域。一种可选的实施方式中,所述方法还包括:响应针对目标页面的页面滑动事件,确定所述目标页面的位置偏移信息;基于所述位置偏移信息,确定所述目标页面的背景位图中的更新展示区域以及所述页面绘制画布中的更新投影区域;将所述更新展示区域中的图像数据绘制在所述更新投影区域中,通过所述展示窗口展示绘制后的所述更新投影区域。一种可选的实施方式中,所述基于所述位置偏移信息,确定所述目标页面的背景位图中的更新展示区域,包括:基于所述背景位图的尺寸信息以及所述位置偏移信息,确定所述更新展示区域的起始位置;基于所述背景位图的尺寸信息、所述展示窗口的尺寸信息以及所述更新展示区域的起始位置,确定所述更新展示区域的截止位置;基于所述起始位置及所述截止位置,确定所述更新展示区域。一种可选的实施方式中,所述基于所述位置偏移信息,确定所述页面绘制画布中的更新投影区域,包括:从所述页面绘制画布中选取与所述更新展示区域的尺寸信息匹配的区域,作为所述页面绘制画布中的更新投影区域。一种可选的实施方式中,在确定所述目标页面的背景位图中的更新展示区域以及所述页面绘制画布中的更新投影区域之后,所述方法还包括:若所述更新展示区域的尺寸信息小于所述展示窗口的尺寸信息,则基于所述背景位图及所述展示窗口的尺寸信息生成背景补齐位图;基于所述位置偏移信息、所述背景位图的尺寸信息及所述展示窗口的尺寸信息,确定所述背景补齐位图中的填充展示区域;基于所述填充展示区域的尺寸信息及所述更新投影区域的尺寸信息,确定所述页面绘制画布中的填充投影区域;将所述填充展示区域中的图像数据绘制在所述填充投影区域中;所述通过所述展示窗口展示绘制后的所述更新投影区域包括:通过所述展示窗口展示绘制后的所述更新投影区域以及绘制后的所述填充投影区域。一种可选的实施方式中,所述基于展示窗口的尺寸信息及所述背景资源,生成所述目标页面对应的背景位图,包括:基于所述目标页面的可滑动方向、所述展示窗口的尺寸信息,确定所述背景资源的缩放比例;按照所述缩放比例,对所述背景资源进行缩放,并将所述背景资源转换为位图格式,得到所述背景位图。一种可选的实施方式中,所述更新展示区域的尺寸信息与所述更新投影区域的尺寸信息相同。第二方面,本公开实施例还提供一种页面背景展示装置,包括:响应模块,用于响应针对目标页面的展示事件,获取所述目标页面的背景资源;生成模块,用于基于展示窗口的尺寸信息及所述背景资源,生成所述目标页面对应的背景位图;确定模块,用于基于所述展示窗口的尺寸信息,从所述背景位图中确定初始展示区域;展示模块,用于将所述初始展示区域中的图像数据绘制在页面绘制画布的投影区域中,利用所述展示窗口展示绘制后的所述投影区域。一种可选的实施方式中,所述展示模块还用于:响应针对目标页面的页面滑动事件,确定所述目标页面的位置偏移信息;基于所述位置偏移信息,确定所述目标页面的背景位图中的更新展示区域以及所述页面绘制画布中的更新投影区域;将所述更新展示区域中的图像数据绘制在所述更新投影区域中,通过所述展示窗口展示绘制后的所述更新投影区域。一种可选的实施方式中,所述展示模块在基于所述位置偏移信息,确定所述目标页面的背景位图中的更新展示区域时,用于:基于所述背景位图的尺寸信息以及所述位置偏移信息,确定所述更新展示区域的起始位置;基于所述背景位图的尺寸信息、所述展示窗口的尺寸信息以及所述更新展示区域的起始位置,确定所述更新展示区域的截止位置;基于所述起始位置及所述截止位置,确定所述更新展示区域。一种可选的实施方式中,所述展示模块在基于所述位置偏移信息,确定所述页面绘制画布中的更新投影区域时,用于:从所述页面绘制画布中选取与所述更新展示区域的尺寸信息匹配的区域,作为所述页面绘制画布中的更新投影区域。一种可选的实施方式中,所述展示模块在确定所述目标页面的背景位图中的更新展示区域以及所述页面绘制画布中的更新投影区域之后,还用于:若所述更新展示区域的尺寸信息小于所述展示窗口的尺寸信息,则基于所述背景位图及所述展示窗口的尺寸信息生成背景补齐位图;基于所述位置偏移信息、所述背景位图的尺寸信息及所述展示窗口的尺寸信息,确定所述背景补齐位图中的填充展示区域;基于所述填充展示区域的尺寸信息及所述更新投影区域的尺寸信息,确定所述页面绘制画布中的填充投影区域;将所述填充展示区域中的图像数据绘制在所述填充投影区域中;所述展示模块在通过所述展示窗口展示绘制后的所述更新投影区域时,用于:通过所述展示窗口展示绘制后的所述更新投影区域以及绘制后的所述填充投影区域。一种可选的实施方式中,所述生成模块具体用于:基于所述目标页面的可滑动方向、所述展示窗口的尺寸信息,确定所述背景资源的缩放比例;按照所述缩放比例,对所述背景资源进行缩放,并将所述背景资源转换为位图格式,得到所述背景位图。一种可选的实施方式中,所述更新展示区域的尺寸信息与所述更新投影区域的尺寸信息相同。第三方面,本公开实施例还提供一种电子设备,包括:处理器、存储器和总线,所述存储器存储有所述处理器可执行的机器可读指令,当电子设备运行时,所述处理器与所述存储器之间通过总线通信,所述机器可读指令被所述处理器执行时执行上述第一方面,或第一方面中任一种可能的实施方式中的步骤。第四方面,本公开实施例还提供一种计算机可读存储介质,该计算机可读存储介质上存储有计算机程序,该计算机程序被处理器运行时执行上述第一方面,或第一方面中任一种可能的实施方式中的步骤。本公开实施例提供的页面背景展示本文档来自技高网...

【技术保护点】
1.一种页面背景展示方法,其特征在于,包括:/n响应针对目标页面的展示事件,获取所述目标页面的背景资源;/n基于展示窗口的尺寸信息及所述背景资源,生成所述目标页面对应的背景位图;/n基于所述展示窗口的尺寸信息,从所述背景位图中确定初始展示区域;/n将所述初始展示区域中的图像数据绘制在页面绘制画布的投影区域中,利用所述展示窗口展示绘制后的所述投影区域。/n

【技术特征摘要】
1.一种页面背景展示方法,其特征在于,包括:
响应针对目标页面的展示事件,获取所述目标页面的背景资源;
基于展示窗口的尺寸信息及所述背景资源,生成所述目标页面对应的背景位图;
基于所述展示窗口的尺寸信息,从所述背景位图中确定初始展示区域;
将所述初始展示区域中的图像数据绘制在页面绘制画布的投影区域中,利用所述展示窗口展示绘制后的所述投影区域。


2.根据权利要求1所述的方法,其特征在于,所述方法还包括:
响应针对目标页面的页面滑动事件,确定所述目标页面的位置偏移信息;
基于所述位置偏移信息,确定所述目标页面的背景位图中的更新展示区域以及所述页面绘制画布中的更新投影区域;
将所述更新展示区域中的图像数据绘制在所述更新投影区域中,通过所述展示窗口展示绘制后的所述更新投影区域。


3.根据权利要求2所述的方法,其特征在于,所述基于所述位置偏移信息,确定所述目标页面的背景位图中的更新展示区域,包括:
基于所述背景位图的尺寸信息以及所述位置偏移信息,确定所述更新展示区域的起始位置;
基于所述背景位图的尺寸信息、所述展示窗口的尺寸信息以及所述更新展示区域的起始位置,确定所述更新展示区域的截止位置;
基于所述起始位置及所述截止位置,确定所述更新展示区域。


4.根据权利要求2所述的方法,其特征在于,所述基于所述位置偏移信息,确定所述页面绘制画布中的更新投影区域,包括:
从所述页面绘制画布中选取与所述更新展示区域的尺寸信息匹配的区域,作为所述页面绘制画布中的更新投影区域。


5.根据权利要求2所述的方法,其特征在于,在确定所述目标页面的背景位图中的更新展示区域以及所述页面绘制画布中的更新投影区域之后,所述方法还包括:
若所述更新展示区域的尺寸信息小于所述展示窗口的尺寸信息,则基于所述背景位图及所述展示窗口的尺寸信息生成背景补齐位图;
基于所述位置偏移信息、所述背景位图的尺寸信息及所...

【专利技术属性】
技术研发人员:颜文义
申请(专利权)人:北京有竹居网络技术有限公司
类型:发明
国别省市:北京;11

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1