CN111580924A - 页面展示方法、装置、电子设备及可读存储介质 - Google Patents

页面展示方法、装置、电子设备及可读存储介质 Download PDF

Info

Publication number
CN111580924A
CN111580924A CN202010423350.4A CN202010423350A CN111580924A CN 111580924 A CN111580924 A CN 111580924A CN 202010423350 A CN202010423350 A CN 202010423350A CN 111580924 A CN111580924 A CN 111580924A
Authority
CN
China
Prior art keywords
background
loading
display
program
ring
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
CN202010423350.4A
Other languages
English (en)
Other versions
CN111580924B (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.)
Beijing ByteDance Network Technology Co Ltd
Original Assignee
Beijing ByteDance Network Technology 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 Beijing ByteDance Network Technology Co Ltd filed Critical Beijing ByteDance Network Technology Co Ltd
Priority to CN202010423350.4A priority Critical patent/CN111580924B/zh
Publication of CN111580924A publication Critical patent/CN111580924A/zh
Application granted granted Critical
Publication of CN111580924B publication Critical patent/CN111580924B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • 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
    • 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/445Program loading or initiating
    • G06F9/44521Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06TIMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/002D [Two Dimensional] image generation
    • G06T11/001Texturing; Colouring; Generation of texture or colour
    • YGENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02DCLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本公开提供的页面展示方法、装置、电子设备及可读存储介质,采用了创建绘制画布,利用第一绘制实例对所述绘制画布进行渲染,获得当前程序在进度加载时的展示背景;采集程序的当前进度加载信息;利用第二绘制实例在所述展示背景上对所述当前进度加载信息进行渲染,获得所述程序在进度加载时的加载背景;在程序的显示页面上展示所述加载背景,从而在程序进行进度加载时,可基于程序的当前的加载进度呈现相应的加载背景,使得程序的视觉效果更为出众。

Description

