CN113254131A - 一种页面背景展示方法及装置 - Google Patents
一种页面背景展示方法及装置 Download PDFInfo
- Publication number
- CN113254131A CN113254131A CN202110552248.9A CN202110552248A CN113254131A CN 113254131 A CN113254131 A CN 113254131A CN 202110552248 A CN202110552248 A CN 202110552248A CN 113254131 A CN113254131 A CN 113254131A
- Authority
- CN
- China
- Prior art keywords
- background
- page
- display
- area
- size information
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 55
- 238000009877 rendering Methods 0.000 claims description 11
- 238000004590 computer program Methods 0.000 claims description 10
- 230000004044 response Effects 0.000 claims description 3
- 238000010586 diagram Methods 0.000 description 10
- 230000000694 effects Effects 0.000 description 5
- 230000008901 benefit Effects 0.000 description 3
- 238000004891 communication Methods 0.000 description 3
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 230000006870 function Effects 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 238000011160 research Methods 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 230000001960 triggered effect Effects 0.000 description 2
- 238000013459 approach Methods 0.000 description 1
- 238000007654 immersion Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000008447 perception Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements 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/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本公开提供了一种页面背景展示方法及装置，其中，该方法包括：响应针对目标页面的展示事件，获取所述目标页面的背景资源；基于展示窗口的尺寸信息及所述背景资源，生成所述目标页面对应的背景位图；基于所述展示窗口的尺寸信息，从所述背景位图中确定初始展示区域；将所述初始展示区域中的图像数据绘制在页面绘制画布的投影区域中，利用所述展示窗口展示绘制后的所述投影区域。本公开实施例不需要将背景资源作为控件中的Item项目，从而不需要在访问页面时提前将整个页面的背景加载出来，进而降低打开页面时加载页面所需的时间。
Description
技术领域
本公开涉及计算机技术领域，具体而言，涉及一种页面背景展示方法及装置。
背景技术
在应用程序(Application，APP)的页面中使用列表呈现多个内容是目前的一种主流方式，列表可以由多个卡片和背景组成，卡片是一个独立展示内容的单元，列表中背景的尺寸通常大于展示窗口的尺寸，可以随着卡片的滑动而改变呈现的部位，从而给用户带来更好的场景感知和沉浸效果。
在生成页面时，通常将背景资源作为控件中的一个Item项目，在其他Item中动态添加多个计算好尺寸的卡片内容，最后组合多个Item从而实现背景随页面滑动而滚动的效果。
发明内容
本公开实施例至少提供一种页面背景展示方法及装置。
第一方面，本公开实施例提供了一种页面背景展示方法，包括：
响应针对目标页面的展示事件，获取所述目标页面的背景资源；
基于展示窗口的尺寸信息及所述背景资源，生成所述目标页面对应的背景位图；
基于所述展示窗口的尺寸信息，从所述背景位图中确定初始展示区域；
将所述初始展示区域中的图像数据绘制在页面绘制画布的投影区域中，利用所述展示窗口展示绘制后的所述投影区域。
一种可选的实施方式中，所述方法还包括：
响应针对目标页面的页面滑动事件，确定所述目标页面的位置偏移信息；
基于所述位置偏移信息，确定所述目标页面的背景位图中的更新展示区域以及所述页面绘制画布中的更新投影区域；
将所述更新展示区域中的图像数据绘制在所述更新投影区域中，通过所述展示窗口展示绘制后的所述更新投影区域。
一种可选的实施方式中，所述基于所述位置偏移信息，确定所述目标页面的背景位图中的更新展示区域，包括：
基于所述背景位图的尺寸信息以及所述位置偏移信息，确定所述更新展示区域的起始位置；
基于所述背景位图的尺寸信息、所述展示窗口的尺寸信息以及所述更新展示区域的起始位置，确定所述更新展示区域的截止位置；
基于所述起始位置及所述截止位置，确定所述更新展示区域。
一种可选的实施方式中，所述基于所述位置偏移信息，确定所述页面绘制画布中的更新投影区域，包括：
从所述页面绘制画布中选取与所述更新展示区域的尺寸信息匹配的区域，作为所述页面绘制画布中的更新投影区域。
一种可选的实施方式中，在确定所述目标页面的背景位图中的更新展示区域以及所述页面绘制画布中的更新投影区域之后，所述方法还包括：
若所述更新展示区域的尺寸信息小于所述展示窗口的尺寸信息，则基于所述背景位图及所述展示窗口的尺寸信息生成背景补齐位图；
基于所述位置偏移信息、所述背景位图的尺寸信息及所述展示窗口的尺寸信息，确定所述背景补齐位图中的填充展示区域；
基于所述填充展示区域的尺寸信息及所述更新投影区域的尺寸信息，确定所述页面绘制画布中的填充投影区域；
将所述填充展示区域中的图像数据绘制在所述填充投影区域中；
所述通过所述展示窗口展示绘制后的所述更新投影区域包括：
通过所述展示窗口展示绘制后的所述更新投影区域以及绘制后的所述填充投影区域。
一种可选的实施方式中，所述基于展示窗口的尺寸信息及所述背景资源，生成所述目标页面对应的背景位图，包括：
基于所述目标页面的可滑动方向、所述展示窗口的尺寸信息，确定所述背景资源的缩放比例；
按照所述缩放比例，对所述背景资源进行缩放，并将所述背景资源转换为位图格式，得到所述背景位图。
一种可选的实施方式中，所述更新展示区域的尺寸信息与所述更新投影区域的尺寸信息相同。
第二方面，本公开实施例还提供一种页面背景展示装置，包括：
响应模块，用于响应针对目标页面的展示事件，获取所述目标页面的背景资源；
生成模块，用于基于展示窗口的尺寸信息及所述背景资源，生成所述目标页面对应的背景位图；
确定模块，用于基于所述展示窗口的尺寸信息，从所述背景位图中确定初始展示区域；
展示模块，用于将所述初始展示区域中的图像数据绘制在页面绘制画布的投影区域中，利用所述展示窗口展示绘制后的所述投影区域。
一种可选的实施方式中，所述展示模块还用于：
响应针对目标页面的页面滑动事件，确定所述目标页面的位置偏移信息；
基于所述位置偏移信息，确定所述目标页面的背景位图中的更新展示区域以及所述页面绘制画布中的更新投影区域；
将所述更新展示区域中的图像数据绘制在所述更新投影区域中，通过所述展示窗口展示绘制后的所述更新投影区域。
一种可选的实施方式中，所述展示模块在基于所述位置偏移信息，确定所述目标页面的背景位图中的更新展示区域时，用于：
基于所述背景位图的尺寸信息以及所述位置偏移信息，确定所述更新展示区域的起始位置；
基于所述背景位图的尺寸信息、所述展示窗口的尺寸信息以及所述更新展示区域的起始位置，确定所述更新展示区域的截止位置；
基于所述起始位置及所述截止位置，确定所述更新展示区域。
一种可选的实施方式中，所述展示模块在基于所述位置偏移信息，确定所述页面绘制画布中的更新投影区域时，用于：
从所述页面绘制画布中选取与所述更新展示区域的尺寸信息匹配的区域，作为所述页面绘制画布中的更新投影区域。
一种可选的实施方式中，所述展示模块在确定所述目标页面的背景位图中的更新展示区域以及所述页面绘制画布中的更新投影区域之后，还用于：
若所述更新展示区域的尺寸信息小于所述展示窗口的尺寸信息，则基于所述背景位图及所述展示窗口的尺寸信息生成背景补齐位图；
基于所述位置偏移信息、所述背景位图的尺寸信息及所述展示窗口的尺寸信息，确定所述背景补齐位图中的填充展示区域；
基于所述填充展示区域的尺寸信息及所述更新投影区域的尺寸信息，确定所述页面绘制画布中的填充投影区域；
将所述填充展示区域中的图像数据绘制在所述填充投影区域中；
所述展示模块在通过所述展示窗口展示绘制后的所述更新投影区域时，用于：
通过所述展示窗口展示绘制后的所述更新投影区域以及绘制后的所述填充投影区域。
一种可选的实施方式中，所述生成模块具体用于：
基于所述目标页面的可滑动方向、所述展示窗口的尺寸信息，确定所述背景资源的缩放比例；
按照所述缩放比例，对所述背景资源进行缩放，并将所述背景资源转换为位图格式，得到所述背景位图。
一种可选的实施方式中，所述更新展示区域的尺寸信息与所述更新投影区域的尺寸信息相同。
第三方面，本公开实施例还提供一种电子设备，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当电子设备运行时，所述处理器与所述存储器之间通过总线通信，所述机器可读指令被所述处理器执行时执行上述第一方面，或第一方面中任一种可能的实施方式中的步骤。
第四方面，本公开实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述第一方面，或第一方面中任一种可能的实施方式中的步骤。
本公开实施例提供的页面背景展示方法及装置，首先响应针对目标页面的展示事件，获取所述目标页面的背景资源；其次，基于展示窗口的尺寸信息及所述背景资源，生成所述目标页面对应的背景位图；之后，基于所述展示窗口的尺寸信息，从所述背景位图中确定初始展示区域；最后，将所述初始展示区域中的图像数据绘制在页面绘制画布的投影区域中，利用所述展示窗口展示绘制后的所述投影区域。本公开实施例通过生成背景位图，并将背景位图在初始展示区域中的图像数据作为页面的初始背景，通过投影区域展示出来，不需要将背景资源作为控件中的Item项目，从而不需要在访问页面时提前将整个页面的背景加载出来，进而降低打开页面时加载页面所需的时间。
为使本公开的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。
附图说明
为了更清楚地说明本公开实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，此处的附图被并入说明书中并构成本说明书中的一部分，这些附图示出了符合本公开的实施例，并与说明书一起用于说明本公开的技术方案。应当理解，以下附图仅示出了本公开的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
图1示出了本公开实施例所提供的一种页面背景展示方法的流程图；
图2示出了本公开实施例所提供的背景位图的示意图之一；
图3示出了本公开实施例所提供的背景位图的示意图之二；
图4示出了本公开实施例所提供的背景位图的示意图之三；
图5示出了本公开实施例所提供的另一种页面背景展示方法的流程图；
图6示出了本公开实施例所提供的响应页面滑动事件的流程图；
图7示出了本公开实施例所提供的一种页面背景展示装置的示意图；
图8示出了本公开实施例所提供的一种电子设备的示意图。
具体实施方式
为使本公开实施例的目的、技术方案和优点更加清楚，下面将结合本公开实施例中附图，对本公开实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本公开一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本公开实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本公开的实施例的详细描述并非旨在限制要求保护的本公开的范围，而是仅仅表示本公开的选定实施例。基于本公开的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本公开保护的范围。
应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。
本文中术语“和/或”，仅仅是描述一种关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中术语“至少一种”表示多种中的任意一种或多种中的至少两种的任意组合，例如，包括A、B、C中的至少一种，可以表示包括从A、B和C构成的集合中选择的任意一个或多个元素。
经研究发现，在生成页面时，可以利用实现列表效果的控件进行，如RecyclerView控件或者ListView控件，由于这些控件只支持固定的静态背景图，若想实现背景图随页面滑动而改变，则需要将背景资源作为控件中的一个Item项目，在Item中动态添加多个计算好尺寸的卡片内容，最后组合多个Item从而实现背景滚动的效果。这种方式需要在首次加载页面时就将背景Item完全加载，但背景资源的尺寸通常较大，加载页面需要等待的时间过长。
基于上述研究，本公开提供了一种页面背景展示方法，通过生成背景位图，并将背景位图在初始展示区域中的图像数据作为页面的初始背景，通过投影区域展示出来，不需要将背景资源作为控件中的Item项目，从而不需要在访问页面时提前将整个页面的背景加载出来，进而降低打开页面时加载页面所需的时间。
为便于对本实施例进行理解，首先对本公开实施例所公开的一种页面背景展示方法进行详细介绍，本公开实施例所提供的页面背景展示方法的执行主体一般为具有一定计算能力的计算机设备，该计算机设备可以包括如终端设备等。在一些可能的实现方式中，该页面背景展示方法可以通过处理器调用存储器中存储的计算机可读指令的方式来实现。
参见图1所示，为本公开实施例提供的页面背景展示方法的流程图，所述方法包括步骤S101～S104，其中：
S101、响应针对目标页面的展示事件，获取所述目标页面的背景资源。
该步骤中，目标页面可以是应用程序中的页面，页面中可以包括至少一个卡片和背景，卡片可以作为一个独立的内容展示单元，展示图片、文字等内容，在页面可以进行滑动，通过滑动可以改变展示的卡片，应用程序可以运行在安卓平台下，在用户通过终端设备访问应用程序中的页面时，可以触发目标页面的展示事件，终端设备在检测到目标页面的展示事件时，可以获取目标页面的背景资源及卡片资源，进行目标页面的渲染。
其中，背景资源可以为目标页面中背景对应的资源，通常可以为尺寸大于应用程序的展示窗口的图像。
这里，针对目标页面的展示事件可以为检测到展示目标页面指令、开始加载目标页面等事件，终端设备在开始加载目标页面时，可以加载目标页面初始展示部分的背景及卡片内容。
示例性的，可以解析目标页面的XML配置的Drawable资源来获取背景资源，也可以通过Java或Kotlin代码设置背景资源或设置读取背景资源的路径，XML为可拓展标记语言，Kotlin是一个用于多平台应用的静态编程语言，Drawable是“所有可绘制东西”的一个抽象，可以把各种不同类型的资源作为转化为Drawable，然后可以通过View将资源渲染到屏幕上。
S102、基于展示窗口的尺寸信息及所述背景资源，生成所述目标页面对应的背景位图。
该步骤中，由于背景资源的尺寸和页面的展示窗口的尺寸不完全一致，可以根据展示窗口的尺寸信息，对背景资源进行尺寸适配，生成尺寸适配的背景位图。示例性的，若目标页面的可滑动方向为横向，则可以根据利用展示窗口的纵向高度与背景资源的纵向高度之比确定背景资源的缩放比例，使背景资源在纵向高度上与展示窗口相同。
具体的，可以基于所述目标页面的可滑动方向、所述展示窗口的尺寸信息，确定所述背景资源的缩放比例；然后按照所述缩放比例，对所述背景资源进行缩放，并将所述背景资源转换为位图格式，得到所述背景位图。
示例性的，若背景资源为根据XML解析的BitmapDrawable本地资源，则可以根据解析的背景资源及确定的缩放比例，通过位图Bitmap工厂方法创建一个大小适配展示窗口背景位图，若背景资源为Java的输入流资源，则可以利用BitmapFactory工厂方法生成背景位图。
S103、基于所述展示窗口的尺寸信息，从所述背景位图中确定初始展示区域。
其中，初始展示区域为目标页面在初次加载完成时展示的背景位图的区域，其大小与展示窗口的尺寸相同，通常背景资源的横向长度可以为展示窗口的二到三倍，由背景资源缩放得到的背景位图能够完全覆盖展示窗口。目标页面在初次加载完成时展示的区域通常设置为页面中以页首为起点首个与展示窗口大小相同的区域，初始展示区域可以为背景位图中与目标页面在初次加载完成时展示的区域对应的区域。
如图2所示，为本公开实施例所提供的背景位图的示意图之一，此时背景位图A与展示窗口B的纵向长度相同，背景位图A的横向长度大于展示窗口B的横向长度，初始展示区域C的位置处于背景位图A上的左侧。
S104、将所述初始展示区域中的图像数据绘制在页面绘制画布的投影区域中，利用所述展示窗口展示绘制后的所述投影区域。
该步骤中，可以将位于初始展示区域中的背景位图的图像数据绘制在页面绘制画布的投影区域中，这里，页面绘制画布可以为用于绘制目标页面的画布，其投影区域中的内容可以通过展示窗口展示，通过将初始展示区域中的图像数据绘制在投影区域中，可以将上述图像数据通过展示窗口展示给用户，实现目标页面的加载。其中，投影区域可以是预先设定好的。
示例性的，可以利用安卓平台的onDraw方法通过绘图插件canvas完成初始展示区域中图像数据的绘制。
这样，在初次加载页面时，不需要加载完整的背景资源，只需要加载背景资源的初始展示区域中的图像数据，能够提高加载页面的效率。
在绘制完成背景及卡片内容后，就完成了目标页面初次加载，用户能够浏览初次加载时加载的内容，由于初次加载仅加载了目标页面的部分区域，用户需要利用触控手势、翻页控件等方式滑动展示的目标页面，以使终端设备展示目标页面的其他部分。
具体的，在检测到目标页面的页面滑动事件时，可以通过以下步骤更新展示的背景：
响应针对目标页面的页面滑动事件，确定所述目标页面的位置偏移信息；基于所述位置偏移信息，确定所述目标页面的背景位图中的更新展示区域以及所述页面绘制画布中的更新投影区域；将所述更新展示区域中的图像数据绘制在所述更新投影区域中，通过所述展示窗口展示绘制后的所述更新投影区域。
其中，页面滑动事件可以是用户拖动目标页面等能够改变目标页面在展示窗口展示的区域的事件，在检测到页面滑动事件时，终端设备可以根据页面滑动事件导致的目标页面位置偏移信息，确定背景位图的更新展示区域及页面绘制画布中的更新投影区域，在将更新展示区域中的图像数据绘制在更新投影区域中，通过展示窗口展示会之后的更新投影区域，实现展示页面滑动事件对应的内容。
具体的，可以通过以下步骤确定更新展示区域：
基于所述背景位图的尺寸信息以及所述位置偏移信息，确定所述更新展示区域的起始位置；再基于所述背景位图的尺寸信息、所述展示窗口的尺寸信息以及所述更新展示区域的起始位置，确定所述更新展示区域的截止位置；之后，基于所述起始位置及所述截止位置，确定所述更新展示区域。
示例性的，在展示窗口的纵向高度与背景位图的纵向高度相同的情况下，目标页面可以横向滑动，可以对位置偏移信息进行取模运算，利用位置偏移信息模以背景位图的横向长度，将得到的余数作为更新展示区域的起始位置，之后，可以确定上述起始位置与背景位图与位置偏移方向一致的边之间的区域，若该区域的面积等于或大于展示窗口的面积，则可以从起始位置按照偏移方向移动展示窗口横向长度的距离，并将移动后得到的位置作为截止位置，截止位置与起始位置之间所形成的区域即为上述更新展示区域；若上述起始位置与背景位图与位置偏移方向一致的边之间的区域的面积小于展示窗口的面积，则可以将背景位图与位置偏移方向一致的边所在的位置作为截止位置，截止位置与起始位置之间所形成的区域即为上述更新展示区域。
如图3所示，为本公开实施例所提供的背景位图的示意图之二，此时背景位图A与展示窗口B的纵向长度相同，背景位图A的横向长度大于展示窗口B的横向长度，更新展示区域F的起始位置D与截止位置E处于背景位图A之上，起始位置D与截止位置E之间所形成的区域为更新展示区域F，更新展示区域F相对于初始展示区域C横向偏移了页面滑动事件对应的距离。
进一步的，在确定更新展示区域后，由于更新展示区域的尺寸信息可能与初始展示区域不同，可以从所述页面绘制画布中选取与所述更新展示区域的尺寸信息匹配的区域，作为所述页面绘制画布中的更新投影区域。
示例性的，可以从投影区域的横向起始位置开始，从投影区域中裁剪出与更新展示区域的大小一致的区域作为更新投影区域，使得在展示窗口中展示更新投影区域中绘制的更新展示区域中的图像数据。
进一步的，若所述更新展示区域的尺寸信息小于所述展示窗口的尺寸信息，则更新展示区域内的图像数据不足以填充整个展示窗口，可以通过以下步骤将展示窗口中的背景补齐：
若所述更新展示区域的尺寸信息小于所述展示窗口的尺寸信息，则基于所述背景位图及所述展示窗口的尺寸信息生成背景补齐位图；
基于所述位置偏移信息、所述背景位图的尺寸信息及所述展示窗口的尺寸信息，确定所述背景补齐位图中的填充展示区域；
基于所述填充展示区域的尺寸信息及所述更新投影区域的尺寸信息，确定所述页面绘制画布中的填充投影区域；
将所述填充展示区域中的图像数据绘制在所述填充投影区域中。
此时，可以通过所述展示窗口展示绘制后的所述更新投影区域以及绘制后的所述填充投影区域，使展示窗口中各个区域都填充有背景。
这里，在生成背景补齐位图之前，可以先检测背景补齐位图是否生成，若以预先生成背景补齐位图，则可以直接执行确定填充展示区域的步骤。
该步骤中，可以基于所述背景位图及所述展示窗口的尺寸信息生成背景补齐位图，从背景补齐位图中确定出填充展示区域，并利用填充展示区域将展示窗口中的目标页面的背景补齐，通过填充投影区域将填充展示区域中的图像数据展示在展示窗口中，使展示窗口中同时展示有更新展示区域及填充展示区域中的图像数据，从而实现在背景位图剩余区域不足以填充展示窗口时将背景补齐。
示例性的，背景补齐位图的尺寸信息可以与展示窗口的尺寸信息相同，可以由于初始展示区域与展示窗口的尺寸信息相同，将初始展示区域对应得图像数据作为背景补齐位图，在生成背景补齐位图后，可以确定背景补齐位图的填充展示区域，填充展示区域的起始位置可以为背景补齐位图横向的起始点，截止位置可以通过对上述位置偏移信息与展示窗口的横向长度信息进行求和，再利用得到的和减去背景位图的横向长度信息。
示例性的，参见图4所示，图4为本公开实施例所提供的背景位图的示意图之三。图4中，背景位图A与展示窗口的纵向长度相同，背景位图A的横向长度大于展示窗口的横向长度，更新展示区域F的起始位置D与截止位置E处于背景位图A之上，截止位置E与背景位图A的一边重叠，起始位置D与截止位置E之间所形成的区域为更新展示区域F，背景补齐位图G位于背景位图A的右侧，背景补齐位图G中的填充展示区域H位于展示窗口中，与更新展示区域F共同填充展示窗口，填充展示区域H的起始位置I和截止位置J位于背景补齐位图G上，起始位置I与截止位置E重合。
本公开实施例提供的页面背景展示方法，首先响应针对目标页面的展示事件，获取所述目标页面的背景资源；其次，基于展示窗口的尺寸信息及所述背景资源，生成所述目标页面对应的背景位图；之后，基于所述展示窗口的尺寸信息，从所述背景位图中确定初始展示区域；最后，将所述初始展示区域中的图像数据绘制在页面绘制画布的投影区域中，利用所述展示窗口展示绘制后的所述投影区域。本公开实施例通过生成背景位图，并将背景位图在初始展示区域中的图像数据作为页面的初始背景，通过投影区域展示出来，不需要将背景资源作为控件中的Item项目，从而不需要在访问页面时提前将整个页面的背景加载出来，进而降低打开页面时加载页面所需的时间。
参见图5，为本公开实施例所提供的另一种页面背景展示方法的流程图。如图5所示，该页面背景展示方法在检测到针对目标页面的展示事件后开始渲染，并确定目标页面的背景资源(长背景地图资源)是本地资源还是网络资源，若背景资源是网络资源，则从网络获取长背景地图资源对应的接口(Input output system，IO)处获取资源的输入流(Input Stream)，若背景资源是本地资源，则直接调用背景资源，开始创建背景位图(Bitmap)，计算背景位图适配展示窗口的缩放比例，使背景位图能够填充整个展示窗口，并按照缩放比例创建出对应尺寸的背景位图，再通过Canvas将背景位图中初始显示区域的图像数据绘制在页面绘制画布的投影区域中，最后通过展示窗口展示绘制后的投影区域。
参见图6，为本公开实施例所提供的响应页面滑动事件的流程图。如图6所示，在检测目标页面的页面滑动事件，目标页面中的列表开始滑动后，可以将检测到的滑动事件和位置偏移量传输至预先部署的控件，并记录位置偏移量，调用invalidate方法，触发页面绘制画布的重绘，并确定背景位图是否创建，若未创建，则可以绘制默认图像作为背景，若已经创建了背景位图，则确定背景位图中的更新展示区域，再利用Canvas更新页面绘制画布的更新投影区域，之后，可以判断更新展示区域是否能够完整填充展示窗口，在不能够填充的情况下可以根据背景位图创建背景补齐位图，并确定背景补齐位图中的填充展示区域，最后确定填充投影区域，并将填充展示区域绘制在填充投影区域中，完成背景随列表联动的效果。
本领域技术人员可以理解，在具体实施方式的上述方法中，各步骤的撰写顺序并不意味着严格的执行顺序而对实施过程构成任何限定，各步骤的具体执行顺序应当以其功能和可能的内在逻辑确定。
基于同一发明构思，本公开实施例中还提供了与页面背景展示方法对应的页面背景展示装置，由于本公开实施例中的装置解决问题的原理与本公开实施例上述页面背景展示方法相似，因此装置的实施可以参见方法的实施，重复之处不再赘述。
参照图7所示，为本公开实施例提供的一种页面背景展示装置的示意图，所述装置包括：
响应模块710，用于响应针对目标页面的展示事件，获取所述目标页面的背景资源；
生成模块720，用于基于展示窗口的尺寸信息及所述背景资源，生成所述目标页面对应的背景位图；
确定模块730，用于基于所述展示窗口的尺寸信息，从所述背景位图中确定初始展示区域；
展示模块740，用于将所述初始展示区域中的图像数据绘制在页面绘制画布的投影区域中，利用所述展示窗口展示绘制后的所述投影区域。
一种可选的实施方式中，所述展示模块740还用于：
响应针对目标页面的页面滑动事件，确定所述目标页面的位置偏移信息；
基于所述位置偏移信息，确定所述目标页面的背景位图中的更新展示区域以及所述页面绘制画布中的更新投影区域；
将所述更新展示区域中的图像数据绘制在所述更新投影区域中，通过所述展示窗口展示绘制后的所述更新投影区域。
一种可选的实施方式中，所述展示模块740在基于所述位置偏移信息，确定所述目标页面的背景位图中的更新展示区域时，用于：
基于所述背景位图的尺寸信息以及所述位置偏移信息，确定所述更新展示区域的起始位置；
基于所述背景位图的尺寸信息、所述展示窗口的尺寸信息以及所述更新展示区域的起始位置，确定所述更新展示区域的截止位置；
基于所述起始位置及所述截止位置，确定所述更新展示区域。
一种可选的实施方式中，所述展示模块740在基于所述位置偏移信息，确定所述页面绘制画布中的更新投影区域时，用于：
从所述页面绘制画布中选取与所述更新展示区域的尺寸信息匹配的区域，作为所述页面绘制画布中的更新投影区域。
一种可选的实施方式中，所述展示模块740在确定所述目标页面的背景位图中的更新展示区域以及所述页面绘制画布中的更新投影区域之后，还用于：
若所述更新展示区域的尺寸信息小于所述展示窗口的尺寸信息，则基于所述背景位图及所述展示窗口的尺寸信息生成背景补齐位图；
基于所述位置偏移信息、所述背景位图的尺寸信息及所述展示窗口的尺寸信息，确定所述背景补齐位图中的填充展示区域；
基于所述填充展示区域的尺寸信息及所述更新投影区域的尺寸信息，确定所述页面绘制画布中的填充投影区域；
将所述填充展示区域中的图像数据绘制在所述填充投影区域中；
所述展示模块740在通过所述展示窗口展示绘制后的所述更新投影区域时，用于：
通过所述展示窗口展示绘制后的所述更新投影区域以及绘制后的所述填充投影区域。
一种可选的实施方式中，所述生成模块720具体用于：
基于所述目标页面的可滑动方向、所述展示窗口的尺寸信息，确定所述背景资源的缩放比例；
按照所述缩放比例，对所述背景资源进行缩放，并将所述背景资源转换为位图格式，得到所述背景位图。
一种可选的实施方式中，所述更新展示区域的尺寸信息与所述更新投影区域的尺寸信息相同。
关于装置中的各模块的处理流程、以及各模块之间的交互流程的描述可以参照上述方法实施例中的相关说明，这里不再详述。
对应于图1中的页面背景展示方法，本公开实施例还提供了一种电子设备800，如图8所示，为本公开实施例提供的电子设备800结构示意图，包括：
处理器81、存储器82、和总线83；存储器82用于存储执行指令，包括内存821和外部存储器822；这里的内存821也称内存储器，用于暂时存放处理器81中的运算数据，以及与硬盘等外部存储器822交换的数据，处理器81通过内存821与外部存储器822进行数据交换，当所述电子设备800运行时，所述处理器81与所述存储器82之间通过总线83通信，使得所述处理器81执行以下指令：
响应针对目标页面的展示事件，获取所述目标页面的背景资源；
基于展示窗口的尺寸信息及所述背景资源，生成所述目标页面对应的背景位图；
基于所述展示窗口的尺寸信息，从所述背景位图中确定初始展示区域；
将所述初始展示区域中的图像数据绘制在页面绘制画布的投影区域中，利用所述展示窗口展示绘制后的所述投影区域。
本公开实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述方法实施例中所述的页面背景展示方法的步骤。其中，该存储介质可以是易失性或非易失的计算机可读取存储介质。
本公开实施例还提供一种计算机程序产品，该计算机程序产品承载有程序代码，所述程序代码包括的指令可用于执行上述方法实施例中所述的页面背景展示方法的步骤，具体可参见上述方法实施例，在此不再赘述。
其中，上述计算机程序产品可以具体通过硬件、软件或其结合的方式实现。在一个可选实施例中，所述计算机程序产品具体体现为计算机存储介质，在另一个可选实施例中，计算机程序产品具体体现为软件产品，例如软件开发包(Software Development Kit，SDK)等等。
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统和装置的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。在本公开所提供的几个实施例中，应该理解到，所揭露的系统、装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本公开各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。
所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个处理器可执行的非易失的计算机可读取存储介质中。基于这样的理解，本公开的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本公开各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-OnlyMemory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
最后应说明的是：以上所述实施例，仅为本公开的具体实施方式，用以说明本公开的技术方案，而非对其限制，本公开的保护范围并不局限于此，尽管参照前述实施例对本公开进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本公开揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本公开实施例技术方案的精神和范围，都应涵盖在本公开的保护范围之内。因此，本公开的保护范围应所述以权利要求的保护范围为准。
Claims (10)
1.一种页面背景展示方法，其特征在于，包括：
响应针对目标页面的展示事件，获取所述目标页面的背景资源；
基于展示窗口的尺寸信息及所述背景资源，生成所述目标页面对应的背景位图；
基于所述展示窗口的尺寸信息，从所述背景位图中确定初始展示区域；
将所述初始展示区域中的图像数据绘制在页面绘制画布的投影区域中，利用所述展示窗口展示绘制后的所述投影区域。
2.根据权利要求1所述的方法，其特征在于，所述方法还包括：
响应针对目标页面的页面滑动事件，确定所述目标页面的位置偏移信息；
基于所述位置偏移信息，确定所述目标页面的背景位图中的更新展示区域以及所述页面绘制画布中的更新投影区域；
将所述更新展示区域中的图像数据绘制在所述更新投影区域中，通过所述展示窗口展示绘制后的所述更新投影区域。
3.根据权利要求2所述的方法，其特征在于，所述基于所述位置偏移信息，确定所述目标页面的背景位图中的更新展示区域，包括：
基于所述背景位图的尺寸信息以及所述位置偏移信息，确定所述更新展示区域的起始位置；
基于所述背景位图的尺寸信息、所述展示窗口的尺寸信息以及所述更新展示区域的起始位置，确定所述更新展示区域的截止位置；
基于所述起始位置及所述截止位置，确定所述更新展示区域。
4.根据权利要求2所述的方法，其特征在于，所述基于所述位置偏移信息，确定所述页面绘制画布中的更新投影区域，包括：
从所述页面绘制画布中选取与所述更新展示区域的尺寸信息匹配的区域，作为所述页面绘制画布中的更新投影区域。
5.根据权利要求2所述的方法，其特征在于，在确定所述目标页面的背景位图中的更新展示区域以及所述页面绘制画布中的更新投影区域之后，所述方法还包括：
若所述更新展示区域的尺寸信息小于所述展示窗口的尺寸信息，则基于所述背景位图及所述展示窗口的尺寸信息生成背景补齐位图；
基于所述位置偏移信息、所述背景位图的尺寸信息及所述展示窗口的尺寸信息，确定所述背景补齐位图中的填充展示区域；
基于所述填充展示区域的尺寸信息及所述更新投影区域的尺寸信息，确定所述页面绘制画布中的填充投影区域；
将所述填充展示区域中的图像数据绘制在所述填充投影区域中；
所述通过所述展示窗口展示绘制后的所述更新投影区域包括：
通过所述展示窗口展示绘制后的所述更新投影区域以及绘制后的所述填充投影区域。
6.根据权利要求1所述的方法，其特征在于，所述基于展示窗口的尺寸信息及所述背景资源，生成所述目标页面对应的背景位图，包括：
基于所述目标页面的可滑动方向、所述展示窗口的尺寸信息，确定所述背景资源的缩放比例；
按照所述缩放比例，对所述背景资源进行缩放，并将所述背景资源转换为位图格式，得到所述背景位图。
7.根据权利要求2所述的方法，其特征在于，所述更新展示区域的尺寸信息与所述更新投影区域的尺寸信息相同。
8.一种页面背景展示装置，其特征在于，包括：
响应模块，用于响应针对目标页面的展示事件，获取所述目标页面的背景资源；
生成模块，用于基于展示窗口的尺寸信息及所述背景资源，生成所述目标页面对应的背景位图；
确定模块，用于基于所述展示窗口的尺寸信息，从所述背景位图中确定初始展示区域；
展示模块，用于将所述初始展示区域中的图像数据绘制在页面绘制画布的投影区域中，利用所述展示窗口展示绘制后的所述投影区域。
9.一种电子设备，其特征在于，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当电子设备运行时，所述处理器与所述存储器之间通过总线通信，所述机器可读指令被所述处理器执行时执行如权利要求1至7任一所述的页面背景展示方法的步骤。
10.一种计算机可读存储介质，其特征在于，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行如权利要求1至7任意一项所述的页面背景展示方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110552248.9A CN113254131A (zh) | 2021-05-20 | 2021-05-20 | 一种页面背景展示方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110552248.9A CN113254131A (zh) | 2021-05-20 | 2021-05-20 | 一种页面背景展示方法及装置 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113254131A true CN113254131A (zh) | 2021-08-13 |
Family
ID=77183131
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110552248.9A Pending CN113254131A (zh) | 2021-05-20 | 2021-05-20 | 一种页面背景展示方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113254131A (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117311708A (zh) * | 2023-09-18 | 2023-12-29 | 中教畅享(北京)科技有限公司 | 一种网页端3d场景内资源展示页面动态修改方法及装置 |
| WO2024148996A1 (zh) * | 2023-01-13 | 2024-07-18 | 广州朗国电子科技股份有限公司 | 一种基于内容显示的聚光灯实现方法、装置和终端设备 |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102662664A (zh) * | 2012-03-28 | 2012-09-12 | 奇智软件（北京）有限公司 | 界面动画实现方法及系统 |
| CN106598679A (zh) * | 2016-12-21 | 2017-04-26 | 北京奇虎科技有限公司 | 一种加载图片资源的方法及装置 |
| CN107066186A (zh) * | 2017-02-23 | 2017-08-18 | 青岛海信电器股份有限公司 | 一种基于Canvas的UI界面字符展示方法及显示设备 |
| CN107832103A (zh) * | 2017-11-02 | 2018-03-23 | 四川长虹电器股份有限公司 | 基于Android系统的UI控件背景模糊处理和动态显示的方法 |
| CN110096277A (zh) * | 2019-03-19 | 2019-08-06 | 北京三快在线科技有限公司 | 一种动态页面展示方法、装置、电子设备及存储介质 |
| CN110221889A (zh) * | 2019-05-05 | 2019-09-10 | 北京三快在线科技有限公司 | 一种页面展示方法、装置、电子设备及存储介质 |
| CN110472166A (zh) * | 2018-05-08 | 2019-11-19 | 北京京东尚科信息技术有限公司 | 用于显示页面的方法和装置 |
| WO2020037469A1 (zh) * | 2018-08-20 | 2020-02-27 | 华为技术有限公司 | 界面的显示方法及电子设备 |
| CN111625237A (zh) * | 2020-04-30 | 2020-09-04 | 上海艾麒信息科技有限公司 | 文字视觉变形方法、系统及介质 |
-
2021
- 2021-05-20 CN CN202110552248.9A patent/CN113254131A/zh active Pending
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102662664A (zh) * | 2012-03-28 | 2012-09-12 | 奇智软件（北京）有限公司 | 界面动画实现方法及系统 |
| CN106598679A (zh) * | 2016-12-21 | 2017-04-26 | 北京奇虎科技有限公司 | 一种加载图片资源的方法及装置 |
| CN107066186A (zh) * | 2017-02-23 | 2017-08-18 | 青岛海信电器股份有限公司 | 一种基于Canvas的UI界面字符展示方法及显示设备 |
| CN107832103A (zh) * | 2017-11-02 | 2018-03-23 | 四川长虹电器股份有限公司 | 基于Android系统的UI控件背景模糊处理和动态显示的方法 |
| CN110472166A (zh) * | 2018-05-08 | 2019-11-19 | 北京京东尚科信息技术有限公司 | 用于显示页面的方法和装置 |
| WO2020037469A1 (zh) * | 2018-08-20 | 2020-02-27 | 华为技术有限公司 | 界面的显示方法及电子设备 |
| CN110096277A (zh) * | 2019-03-19 | 2019-08-06 | 北京三快在线科技有限公司 | 一种动态页面展示方法、装置、电子设备及存储介质 |
| CN110221889A (zh) * | 2019-05-05 | 2019-09-10 | 北京三快在线科技有限公司 | 一种页面展示方法、装置、电子设备及存储介质 |
| CN111625237A (zh) * | 2020-04-30 | 2020-09-04 | 上海艾麒信息科技有限公司 | 文字视觉变形方法、系统及介质 |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2024148996A1 (zh) * | 2023-01-13 | 2024-07-18 | 广州朗国电子科技股份有限公司 | 一种基于内容显示的聚光灯实现方法、装置和终端设备 |
| CN117311708A (zh) * | 2023-09-18 | 2023-12-29 | 中教畅享(北京)科技有限公司 | 一种网页端3d场景内资源展示页面动态修改方法及装置 |
| CN117311708B (zh) * | 2023-09-18 | 2024-04-05 | 中教畅享科技股份有限公司 | 一种网页端3d场景内资源展示页面动态修改方法及装置 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11500513B2 (en) | Method for icon display, terminal, and storage medium | |
| CN105653254B (zh) | 原生界面适配方法、装置及应用其的电子设备 | |
| CN110764850B (zh) | 界面显示方法、参数赋值方法、系统及设备 | |
| CN109933322B (zh) | 一种页面编辑方法、装置及计算机可读存储介质 | |
| EP3220249A1 (en) | Method, device and terminal for implementing regional screen capture | |
| CN104820589B (zh) | 一种动态适配网页的方法及其装置 | |
| CN113254131A (zh) | 一种页面背景展示方法及装置 | |
| CN110019464B (zh) | 页面处理方法及装置 | |
| CN111190672A (zh) | 电子设备的ui界面适配方法、电子设备和存储介质 | |
| CN111767002B (zh) | 页面展示方法、装置、设备及存储介质 | |
| CN106598410B (zh) | 电子书的显示方法、装置和终端设备 | |
| EP2874054A1 (en) | Application text adjusting method, device, and terminal | |
| CN111596919A (zh) | 图文绘制结果的展示方法、装置、计算机设备及存储介质 | |
| AU2016256364B2 (en) | Rendering graphical assets natively on multiple screens of electronic devices | |
| EP2447885A2 (en) | A font file with graphic images | |
| CN110781425B (zh) | 移动端h5页面的显示方法、装置、设备及存储介质 | |
| CN107122104B (zh) | 数据显示方法及装置 | |
| CN107193815B (zh) | 一种页面代码的处理方法、装置及设备 | |
| CN107391148B (zh) | 视图元素保存方法、装置、电子设备及计算机存储介质 | |
| CN111897607A (zh) | 应用界面加载与交互方法、设备及存储介质 | |
| CN111324398A (zh) | 最近内容的处理方法、装置、终端及存储介质 | |
| CN101599263A (zh) | 一种移动终端及其屏幕显示界面的显示方法 | |
| CN114217725A (zh) | 基于Qt图形视图框架的绘图方法、装置、设备及介质 | |
| CN113656020A (zh) | 一种基于ReactNative的图片展示组件开发方法及相关组件 | |
| CN110955473B (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 |