页面展示方法、装置、电子设备及可读存储介质
技术领域
本公开涉及计算机技术,尤其涉及一种页面展示方法、装置、电子设备及可读存储介质。
背景技术
随着应用超文本标记语言(HyperText Markup Language,简称HTML)技术的发展,基于HTML的程序以其免安装、速度快、不占内存等优势受到广大用户的欢迎。
但是,由于基于HTML的程序的发展时间较短,其技术框架存在不稳定因素。在对于提高程序中数据的可视化和图形化的表现力的问题上,与其他成熟的技术框架相比,由于程序的技术框架还不支持类似包括ant-design在内的公共组件库。因此,如何对于提高程序的表现能力以为用户带来更好的视觉体验成为研究热点。
发明内容
针对上述提出的问题,本公开提供了一种页面展示方法、装置、电子设备及可读存储介质。
一方面,本公开提供的页面展示方法,包括:
创建绘制画布,利用第一绘制实例对所述绘制画布进行渲染,获得当前程序在进度加载时的展示背景;
采集所述程序的当前进度加载信息;
利用第二绘制实例在所述展示背景上对所述当前进度加载信息进行渲染,获得所述程序在进度加载时的加载背景;
在程序的显示页面上展示所述加载背景。
第二方面,本公开提供了一种页面展示装置,包括:
创建模块,用于创建绘制画布;
渲染模块,用于利用第一绘制实例对所述绘制画布进行渲染,获得当前程序在进度加载时的展示背景;
采集模块,用于采集所述程序的当前进度加载信息;
渲染模块,还用于利用第二绘制实例在所述展示背景上对所述当前进度加载信息进行渲染,获得所述程序在进度加载时的加载背景;
展示模块,用于在程序的显示页面上展示所述加载背景。
第三方面,本公开提供了一种电子设备,包括:至少一个处理器和存储器;
所述存储器存储计算机执行指令;
所述至少一个处理器执行所述存储器存储的计算机执行指令,使得所述至少一个处理器执行如前任一项所述的页面展示方法。
第四方面,本公开提供了一种计算机可读存储介质,所述计算机可读存储介质中存储有计算机执行指令,当处理器执行所述计算机执行指令时,实现如前任一项所述的页面展示方法。
本公开提供的页面展示方法、装置、电子设备及可读存储介质,采用了创建绘制画布,利用第一绘制实例对所述绘制画布进行渲染,获得当前程序在进度加载时的展示背景;采集程序的当前进度加载信息;利用第二绘制实例在所述展示背景上对所述当前进度加载信息进行渲染,获得所述程序在进度加载时的加载背景;在程序的显示页面上展示所述加载背景,从而在程序进行进度加载时,可基于程序的当前的加载进度呈现相应的加载背景,使得程序的视觉效果更为出众。
附图说明
为了更清楚地说明本公开实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍,显而易见地,下面描述中的附图是本公开的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动性的前提下,还可以根据这些附图获得其他的附图。
图1为本公开所基于的网络架构的示意图;
图2为本公开实施例提供的一种页面展示方法的流程示意图;
图3为本公开实施例提供的一种页面展示方法的界面示意图;
图4为本公开实施例提供的页面展示装置的结构框图;
图5为本公开实施例提供的电子设备的硬件结构示意图。
具体实施方式
为使本公开实施例的目的、技术方案和优点更加清楚,下面将结合本公开实施例中的附图,对本公开实施例中的技术方案进行清楚、完整地描述。
随着应用超文本标记语言(HyperText Markup Language,简称HTML)技术的发展,基于HTML的程序以其免安装、速度快、不占内存等优势受到广大用户的欢迎。
但是,由于程序的发展时间较短,其技术框架存在不稳定因素。在对于提高程序中数据的可视化和图形化的表现力的问题上,与其他成熟的技术框架相比,由于程序的技术框架还不支持类似包括ant-design在内的公共组件库。因此,如何对于提高程序的表现能力以为用户带来更好的视觉体验成为研究热点。
参考图1,图1为本公开所基于的网络架构的示意图,如图1所示的,本公开基于的一种网络架构可包括页面展示方法装置2以及客户端1。
其中,页面展示方法装置2承载于客户端1,其可用于执行下述各示例中所述的页面展示方法。而客户端1可以安装在具备运算功能的电子设备中,其中的电子设备包括但不限于膝上型便携计算机和台式计算机等等,上述的电子设备是指包括智能手机、平板电脑、台式计算机等在内的设备。
需要说明的是,本公开实施例所涉及的展示方法的执行主体可为前述的页面展示装置,其涉及显示界面具体可加载于客户端的UI界面上,用户可通过该UI界面浏览到页面展示装置生成并展示的程序的加载背景。
第一方面,参考图2,图2为本公开实施例提供的一种页面展示方法的流程示意图。本公开实施例提供的页面展示方法,包括:
步骤101、创建绘制画布。
具体来说,本公开实施例提及的程序具体是一种不需要下载安装即可使用的应用,其加载于前述的客户端,在日常使用中,基于HTML的程序也称为“小程序”,用户可通过客户端实现与程序的交互。
其中的客户端具体可为加载于电子设备上的应用,其应用类型包括但不限于:出行类应用、社交类应用、网络购物类应用、信息服务类应用,甚至是游戏类应用。
当用户通过操作客户端触发程序时,程序将进入加载页面。在现有技术中,该加载页面上将不显示内容,直至程序完成加载并进入程序页面。其中,加载页面具体可指程序启动时的页面,也可为程序在进行内容切换时的页面,本公开对此不进行限制。显然的,这样的显示方式对于用户的视觉呈现效果上是不友好的。
而在本公开实施例中,在程序被触发并进入加载页面时,展示装置将首先基于该加载页面创建一绘制画布。该绘制的画布可用于对调用绘制实例后所渲染的效果进行展示,即将渲染效果展示在画布上。其中,该绘制画布具体可基于Canvas的绘制组件实现。
步骤102、利用第一绘制实例对所述绘制画布进行渲染,获得当前所述程序在进度加载时的展示背景。
步骤103、采集程序的当前进度加载信息。
步骤104、利用第二绘制实例在所述展示背景上对所述当前进度加载信息进行渲染,获得程序在进度加载时的加载背景。
为了向用户呈现更好的视觉效果,展示装置采用两个绘制实例进行加载效果的渲染。
具体来说,在第一绘制实例对画布进行渲染时,其是基于画布的图像坐标系实现的,该图像坐标系一般可为图像的像素坐标系,即横坐标和纵坐标均表示显示的像素数。
其中,展示装置可基于绘制画布本体的图像坐标系,确定所述背景环的圆心坐标以及半径,随后基于圆心坐标以及半径,调用第一绘制实例在绘制画布本体上绘制所述背景环,获得所述展示背景。
进一步的,在可选的实施方式中,展示装置可先绘制以圆心(rx,ry)半径为r,弯折角度为xPI~yPI的圆弧作为背景环,其实现方式可为:执行arc(rx,ry,r,(x*Math.PI),(y*Math.PI));其中,x表示背景环的起始角度,如起始角度为1/4PI时,x为1/4,PI为π;y用于表示背景环的终点角度;Math.PI是用于描述JavaScript语言中代表PI运算符的函数。
当然,在可选实施例中,还可包括确定所述背景环的样式属性,并基于所述样式属性,调用第一绘制实例在绘制画布本体上绘制所述背景环,获得所述展示背景的步骤。而其中的所述样式属性包括如下属性中的一种或多种:环的宽度;环的颜色以及环端点的形状。需要说明的是,该样式还可由用户自定义,举例来说,利用setLineWidth(width)可自定义圆环的宽度;利用setStrokeStyle(color)可自定义圆环的颜色;利用setLineCap('round')可自定义圆环端点的形状。
随后,展示装置将采集程序的当前进度加载信息,一般来说,该进度加载信息可为百分比值,其上限为100%,下限应为0%。该当前进度加载信息具体可为客户端与程序所在的服务器进行交互获得的,并由展示装置对客户端获得的数据进行采集得到。
然后,可利用第二绘制实例在所述展示背景上对所述当前进度加载信息进行渲染,获得所述程序在进度加载时的加载背景。
具体来说,在背景环的基础上,若已知当前进度加载信息为step(百分比),对于加载背景的渲染可采用执行如下操作:arc(rx,ry,r,(x*Math.PI),(x*Math.PI)+[Math.abs(x*Math.PI)+Math.abs(y*Math.PI)*step]);其中,x,y与上文一致仍表示背景环的起终点角度;Math.PI是用于描述JavaScript语言中代表PI运算符的函数,Math.abs代表绝对值运算。
也就是说,加载背景中可渲染有进度加载条,即根据所述背景环的圆心坐标、半径以及当前进度加载信息,调用第二绘制实例在所述背景环上绘制当前进度加载条,获得所述加载背景。
进一步来说,对于进度加载条来说,其进度加载条的末端端点坐标可根据当前进度加载信息step计算获得:
末端端点坐标的坐标中,其横坐标X1=rx-r*Math.cos((总角度/PI)*(step-0.01)*PI-y*Math.PI);其纵坐标Y1=ry-r*Math.sin((总角度/PI)*(step-0.01)*Math.PI-y*Math.PI);
而其起始端端点横坐标X2=rx-r*Math.cos(2/Math.PI-x Math.PI),纵坐标为Y2=ry-r*Math.sin(2/Math.PI-x Math.PI);
其中,rx,ry分别为为圆心坐标,r为半径,Math.PI为JavaScript语言中的PI运算符;总角度即为背景环中的(终点角度y-起始角度x);PI为圆周率。
在其中一种可选方式中,当前进度加载条可叠加显示在背景环上,若当前加载信息发生变化,其当前进度加载条的末端端点坐标将发生变化,其显示位置与所述当前进度加载信息关联,即包括有当前进度加载条的加载背景的视觉效果将发生变化。
步骤105、在程序的显示页面上展示所述加载背景。
图3为本公开实施例提供的一种页面展示方法的界面示意图,图3示出了程序中加载完成率时所呈现的显示界面。当完成率为40%时,呈现左侧界面,而当完成率变为60%时,呈现右侧界面。
通过上述各步骤,在程序被触发并进入加载页面时呈现的显示界面上,将展示有通过两次绘制实例进行渲染得到的加载背景该加载背景可用于表示程序当前进度加载信息或加载进程到达的程度。一方面,用户可快速了解程序的加载的当前进度;另一方面,程序的视觉效果更为出众。
对应于上文实施例的页面展示方法,图4为本公开实施例提供的页面展示装置的结构框图。为了便于说明,仅示出了与本公开实施例相关的部分。参照图4,所述页面展示装置包括:创建模块10、渲染模块20、采集模块30以及展示模块40。
其中,创建模块10,用于创建绘制画布;
渲染模块20,用于利用第一绘制实例对所述绘制画布进行渲染,获得所述程序在进度加载时的展示背景;
采集模块30,用于采集程序的当前进度加载信息;
渲染模块20,还用于利用第二绘制实例在所述展示背景上对所述当前进度加载信息进行渲染,获得所述程序在进度加载时的加载背景;
展示模块40,用于在显示界面上展示所述加载背景。
在本公开可选的实施例中,所述程序在进度加载时的展示背景包括画布本体和背景环;
渲染模块20,具体用于:基于所述绘制画布本体的图像坐标系,确定所述背景环的圆心坐标以及半径;基于圆心坐标以及半径,调用第一绘制实例在所述绘制画布本体上绘制所述背景环,获得所述展示背景。
在本公开可选的实施例中,所述利用第一绘制实例对所述绘制画布进行渲染,获得所述程序在进度加载时的展示背景,还包括:
确定所述背景环的样式属性,并基于所述样式属性,调用第一绘制实例在所述绘制画布本体上绘制所述背景环,获得所述展示背景;
其中,所述样式属性包括如下属性中的一种或多种:环的宽度、环的颜色以及环端点的形状。
在本公开可选的实施例中,所述渲染模块20,具体用于:根据所述背景环的圆心坐标、半径以及当前进度加载信息,调用第二绘制实例在所述背景环上绘制当前进度加载条,获得所述加载背景。
在本公开可选的实施例中,所述渲染模块20,还用于:所述当前进度加载条叠加显示在所述背景环上,其显示位置与所述当前进度加载信息关联。
本公开提供的页面展示装置,采用了创建绘制画布,利用第一绘制实例对所述绘制画布进行渲染,获得所述程序在进度加载时的展示背景;采集程序的当前进度加载信息;利用第二绘制实例在所述展示背景上对所述当前进度加载信息进行渲染,获得所述程序在进度加载时的加载背景;在显示界面上展示所述加载背景,从而在程序进行进度加载时,可基于程序的当前的加载进度呈现相应的加载背景,使得程序的视觉效果更为出众。
本实施例提供的电子设备,可用于执行上述方法实施例的技术方案,其实现原理和技术效果类似,本实施例此处不再赘述。
参考图5,其示出了适于用来实现本公开实施例的电子设备900的结构示意图,该电子设备900可以为终端设备或服务器。其中,终端设备可以包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、个人数字助理(Personal Digital Assistant,简称PDA)、平板电脑(Portable Android Device,简称PAD)、便携式多媒体播放器(Portable MediaPlayer,简称PMP)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。图5示出的电子设备仅仅是一个示例,不应对本公开实施例的功能和使用范围带来任何限制。
如图5所示,电子设备900可以包括归因处理装置(例如中央处理器、图形处理器等)901,其可以根据存储在只读存储器(Read Only Memory,简称ROM)902中的程序或者从存储装置908加载到随机访问存储器(Random Access Memory,简称RAM)903中的程序而执行各种适当的动作和处理。在RAM 903中,还存储有电子设备900操作所需的各种程序和数据。归因处理装置901、ROM 902以及RAM 903通过总线904彼此相连。输入/输出(I/O)接口905也连接至总线904。
通常,以下装置可以连接至I/O接口905:包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置906;包括例如液晶显示器(Liquid CrystalDisplay,简称LCD)、扬声器、振动器等的输出装置907;包括例如磁带、硬盘等的存储装置908;以及通信装置909。通信装置909可以允许电子设备900与其他设备进行无线或有线通信以交换数据。虽然图5示出了具有各种装置的电子设备900,但是应理解的是,并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。
特别地,根据本公开的实施例,上文参考流程图描述的过程可以被实现为计算机软件程序。例如,本公开的实施例包括一种计算机程序产品,其包括承载在计算机可读介质上的计算机程序,该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中,该计算机程序可以通过通信装置909从网络上被下载和安装,或者从存储装置908被安装,或者从ROM 902被安装。在该计算机程序被归因处理装置901执行时,执行本公开实施例的方法中限定的上述功能。
需要说明的是,本公开上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件,或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于:具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中,计算机可读存储介质可以是任何包含或存储程序的有形介质,该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中,计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号,其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式,包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质,该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输,包括但不限于:电线、光缆、RF(射频)等等,或者上述的任意合适的组合。
上述计算机可读介质可以是上述电子设备中所包含的;也可以是单独存在,而未装配入该电子设备中。
上述计算机可读介质承载有一个或者多个程序,当上述一个或者多个程序被该电子设备执行时,使得该电子设备执行上述实施例所示的方法。
可以以一种或多种程序设计语言或其组合来编写用于执行本公开的操作的计算机程序代码,上述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++,还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中,远程计算机可以通过任意种类的网络——包括局域网(LocalArea Network,简称LAN)或广域网(Wide Area Network,简称WAN)—连接到用户计算机,或者,可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
附图中的流程图和框图,图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上,流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分,该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意,在有些作为替换的实现中,方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如,两个接连地表示的方框实际上可以基本并行地执行,它们有时也可以按相反的顺序执行,这依所涉及的功能而定。也要注意的是,框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合,可以用执行规定的功能或操作的专用的基于硬件的系统来实现,或者可以用专用硬件与计算机指令的组合来实现。
描述于本公开实施例中所涉及到的单元可以通过软件的方式实现,也可以通过硬件的方式来实现。其中,单元的名称在某种情况下并不构成对该单元本身的限定,例如,第一获取单元还可以被描述为“获取至少两个网际协议地址的单元”。
本文中以上描述的功能可以至少部分地由一个或多个硬件逻辑部件来执行。例如,非限制性地,可以使用的示范类型的硬件逻辑部件包括:现场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、片上系统(SOC)、复杂可编程逻辑设备(CPLD)等等。
在本公开的上下文中,机器可读介质可以是有形的介质,其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备,或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。
第一方面,根据本公开的一个或多个实施例,一种页面展示方法,包括:
创建绘制画布,利用第一绘制实例对所述绘制画布进行渲染,获得当前程序在进度加载时的展示背景;
采集所述程序的当前进度加载信息;
利用第二绘制实例在所述展示背景上对所述当前进度加载信息进行渲染,获得所述程序在进度加载时的加载背景;
在程序的显示页面上展示所述加载背景。
在本公开提供的一个或多个实施例中,所述程序在进度加载时的展示背景包括画布本体和背景环;
所述利用第一绘制实例对所述绘制画布进行渲染,获得所述程序在进度加载时的展示背景,包括:
基于所述绘制画布本体的图像坐标系,确定所述背景环的圆心坐标以及半径;
基于圆心坐标以及半径,调用第一绘制实例在所述绘制画布本体上绘制所述背景环,获得所述展示背景。
在本公开提供的一个或多个实施例中,所述利用第一绘制实例对所述绘制画布进行渲染,获得当前程序在进度加载时的展示背景,还包括:
确定所述背景环的样式属性,并基于所述样式属性,调用第一绘制实例在所述绘制画布本体上绘制所述背景环,获得所述展示背景;
其中,所述样式属性包括如下属性中的一种或多种:环的宽度;环的颜色以及环端点的形状。
在本公开提供的一个或多个实施例中,所述利用第二绘制实例在所述展示背景上对所述当前进度加载信息进行渲染,获得所述程序在进度加载时的加载背景,包括:
根据所述背景环的圆心坐标、半径以及当前进度加载信息,调用第二绘制实例在所述背景环上绘制当前进度加载条,获得所述加载背景。
在本公开提供的一个或多个实施例中,根据所述背景环的圆心坐标、半径以及当前进度加载信息,调用第一绘制实例在所述背景环上绘制当前进度加载条,获得所述加载背景,还包括:
所述当前进度加载条叠加显示在所述背景环上,其显示位置与所述当前进度加载信息关联。
第二方面,在本公开提供的一个或多个实施例中,一种页面展示装置,包括:
创建模块,用于创建绘制画布;
渲染模块,用于利用第一绘制实例对所述绘制画布进行渲染,获得当前程序在进度加载时的展示背景;
采集模块,用于采集程序的当前进度加载信息;
渲染模块,还用于利用第二绘制实例在所述展示背景上对所述当前进度加载信息进行渲染,获得所述程序在进度加载时的加载背景;
展示模块,用于程序的显示页面上展示所述加载背景。
在本公开提供的一个或多个实施例中,所述程序在进度加载时的展示背景包括画布本体和背景环;
渲染模块,具体用于:基于所述绘制画布本体的图像坐标系,确定所述背景环的圆心坐标以及半径;基于圆心坐标以及半径,调用第一绘制实例在所述绘制画布本体上绘制所述背景环,获得所述展示背景。
在本公开提供的一个或多个实施例中,所述渲染模块,具体用于:确定所述背景环的样式属性,并基于所述样式属性,调用第一绘制实例在所述绘制画布本体上绘制所述背景环,获得所述展示背景;
其中,所述样式属性包括如下属性中的一种或多种:环的宽度;环的颜色以及环端点的形状。
在本公开提供的一个或多个实施例中,所述渲染模块,具体用于:根据所述背景环的圆心坐标、半径以及当前进度加载信息,调用第二绘制实例在所述背景环上绘制当前进度加载条,获得所述加载背景。
在本公开提供的一个或多个实施例中,所述渲染模块,还用于:所述当前进度加载条叠加显示在所述背景环上,其显示位置与所述当前进度加载信息关联。
第三方面,根据本公开的一个或多个实施例,一种电子设备,包括:至少一个处理器和存储器;
所述存储器存储计算机执行指令;
所述至少一个处理器执行所述存储器存储的计算机执行指令,使得所述至少一个处理器执行如前所述方法。
第四方面,根据本公开的一个或多个实施例,一种计算机可读存储介质,所述计算机可读存储介质中存储有计算机执行指令,当处理器执行所述计算机执行指令时,实现如前所述方法。
以上描述仅为本公开的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解,本公开中所涉及的公开范围,并不限于上述技术特征的特定组合而成的技术方案,同时也应涵盖在不脱离上述公开构思的情况下,由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本公开中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。
此外,虽然采用特定次序描绘了各操作,但是这不应当理解为要求这些操作以所示出的特定次序或以顺序次序执行来执行。在一定环境下,多任务和并行处理可能是有利的。同样地,虽然在上面论述中包含了若干具体实现细节,但是这些不应当被解释为对本公开的范围的限制。在单独的实施例的上下文中描述的某些特征还可以组合地实现在单个实施例中。相反地,在单个实施例的上下文中描述的各种特征也可以单独地或以任何合适的子组合的方式实现在多个实施例中。
尽管已经采用特定于结构特征和/或方法逻辑动作的语言描述了本主题,但是应当理解所附权利要求书中所限定的主题未必局限于上面描述的特定特征或动作。相反,上面所描述的特定特征和动作仅仅是实现权利要求书的示例形式。

Claims (12)

1.一种页面展示方法,其特征在于,包括:
创建绘制画布,利用第一绘制实例对所述绘制画布进行渲染,获得当前程序在进度加载时的展示背景;
采集所述程序的当前进度加载信息;
利用第二绘制实例在所述展示背景上对所述当前进度加载信息进行渲染,获得所述程序在进度加载时的加载背景;
在程序的显示页面上展示所述加载背景。
2.根据权利要求1所述的页面展示方法,其特征在于,所述程序在进度加载时的展示背景包括画布本体和背景环;
所述利用第一绘制实例对所述绘制画布进行渲染,获得当前程序在进度加载时的展示背景,包括:
基于所述绘制画布本体的图像坐标系,确定所述背景环的圆心坐标以及半径;
基于圆心坐标以及半径,调用第一绘制实例在所述绘制画布本体上绘制所述背景环,获得所述展示背景。
3.根据权利要求2所述的页面展示方法,其特征在于,所述利用第一绘制实例对所述绘制画布进行渲染,获得当前程序在进度加载时的展示背景,还包括:
确定所述背景环的样式属性,并基于所述样式属性,调用第一绘制实例在所述绘制画布本体上绘制所述背景环,获得所述展示背景;
其中,所述样式属性包括如下属性中的一种或多种:环的宽度、环的颜色以及环端点的形状。
4.根据权利要求2所述的页面展示方法,其特征在于,所述利用第二绘制实例在所述展示背景上对所述当前进度加载信息进行渲染,获得所述程序在进度加载时的加载背景,包括:
根据所述背景环的圆心坐标、半径以及当前进度加载信息,调用第二绘制实例在所述背景环上绘制当前进度加载条,获得所述加载背景。
5.根据权利要求4所述的页面展示方法,其特征在于,根据所述背景环的圆心坐标、半径以及当前进度加载信息,调用第二绘制实例在所述背景环上绘制当前进度加载条,获得所述加载背景,还包括:
将所述当前进度加载条叠加显示在所述背景环上,其显示位置与所述当前进度加载信息关联。
6.一种页面展示装置,其特征在于,包括:
创建模块,用于创建绘制画布;
渲染模块,用于利用第一绘制实例对所述绘制画布进行渲染,获得当前程序在进度加载时的展示背景;
采集模块,用于采集所述程序的当前进度加载信息;
渲染模块,还用于利用第二绘制实例在所述展示背景上对所述当前进度加载信息进行渲染,获得所述程序在进度加载时的加载背景;
展示模块,用于在程序的显示页面上展示所述加载背景。
7.根据权利要求6所述的页面展示装置,其特征在于,所述程序在进度加载时的展示背景包括画布本体和背景环;
渲染模块,具体用于:基于所述绘制画布本体的图像坐标系,确定所述背景环的圆心坐标以及半径;基于圆心坐标以及半径,调用第一绘制实例在所述绘制画布本体上绘制所述背景环,获得所述展示背景。
8.根据权利要求7所述的页面展示装置,其特征在于,所述渲染模块,具体用于:确定所述背景环的样式属性,并基于所述样式属性,调用第一绘制实例在所述绘制画布本体上绘制所述背景环,获得所述展示背景;其中,所述样式属性包括如下属性中的一种或多种:环的宽度、环的颜色以及环端点的形状。
9.根据权利要求7所述的页面展示装置,其特征在于,所述渲染模块,具体用于:根据所述背景环的圆心坐标、半径以及当前进度加载信息,调用第二绘制实例在所述背景环上绘制当前进度加载条,获得所述加载背景。
10.根据权利要求9所述的页面展示装置,其特征在于,所述渲染模块,还用于:将所述当前进度加载条叠加显示在所述背景环上,其显示位置与所述当前进度加载信息关联。
11.一种电子设备,其特征在于,包括:至少一个处理器和存储器;
所述存储器存储计算机执行指令;
所述至少一个处理器执行所述存储器存储的计算机执行指令,使得所述至少一个处理器执行如权利要求1-5任一项所述的页面展示方法。
12.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质中存储有计算机执行指令,当处理器执行所述计算机执行指令时,实现如权利要求1-5任一项所述的页面展示方法。
CN202010423350.4A 2020-05-19 2020-05-19 页面展示方法、装置、电子设备及可读存储介质 Active CN111580924B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010423350.4A CN111580924B (zh) 2020-05-19 2020-05-19 页面展示方法、装置、电子设备及可读存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010423350.4A CN111580924B (zh) 2020-05-19 2020-05-19 页面展示方法、装置、电子设备及可读存储介质

Publications (2)

Publication Number Publication Date
CN111580924A true CN111580924A (zh) 2020-08-25
CN111580924B CN111580924B (zh) 2023-06-27

Family

ID=72125207

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010423350.4A Active CN111580924B (zh) 2020-05-19 2020-05-19 页面展示方法、装置、电子设备及可读存储介质

Country Status (1)

Country Link
CN (1) CN111580924B (zh)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112540806A (zh) * 2020-12-25 2021-03-23 北京百度网讯科技有限公司 一种小程序页面渲染方法、装置、电子设备及存储介质
CN112579083A (zh) * 2020-12-09 2021-03-30 京东数字科技控股股份有限公司 图像展示方法、装置、电子设备和存储介质
CN115150653A (zh) * 2022-06-25 2022-10-04 北京字跳网络技术有限公司 媒体内容的展示方法、装置、电子设备和存储介质
CN115268720A (zh) * 2022-08-16 2022-11-01 北京尽微致广信息技术有限公司 一种页面渲染方法、装置、设备及可读存储介质

Citations (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130097520A1 (en) * 2011-10-18 2013-04-18 Research In Motion Limited Method of rendering a user interface
CN103139439A (zh) * 2013-01-24 2013-06-05 厦门美图网科技有限公司 一种基于图块模板且可添加修饰素材的图片合成方法
US20130159893A1 (en) * 2011-12-16 2013-06-20 Research In Motion Limited Method of rendering a user interface
US20130242322A1 (en) * 2012-03-14 2013-09-19 Xerox Corporation Systems and methods for implementing user-customizable operability for imaging operations in image forming devices
CN104978100A (zh) * 2014-04-02 2015-10-14 富泰华工业(深圳)有限公司 动态显示文件传输进度的方法及系统
WO2017024144A1 (en) * 2015-08-04 2017-02-09 Google Inc. Systems and methods for interactively presenting a visible portion of a rendering surface on a user device
CN106648581A (zh) * 2016-09-13 2017-05-10 百度在线网络技术(北京)有限公司 页面显示方法及装置
CN108717367A (zh) * 2018-04-13 2018-10-30 上海爱优威软件开发有限公司 一种调整显示页面的方法及终端
CN109636488A (zh) * 2019-01-17 2019-04-16 珠海天燕科技有限公司 广告投放方法及装置

Patent Citations (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130097520A1 (en) * 2011-10-18 2013-04-18 Research In Motion Limited Method of rendering a user interface
US20130159893A1 (en) * 2011-12-16 2013-06-20 Research In Motion Limited Method of rendering a user interface
US20130242322A1 (en) * 2012-03-14 2013-09-19 Xerox Corporation Systems and methods for implementing user-customizable operability for imaging operations in image forming devices
CN103139439A (zh) * 2013-01-24 2013-06-05 厦门美图网科技有限公司 一种基于图块模板且可添加修饰素材的图片合成方法
CN104978100A (zh) * 2014-04-02 2015-10-14 富泰华工业(深圳)有限公司 动态显示文件传输进度的方法及系统
WO2017024144A1 (en) * 2015-08-04 2017-02-09 Google Inc. Systems and methods for interactively presenting a visible portion of a rendering surface on a user device
CN106648581A (zh) * 2016-09-13 2017-05-10 百度在线网络技术(北京)有限公司 页面显示方法及装置
CN108717367A (zh) * 2018-04-13 2018-10-30 上海爱优威软件开发有限公司 一种调整显示页面的方法及终端
CN109636488A (zh) * 2019-01-17 2019-04-16 珠海天燕科技有限公司 广告投放方法及装置

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
丁立国;周斌;熊伟;: "基于Html5的Web Map矢量渲染技术研究", no. 08 *
钱鑫博;: "基于HTML5的交互Web3D的实现", no. 01 *

Cited By (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112579083A (zh) * 2020-12-09 2021-03-30 京东数字科技控股股份有限公司 图像展示方法、装置、电子设备和存储介质
CN112579083B (zh) * 2020-12-09 2024-05-17 京东科技控股股份有限公司 图像展示方法、装置、电子设备和存储介质
CN112540806A (zh) * 2020-12-25 2021-03-23 北京百度网讯科技有限公司 一种小程序页面渲染方法、装置、电子设备及存储介质
CN112540806B (zh) * 2020-12-25 2023-06-23 北京百度网讯科技有限公司 一种小程序页面渲染方法、装置、电子设备及存储介质
CN115150653A (zh) * 2022-06-25 2022-10-04 北京字跳网络技术有限公司 媒体内容的展示方法、装置、电子设备和存储介质
CN115150653B (zh) * 2022-06-25 2024-02-06 北京字跳网络技术有限公司 媒体内容的展示方法、装置、电子设备和存储介质
CN115268720A (zh) * 2022-08-16 2022-11-01 北京尽微致广信息技术有限公司 一种页面渲染方法、装置、设备及可读存储介质

Also Published As

Publication number Publication date
CN111580924B (zh) 2023-06-27

Similar Documents

Publication Publication Date Title
CN111580924B (zh) 页面展示方法、装置、电子设备及可读存储介质
CN110046021B (zh) 一种页面显示方法、装置、系统、设备和存储介质
CN111399956B (zh) 应用于显示设备的内容展示方法、装置和电子设备
CN109460233B (zh) 页面的原生界面显示更新方法、装置、终端设备及介质
US20230024650A1 (en) Method and apparatus for selecting menu items, readable medium and electronic device
CN111291244B (zh) 房源信息展示方法、装置、终端及存储介质
CN113377366A (zh) 控件编辑方法、装置、设备、可读存储介质及产品
US20230421857A1 (en) Video-based information displaying method and apparatus, device and medium
CN110022493B (zh) 播放进度显示方法、装置、电子设备和存储介质
CN112053286B (zh) 图像处理方法、装置、电子设备和可读介质
CN110069186B (zh) 显示应用的操作界面的方法和设备
US20230224429A1 (en) Video generation method, video playing method, video generation device, video playing device, electronic apparatus and computer-readable storage medium
CN111273884A (zh) 图像显示方法、装置和电子设备
CN111324405A (zh) 文字显示方法、装置和电子设备
CN113506356B (zh) 面积图的绘制方法、装置、可读介质和电子设备
CN113961280B (zh) 视图的展示方法、装置、电子设备及计算机可读存储介质
CN110618772B (zh) 一种视图添加方法、装置、设备及存储介质
CN111290812B (zh) 应用控件的显示方法、装置、终端及存储介质
CN111340813B (zh) 图像实例分割方法、装置、电子设备及存储介质
CN113672122A (zh) 图像处理方法、装置和电子设备
CN113377365A (zh) 代码显示方法、装置、设备、计算机可读存储介质及产品
CN110807164A (zh) 图像区域的自动调节方法、装置、电子设备及计算机可读存储介质
CN110825480A (zh) 图片的展示方法、装置、电子设备及计算机可读存储介质
EP4113446A1 (en) Sticker processing method and apparatus
CN112214187B (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