CN115830173A - 一种界面元素绘制方法及装置、设备、存储介质、产品 - Google Patents

Abstract

本申请的实施例揭示了一种界面元素绘制方法及装置、设备、存储介质及产品，该方法包括：对页面中待绘制的界面元素对应的绘制数据进行解析，得到界面元素的位置信息；根据位置信息为界面元素建立背景视图，背景视图用于承载绘制的界面元素；根据背景视图设置二维坐标系，根据背景视图的尺寸和界面元素的宽度信息确定二维坐标系内的点坐标，并对二维坐标系内的点坐标进行二维遍历；在对二维坐标系内的点坐标进行二维遍历的过程中，对遍历到的点坐标进行插值计算以得到待绘制点；对待绘制点进行渲染处理，以在页面中绘制界面元素；本申请实施例的技术方案保证插值计算得到的待绘制点的准确性和全面性，使得绘制的界面元素能符合想要的效果。

Description

一种界面元素绘制方法及装置、设备、存储介质、产品

技术领域

本申请涉及界面绘制领域，具体而言，涉及一种界面元素绘制方法及装置、设备、存储介质、产品。

背景技术

随着计算机的广泛应用，越来越多的设计师利用计算机绘制图像。绘制图像的过程中往往涉及到界面元素的绘制，目前在绘制界面元素时，通常使用系统提供的绘图框架的相关API(应用程序接口)进行绘制，例如Quartz2D(二维的绘图引擎)绘图框架的相关API进行界面元素的绘制时，会获取图形上下文，然后确定绘制路径的起始点和终点，通过调用常用拼接路径函数确定起始点和终点之间绘制的路径，最后将路径添加到上下文中进而实现渲染；但通过调用常用拼接路径函数绘制得到的路径与设计路径存在，使得绘制的路径与图形上下文不匹配问题，导致绘制得到界面元素与想要的效果存在偏差。

发明内容

为解决上述技术问题，本申请的实施例提供了一种界面元素绘制方法及装置、设备、存储介质、产品，保证插值计算得到的待绘制点的准确性和全面性，使得绘制的界面元素能符合想要的效果。

本申请的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本申请的实践而习得。

根据本申请实施例的一个方面，提供了一种界面元素绘制方法，包括：对页面中待绘制的界面元素对应的绘制数据进行解析，得到所述界面元素的位置信息；根据所述位置信息为所述界面元素建立背景视图，所述背景视图用于承载绘制的所述界面元素；根据所述背景视图设置二维坐标系，根据所述背景视图的尺寸和所述界面元素的宽度信息确定所述二维坐标系内的点坐标，并对所述二维坐标系内的点坐标进行二维遍历；在对所述二维坐标系内的点坐标进行二维遍历的过程中，对遍历到的点坐标进行插值计算以得到待绘制点；对所述待绘制点进行渲染处理，以在所述页面中绘制所述界面元素。

根据本申请实施例的一个方面，提供了一个界面元素绘制装置，包括：解析模块，用于对页面中待绘制的界面元素对应的绘制数据进行解析，得到所述界面元素的位置信息；建立模块，用于根据所述位置信息为所述界面元素建立背景视图，所述背景视图用于承载绘制的所述界面元素；遍历模块，根据所述背景视图设置二维坐标系，根据所述背景视图的尺寸和所述界面元素的宽度信息确定所述二维坐标系内的点坐标，并对所述二维坐标系内的点坐标进行二维遍历；插值模块，用于在对所述二维坐标系内的点坐标进行二维遍历的过程中，对遍历到的点坐标进行插值计算以得到待绘制点；绘制模块，用于对所述待绘制点进行渲染处理，以在所述页面中绘制所述界面元素。

在本申请的一实施例中，所述绘制数据包括所述界面元素对应的所述背景视图的顶点，以及所述界面元素的圆角半径，解析模块被配置为对所述背景视图的顶点进行索引，以确定所述界面元素对应的所述背景视图的位置区域；根据所述界面元素的圆角半径从所述位置区域中确定所述背景视图的尺寸；将所述背景视图的尺寸对应的位置作为所述界面元素的位置信息。

在本申请的一实施例中，所述遍历模块被配置为以所述背景视图的左上角为原点建立二维坐标系，所述二维坐标系的横轴的正方向为水平向右，所述二维坐标系的纵轴的正方向为垂直向下；根据所述背景视图的尺寸和所述界面元素的宽度信息在所述二维坐标系中确定基准点，以及确定以所述基准点为中心的多个控制点；将所述基准点和控制点放入数组中进行二维遍历。

在本申请的一实施例中，所述遍历模块对所述数组进行外层遍历，以获取每个控制点对应的坐标参数，所述坐标参数包括横坐标值和纵坐标值；根据每个控制点对应的坐标参数，对控制点进行预设次数的内层遍历，得到每个控制点的坐标值，并记录当前的内层遍历次数。

在本申请的一实施例中，所述插值模块获取在对控制点进行预设次数的内层遍历的过程中得到的每个控制点的坐标值，以及当前的内层遍历次数；根据当前的内层遍历次数以及每个控制点的坐标值进行插值计算，得到待绘制点的坐标值。

在本申请的一实施例中，所述绘制模块根据所述背景视图的尺寸生成所述背景视图的图层对象；为所述图层对象设置图层属性，所述图层属性包括描边颜色、填充颜色、线宽、描线开始的地方占总路径的百分比和描线结束的地方占总路径的百分比中的至少一个；绘制所述待绘制点得到路径，利用所述图层对象将所述路径渲染显示到所述背景视图上，得到所述界面元素。

在本申请的一实施例中，所述界面绘制装置还包括触发模块，所述触发模块被配置为所述背景视图设置不同的手势操作对应的触发事件；若获取到所述界面元素上输入的手势操作，触发所输入的手势操作对应的触发事件。

根据本申请实施例的一个方面，提供了一种电子设备，包括一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个被所述一个或多个处理器执行时，使得所述电子设备实现如上所述的界面元素绘制方法。

根据本申请实施例的一个方面，提供了一种计算机可读存储介质，其上存储有计算机可读指令，当所述计算机可读指令被计算机的处理器执行时，使计算机执行如上所述的界面元素绘制方法。

根据本申请实施例的一个方面，提供了一种计算机程序产品所述计算机指令被处理器执行时实现如上所述的界面元素绘制方法。

在本申请的实施例所提供的技术方案中，对页面中待绘制的界面元素对应的绘制数据进行解析，得到界面元素的位置信息，进而可根据界面元素的位置信息建立背景视图，背景视图用于承载绘制的所述界面元素，可以确定待绘制的界面元素在页面中的显示位置，进而基于背景视图设置二维坐标系，并在二维坐标系中通过背景视图的尺寸和界面元素的宽度信息定义点坐标，在对点坐标的二维遍历过程中，对遍历到的点坐标进行插值计算得到待绘制点；使得点坐标与背景视图和界面元素的宽度信息关联，通过对点坐标进行二维遍历，保证插值计算得到的待绘制点的准确性和全面性，进而对待绘制点进行渲染处理，以在页面中绘制界面元素，使得绘制的界面元素能符合想要的效果。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本申请。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术者来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在附图中：

图1是本申请涉及的一种实施环境的示意图；

图2示出了根据本申请的一个实施例的界面元素绘制方法的流程图；

图3示出了根据本申请的一个实施例的页面中的界面元素的位置的示意图；

图4示出了图2所示实施例中的步骤S110在一示例性实施例中的流程图；

图5示出了图2所示实施例中的步骤S130在一示例性实施例中的流程图；

图6示出了图2所示实施例中的步骤S140在一示例性实施例中的流程图；

图7示出了图2所示实施例中的步骤S150在一示例性实施例中的流程图；

图8示出了根据本申请的一个实施例的绘制得到的界面元素的示意图；

图9示出了图2所示实施例中的在步骤S150之后在一示例性实施例中的流程图；

图10示出了根据本申请的一示例性实施例中的曲线绘制的流程图；

图11示出了根据本申请的一个实施例的绘制得到的曲线的示意图；

图12示出了根据本申请的一个实施例的界面元素绘制装置的示意图；

图13示出了适于用来实现本申请实施例的电子设备的计算机系统的结构示意图。

具体实施方式

这里将详细地对示例性实施例执行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。

附图中所示的方框图仅仅是功能实体，不一定必须与物理上独立的实体相对应。即，可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

附图中所示的流程图仅是示例性说明，不是必须包括所有的内容和操作/步骤，也不是必须按所描述的顺序执行。例如，有的操作/步骤还可以分解，而有的操作/步骤可以合并或部分合并，因此实际执行的顺序有可能根据实际情况改变。

还需要说明的是：在本申请中提及的“多个”是指两个或者两个以上。“和/或”描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。

请参阅图1，图1是本申请涉及的一种实施环境的示意图。该实施环境包括移动终端100、服务器200，移动终端100和服务器200之间通过有线或者无线网络进行通信。

服务器200将待绘制的界面元素对应的绘制数据发送给移动终端100。

移动终端100接收绘制数据，对页面中待绘制的界面元素对应的绘制数据进行解析，得到界面元素的位置信息；根据位置信息为界面元素建立背景视图view，背景视图用于承载绘制的界面元素；根据背景视图设置二维坐标系，根据背景视图的尺寸和界面元素的宽度信息确定二维坐标系内的点坐标，并对二维坐标系内的点坐标进行二维遍历；在对二维坐标系内的点坐标进行二维遍历的过程中，对遍历到的点坐标进行插值计算以得到待绘制点；对待绘制点进行渲染处理，以在页面中绘制界面元素。

其中，移动终端100可以是智能手机、平板、笔记本电脑、计算机等任意能够展示的电子设备，服务器200可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN(Content Delivery Network，内容分发网络)以及大数据和人工智能平台等基础云计算服务的云服务器，本处不对此进行限制。

可以理解的是，区块链(Blockchain)是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。

本发明实施例涉及的实施环境可以是由多个节点(接入网络中的任意形式的计算设备，如服务器、移动终端)通过网络通信的形式连接形成的分布式系统。以分布式系统为区块链系统为例，由多个节点(接入网络中的任意形式的计算设备，如服务器、移动终端)形成，节点之间形成组成的点对点(P2P，Peer To Peer)网络，P2P协议是一个运行在传输控制协议(TCP，Transmission Control Protocol)协议之上的应用层协议。在分布式系统中，任何机器如服务器、移动终端都可以加入而成为节点，节点包括硬件层、中间层、操作系统层和应用层。

区块链系统中各节点的功能，涉及的功能包括：1)路由，节点具有的基本功能，用于支持节点之间的通信。节点除具有路由功能外，还可以具有以下功能：2)应用，用于部署在区块链中，根据实际业务需求而实现特定业务，记录实现功能相关的数据形成记录数据，在记录数据中携带数字签名以表示任务数据的来源，将记录数据发送到区块链系统中的其他节点，供其他节点在验证记录数据来源以及完整性成功时，将记录数据添加到临时区块中。

如本申请所公开界面元素绘制方法，其中服务器节点将待绘制的界面元素对应的绘制数据形成记录数据，记录数据中携带数字签名以表示数据的来源，将记录数据发送到区块链系统中的其他节点；其他节点如其他服务器或移动终端在验证记录数据来源以及完整性成功时，可获取到绘制数据，进而移动终端可在页面上完成界面元素的绘制；其中多个服务器、移动终端可组成一区块链系统，而服务器、移动终端为区块链系统上的节点。

请参阅图2，图2是根据一示例性实施例示出的一种界面元素绘制方法的流程图。该方法可以应用于图1所示的实施环境，并由图1所示实施例环境中的移动终端100具体执行。该界面元素绘制方法可以包括步骤S110至步骤S150，详细介绍如下：

S110、对页面中待绘制的界面元素对应的绘制数据进行解析，得到界面元素的位置信息。

可以理解的是，页面中包括多个界面元素，每个界面元素会对应一个绘制数据，其中界面元素包括带曲线、圆弧、圆角的UI元素，如用户头像、界面控件；在本申请的一个实施例中，通过对界面元素对应的绘制数据进行解析，得到界面元素的位置信息，该位置信息用于指定该界面元素在页面中的位置；其中界面元素的位置信息包括该界面元素相对于页面的位置信息，即界面元素在页面中的显示位置，如界面元素距离页面顶部top，底部bottom，左侧left和右侧right的距离，还包括该界面元素相对于其他界面元素的位置信息，如图3所示，页面中包括多个界面元素(如最下行带曲线的控件和中间区域的头像)、内容图片(如四个拉琴的演奏家)和文字，界面元素包括一界面元素用户头像31，还包括另一界面元素应用头像32，则两界面元素的位置信息为用户头像31位于应用头像32的下方。

在本申请的一个示例中，移动终端接收服务器发送的绘制数据，即服务器先确定好界面元素的绘制数据，由移动终端来绘制界面元素的效果；在另一示例中，可以由用户确定界面元素的绘制数据；在此并不进行限定。

S120、根据位置信息为界面元素建立背景视图，背景视图用于承载绘制的界面元素。

本实施例中，背景视图相当于画布，在画布上绘制界面元素；由于确定出界面元素的位置信息，可以基于位置信息为界面元素建立背景视图，则背景视图的位置信息与界面元素的位置信息对应，在一示例中，建立的背景视图可以是一个规则形状，如矩形，圆形等，背景视图也可以是不规则形状，在此不进行限定。

S130、根据背景视图设置二维坐标系，根据背景视图的尺寸和界面元素的宽度信息确定二维坐标系内的点坐标，并对二维坐标系内的点坐标进行二维遍历。

在本申请的一个实施例中，基于背景视图设置二维坐标系，二维坐标系指的是在同一个平面上互相垂直且有公共原点的两条数轴构成平面直角坐标系，具体基于背景视图设置二维坐标系的原点，该二维坐标系中包含有多个点坐标，根据背景视图的尺寸和界面元素的宽度信息确定点坐标的横坐标值和纵坐标值，背景视图的尺寸包括背景视图的长和宽，界面元素的宽度信息包括界面元素的最大宽度，在一些示例中，该宽度信息还可以界面元素的均值宽度，其可以根据实际需求进行灵活调整。

可以理解的是，二维遍历指的是二维数组的遍历，一维数组存放元素，则二维数组存放一维数组；二维数组的遍历是遍历一维数组，然后遍历每个一维数组的元素；本实施例中对二维坐标系的点坐标进行二维遍历，则遍历点坐标，然后遍历每个坐标的坐标值。

S140、在对二维坐标系内的点坐标进行二维遍历的过程中，对遍历到的点坐标进行插值计算以得到待绘制点。

在本实施例中，在对二维坐标系内的点坐标进行二维遍历的过程中，会遍历到至少一个点坐标，对至少一个点坐标的横坐标值和纵坐标值进行插值计算，得到待绘制点，该待绘制点也位于二维坐标系内。

S150、对待绘制点进行渲染处理，以在页面中绘制界面元素。

可以理解的是，本实施例中可以得到多个待绘制点，通过对二维坐标系内的多个待绘制点进行渲染处理，以在页面中绘制界面元素，则该界面元素会经过各待绘制点。

在本申请的一个实施例中，绘制数据包括界面元素对应的背景视图的顶点，当背景视图是一个规则矩形，背景视图的顶点即为规则矩形的四个角的顶点；当界面元素为带曲线、圆弧、圆角时，则绘制数据还包括界面元素的圆角半径。

图4是图2所示实施例中的步骤S110在一示例性实施例中的流程图。如图4所示，得到界面元素的位置信息的过程包括步骤S111至步骤S113，详细介绍如下：

S111、对背景视图的顶点进行索引，以确定界面元素对应的背景视图的位置区域。

由于获知了背景视图的顶点，对背景视图的顶点进行索引，即页面中包含有各个点，在页面中对背景视图的顶点进行索引，确定背景视图的顶点在页面中的位置，通过确定出在页面的位置，以确定界面元素对应的背景视图在页面中的位置区域。

S112、根据界面元素的圆角半径从位置区域中确定背景视图的尺寸。

由于背景视图用于承载界面元素，为了避免背景视图在页面中占用区域的浪费，界面元素的显示区域与背景视图的尺寸应相适应；当获知出界面元素的圆角半径之后，从位置区域中标记出与界面元素的圆角半径相适应的显示区域，当背景视图为规则矩形时，则可确定显示区域的长和宽，将其作为背景视图的尺寸。

S113、将背景视图的尺寸所对应的位置作为界面元素的位置信息。

在本申请的一个实施例中，当从位置区域中确定出背景视图的尺寸之后，可获知背景视图的尺寸对应的位置，将尺寸对应的位置作为界面元素的位置信息，即界面元素相对于页面的位置信息；需要说明的是，当两个界面元素对应的位置信息存在重复，根据各界面元素对应的背景视图的尺寸大小确定两个界面元素的相对位置，例如界面元素1和界面元素2的位置均为页面的区域a中，但界面元素1的背景视图1的尺寸大于界面元素2的背景视图2的尺寸，为了不遮挡界面元素2，则在区域a中，界面元素2位于界面元素1的上方。

本实施例中，通过获取的绘制数据中的背景视图的顶点确定背景视图的位置区域，进一步通过界面元素的圆角半径确定背景视图的尺寸，以保证背景视图与界面元素相适应，保证背景视图在页面中占用区域的合理规划，进而可确定出界面元素的位置，便于后续建立背景视图。

图5是图2所示实施例中的步骤S130在一示例性实施例中的流程图。如图5所示，包括步骤S131至步骤S133，详细介绍如下：

S131、以背景视图的左上角为原点建立二维坐标系，二维坐标系的横轴的正方向为水平向右，二维坐标系的纵轴的正方向为垂直向下。

在本申请的一个实施例中，背景视图为规则矩形，则以规则矩形的左上角为原点建立二维坐标系，二维坐标系的横轴的正方向为水平向右，纵轴的正方向为垂直向下，即以规则矩形的长所在方向为横轴方向，以规则矩形的宽所在方向为纵轴方向。

S132、根据背景视图的尺寸和界面元素的宽度信息在二维坐标系中确定基准点，以及确定以基准点为中心的多个控制点。

在本申请的一个实施例中，根据背景视图的长和宽、以及界面元素的最大宽在二维坐标系统中确定一基准点和多个以基准点为中心的控制点，其中多个控制点可以为3个控制点、4个控制点、5个控制点等；本实施例以4个控制点为例进行说明：假设背景视图的宽为W，高为H，界面元素的最大宽度为margin，则确定基准点p(W*0.5，0)，4个控制点为p0(0，H)、p1(W*0.5-margin，H)、p2(W*0.5+marigin，H)和p3(W，H)。

S133、将基准点和控制点放入数组中进行二维遍历。

将基准点和多个控制点放入数组中，形成二维数组，进而对二维数组进行二维遍历，如得到二维数组＝{{W*0.5，0}，{0，H}，{W*0.5-margin，H}，{W*0.5+marigin，H}，{W，H}}。

在本实施例中，基于背景视图设置二维坐标系，并在二维坐标系中通过背景视图的尺寸和界面元素的宽度信息定义点坐标，使得点坐标与背景视图和界面元素关联，提高点坐标的确定的可靠性。

在一示例中，将基准点和控制点放入数组中进行二维遍历过程包括：

对数组进行外层遍历，以获取每个控制点对应的坐标参数；根据每个控制点对应的坐标参数，对控制点进行预设次数的内层遍历，得到每个控制点的坐标值，并记录当前的内层遍历次数。

对数组进行外层遍历，即遍历有多少一维数据，遍历获取控制点的坐标参数，该坐标参数包括每个控制点的横坐标和纵坐标，如对二维数组＝{{W*0.5，0}，{0，H}，{W*0.5-margin，H}，{W*0.5+marigin，H}，{W，H}}进行2次外层遍历，每次遍历获取后面四个控制点的坐标参数，得到{0，H}，{W*0.5-margin，H}，{W*0.5+marigin，H}，{W，H}。

内层遍历即遍历每一个控制点的坐标值，如对4个控制点进行n次循环遍历，以得到每个控制点的横坐标值和纵坐标值，如当前进行i次内存遍历时，获取控制点P0的横坐标值和纵坐标值{0，H}，并记录当前的内层遍历次数i。

图6是本实施例中的步骤S140在一示例性实施例中的流程图。如图6所示，得到待绘制点包括步骤S141至步骤S142，详细介绍如下：

S141、获取在对控制点进行预设次数的内层遍历的过程中得到的每个控制点的坐标值，以及当前的内层遍历次数。

S142、根据当前的内层遍历次数以及每个控制点的坐标值进行插值计算，得到待绘制点的坐标值。

在本实施例中，在对控制点进行n次的内层遍历的过程中，得到每个控制点的坐标值，以及当前的内层遍历次数i；基于Catmull-Rom算法(一种算法，有时候我们想要物体从一个点移动到另一个点，但并不希望它沿着直线移动过去，而是稍微弯曲一点；给定一堆离散点，将该离散点进行插值，绘制的曲线经过每一个离散点)，以i/n为t值和控制点的坐标值进行立方插值函数的计算得到待绘制点的坐标值。

在一示例中，以上例的4个控制点为例进行说明。先对t进行取平方，取立方值生成t²和t³，然后根据t²和t³生成变换后的f0、f1、f2和f3：

f0＝-0.5*t³+t²-0.5*t；

f1＝1.5*t³-2.5*t²+1.0；

f2＝-1.5*t³+2.0*t²+0.5*t；

f3＝0.5*t³-0.5*t²；

则当前遍历产生的待绘制点的坐标值为：

x＝p0.x*f0+p1.x*f1+p2.x*f2+p3.x*f3；

y＝p0.y*f0+p1.y*f1+p2.y*f2+p3.y*f3；

其中，p0.x为控制点p0的横坐标值，p0.y为控制点p0的纵坐标值；p1.x为控制点p1的横坐标值，p1.y为控制点p1的纵坐标值；p2.x为控制点p2的横坐标值，p2.y为控制点p2的纵坐标值；p3.x为控制点p3的横坐标值，p3.y为控制点p3的纵坐标值。

可以理解的是，当进行n次内层遍历时，每次遍历都得到一个待绘制点的坐标值(x，y)，则总共会得到n个待绘制点的坐标值。

在本实施例中，通过二维遍历的外层循环遍历得到控制点，通过二维遍历的内层遍历得到每个控制点的坐标值，并基于当前遍历的次数i，以i/n为t值和控制点的坐标值进行立方插值函数的计算得到待绘制点的坐标值，使得待绘制点的坐标的确定全面性。

如图7所示，图7是本实施例中的步骤S150在一示例性实施例中的流程图。如图7所示，得到待绘制点包括步骤S151至步骤S153，详细介绍如下：

S151、根据背景视图的尺寸生成背景视图的图层对象；

可以理解的是，背景视图不具备显示功能，背景视图之所以能显示页面上，是因背景视图内部有一个图层对象，每个背景视图内部都有一个图层对象在背后提供内容的绘制和显示；其中图层对象是屏幕上的一个矩形区域，本实施例中根据背景视图的尺寸生成图层对象，图层对象的宽高坐标与背景视图的长宽相适应。

S152、为图层对象设置图层属性；

在本申请的一实施例种，为图层对象设置图层属性，通过图层属性可以改变背景视图的界面属性，该图层属性包括描边颜色、填充颜色(如是空心或线条则不需要填颜色)、线宽、描线开始的地方占总路径的百分比(strokeStart)和描线结束的地方占总路径的百分比(strokeEnd)中的至少一个；其中strokeStart的取值范围为[0,1]，默认为0，如起点在(0,0)，终点在(100,0)，若设置strokeStart如果为0.5的话，那么此时起点就在(50,0)；同理，strokeEnd的取值范围为[0,1]，默认为0，如起点在(0,0)，终点在(100,0)，若设置strokeEnd如果为0.5的话，那么此时终点就在(50,0)。

S153、绘制待绘制点得到路径，利用图层对象将路径渲染显示到背景视图上，得到界面元素。

可以理解的是，当存在多个待绘制点时，根据待绘制点的坐标值绘制路径，该路径会经过所有待绘制点；在一示例中，当绘制路径时，绘制的起点为p0，根据p1、p2各待绘制点的坐标值大小依次进行绘制，绘制的终点为p3；由于背景视图是不具有显示功能，因此绘制的路径是绘制到背景视图的图层对象上的，通过图层对象的图层属性将路径显示到背景视图上，得到界面元素；如图8所示，得到页面上的带有曲线的“首页”控件、“doki”控件、“个人中心”控件等界面元素。

在本实施例中，通过为背景视图的图层对象设置图层属性，丰富背景视图的界面属性，且对待绘制点进行绘制得到路径，使得路径经过所有待绘制点，通过图层对象将路径渲染显示到背景视图上，使得页面可以显示该界面元素。

在本实施例中，如图9所示，图9是本实施例中的步骤S150之后在一示例性实施例中的流程图。如图9所示，在页面中绘制界面元素之后还包括步骤S161至步骤S162，详细介绍如下：

S161、为背景视图设置不同的手势操作对应的触发事件。

可以理解的是，背景视图可以接受并处理事件，在本实施例中，可以为一个背景视图设置不同的手势操作对应的触发事件，例如点击手势操作对应页面跳转事件，滑动手势操作对应返回事件等；如图8所示，当前页面对应界面元素“VIP会员”控件，点击“首页”控件则调整到首页的界面，在“首页”控件上向左滑动则退出当前页面；当页面中存在多个背景视图时，也可以分别为不同背景视图设置不同的手势操作对应的触发事件，例如如图8中，当前页面对应界面元素“VIP会员”控件，当点击界面元素“个人中心”控件，则当前页面跳转“个人中心”对应的显示页面，点击界面元素“消息”控件，则跳转到查看消息的页面。

S162、若获取到界面元素上输入的手势操作，触发所输入的手势操作对应的触发事件。

当用户在页面上进行了手势操作，获取手势操作的操作位置，当操作位置在界面元素上时，背景视图接收手势操作，并触发所输入的手势操作对应的触发事件。

为了便于理解，如图10所示，本实施例以界面元素为曲线为示例对界面元素绘制方法进行说明。

创建TMFDrawCenter，用于接收和处理服务端返回的数据信息，管理曲线图形的绘制。其中TMFDrawCenter为新建的类，在该类下面的初始化方法中对OpenGL ES进行参数配置，包括双缓冲机制、固定流水线、24位深度缓存等，其中OpenGL ES：(OpenGL for EmbededSystem)是OpenGL(Open Graphics Library)的精简子集，是以手持和嵌入式设备为目标的高级3D图形API，如现在火爆的智能终端，支持桌面系统，还是浏览器3D图形标准WebGL的基础，支持多个平台，如桌面端的Linux、Windows，移动端的Android、iOS。

在TMFDrawCenter中通过调用函数对服务端下发的绘制数据进行解析，在TMFDrawCenter中对规则背景视图四个角的顶点进行索引，确定背景视图的位置区域，根据服务端传入的圆角半径从位置区域中确定背景视图的尺寸，进而在页面中定义视图层级中曲线的位置信息position(position用于指定一个元素在文档中的定位方式；top，right，bottom和left属性则决定了该元素的最终位置)。

根据position字段，确定需要绘制曲线位置，具体采用贝塞尔曲线对曲线进行绘制；其中需要先通过TMFDrawCenter检测到页面的布局是否完成，TMFDrawCenter检测到布局完成信息时，表示页面布局完成，对当前页面的subviews(子视图)再次进行遍历，遍历从服务端接收到的数据，并在页面中添加一个View作为绘制贝塞尔曲线的背景视图，进而根据背景视图定义点坐标。具体的，定义五个类型为CGPoint的基础点p0、p1、p、p2、p3，(CGPoint类型可以理解为一个结构体，带有x和y值，以背景视图左上角为原点，向右为x正半轴，向下为y的正半轴建立的二维坐标系)，设背景视图的宽为W，高为H，圆弧左右最大宽度为margin；p0(0，H)、p1(W*0.5-margin，H)、p(W*0.5，0)、p2(W*0.5+marigin，H)、p3(W，H)。通过调用path(Path是用来封装几何学路径的一个类)的moveToPoint方法(moveToPoint:去设置初始线段的起点)传入p0(表示即将开始绘制)。

通过Catmull-Rom算法对点坐标进行插值计算，以计算绘制路径。具体的，将这五个点包装成NSValue对象(NSValue对象是用来存储一个C或者Objective－C数据的简单容器；它可以保存任意类型的数据，比如int，float，char，当然也可以是指pointers,structures,and object ids；NSValue类的目标就是允许以上数据类型的数据结构能够被添加到集合里)放入数组中进行二维遍历，外层遍历2次，每次遍历获取后面4个点(4个点分别为p0、p1、p2、p3)进行Catmull-Rom算法计算中心点，再对内部的4个点进行n次循环遍历(n可以预设，默认值为100)，设二维遍历中当前次数为i，以i/n为t值进行立方插值函数的计算得到需要绘制的点，计算过程如下：

1.对t进行取平方，取立方值生成t²和t³；

2.根据t²和t³生成变换后的：

f0＝-0.5*t³+t²-0.5*t；

f1＝1.5*t³-2.5*t²+1.0；

f2＝-1.5*t³+2.0*t²+0.5*t；

f3＝0.5*t³-0.5*t²；

3.对传入的p0～p3进行转化生成x和y：

x＝p0.x*f0+p1.x*f1+p2.x*f2+p3.x*f3；

y＝p0.y*f0+p1.y*f1+p2.y*f2+p3.y*f3；

通过CGPointMake函数(用于输出点的x和y值)将x和y生成当次遍历产生的待绘制点。调用path的addLineToPoint函数生成背景视图的对象图层layer，设置layer的宽高坐标为背景视图大小，设置描边颜色、填充颜色、线宽、strokeStart和strokeEnd。在通过OpenGL ES绘制待绘制点时，先清除OpenGL ES上次绘制的颜色缓存与模板缓存，然后调用OpenGL ES中的glDrawArrays函数(提供绘制功能；当采用顶点数组方式绘制图形时，使用该函数，该函数根据顶点数组中的坐标数据和指定的模式，进行绘制)在对象图层layer绘制对应待绘制点，设置layer的视口大小后，进行视图模型变换得到图像；该图像为绘制的曲线对应的图像；如图11所示，通过对待绘制点进行绘制得到股票曲线图像。

给背景视图添加tap手势，对手势的实现传入的block事件，该block事件表示对应tap手势所触发的触发事件，并重写pointInside函数(判断当前的点击或者触摸事件发生的位置是否在当前的view中)，对用户的点击区域进行位置计算，当发现点击的区域不在绘制的曲线时，将pointInside函数返回NO，否则调用父类的pointInside函数，接收用户的点击事件，触发点击事件的触发事件。

值得注意的是，目前不同端(iOS和安卓)的设备上层的API使用是不一样的，在iOS和安卓对圆弧、圆角、曲线等页面UI元素绘制需要采用不同的API；而本示例提供的界面元素绘制方法，通过创建TMFDrawCenter，可以在不同的操作系统中实现界面元素的绘制，以解决目前移动端曲线的绘制API需要两套；

目前在圆角、圆弧较多的页面中使用Quartz2D和SurfaceFlinger框架可能会造成离屏渲染；本示例提供的界面元素绘制方法，是通过Catmull-Rom算法在CPU层面计算出曲线绘制点的位置，利用OpenGL ES进行渲染绘制完成，以解决GPU的离屏渲染，且二维坐标系内的点坐标与背景视图和界面元素的宽度信息关联，通过对点坐标进行二维遍历，保证插值计算得到的待绘制点的准确性和全面性，进而对待绘制点进行渲染处理，以在页面中绘制界面元素，使得绘制的界面元素能符合想要的效果，提升绘制曲线的性能。

以下介绍本申请的装置实施例，可以用于执行本申请上述实施例中的界面元素绘制方法。对于本申请装置实施例中未披露的细节，请参照本申请上述的界面元素绘制方法的实施例。

图12示出了根据本申请的一个实施例的界面元素绘制装置的框图，界面元素绘制装置包括解析模块1210、建立模块1220、遍历模块1230、插值模块1240和绘制模块1250；

解析模块1210，用于对页面中待绘制的界面元素对应的绘制数据进行解析，得到界面元素的位置信息；

建立模块1220，用于根据位置信息为界面元素建立背景视图，背景视图用于承载绘制的界面元素；

遍历模块1230，根据背景视图设置二维坐标系，根据背景视图的尺寸和界面元素的宽度信息确定二维坐标系内的点坐标，并对二维坐标系内的点坐标进行二维遍历；

插值模块1240，用于在对二维坐标系内的点坐标进行二维遍历的过程中，对遍历到的点坐标进行插值计算以得到待绘制点；

绘制模块1250，用于对待绘制点进行渲染处理，以在页面中绘制界面元素。

在本申请的一个实施例中，基于前述方案，绘制数据包括界面元素对应的背景视图的顶点，以及界面元素的圆角半径，解析模块1210被配置为对背景视图的顶点进行索引，以确定界面元素对应的背景视图的位置区域；根据界面元素的圆角半径从位置区域中确定背景视图的尺寸；将背景视图的尺寸对应的位置作为界面元素的位置信息。

在本申请的一个实施例中，基于前述方案，遍历模块1230被配置为以背景视图的左上角为原点建立二维坐标系，二维坐标系的横轴的正方向为水平向右，二维坐标系的纵轴的正方向为垂直向下；根据背景视图的尺寸和界面元素的宽度信息在二维坐标系中确定基准点，以及确定以基准点为中心的多个控制点；将基准点和控制点放入数组中进行二维遍历。

在本申请的一个实施例中，基于前述方案，遍历模块1230对数组进行外层遍历，以获取每个控制点对应的坐标参数，坐标参数包括横坐标值和纵坐标值；根据每个控制点对应的坐标参数，对控制点进行预设次数的内层遍历，得到每个控制点的坐标值，并记录当前的内层遍历次数。

在本申请的一个实施例中，基于前述方案，插值模块1240获取在对控制点进行预设次数的内层遍历的过程中得到的每个控制点的坐标值，以及当前的内层遍历次数；根据当前的内层遍历次数以及每个控制点的坐标值进行插值计算，得到待绘制点的坐标值。

在本申请的一个实施例中，基于前述方案，绘制模块1250根据背景视图的尺寸生成背景视图的图层对象；为图层对象设置图层属性，图层属性包括描边颜色、填充颜色、线宽、描线开始的地方占总路径的百分比和描线结束的地方占总路径的百分比中的至少一个；绘制待绘制点得到路径，利用图层对象将路径渲染显示到背景视图上，得到界面元素。

在本实施例中，界面绘制装置还包括触发模块，触发模块被配置为为背景视图设置不同的手势操作对应的触发事件；若获取到界面元素上输入的手势操作，触发所输入的手势操作对应的触发事件。

本实施例提供的界面绘制装置，对页面中待绘制的界面元素对应的绘制数据进行解析，得到界面元素的位置信息，进而可根据界面元素的位置信息建立背景视图，背景视图用于承载绘制的界面元素，可以确定待绘制的界面元素在页面中的显示位置，进而基于背景视图设置二维坐标系，并在二维坐标系中通过背景视图的尺寸和界面元素的宽度信息定义点坐标，在对点坐标的二维遍历过程中，对遍历到的点坐标进行插值计算得到待绘制点；使得点坐标与背景视图和界面元素的宽度信息关联，通过对点坐标进行二维遍历，保证插值计算得到的待绘制点的准确性和全面性，进而对待绘制点进行渲染处理，以在页面中绘制界面元素，使得绘制的界面元素能符合想要的效果。

需要说明的是，上述实施例所提供的装置与上述实施例所提供的方法属于同一构思，其中各个模块和单元执行操作的具体方式已经在方法实施例中进行了详细描述，此处不再赘述。

本申请的实施例还提供了一种电子设备，包括一个或多个处理器，以及存储装置，其中，存储装置，用于存储一个或多个程序，当一个或多个被一个或多个处理器执行时，使得所述电子设备实现如下所述的界面元素绘制方法：对页面中待绘制的界面元素对应的绘制数据进行解析，得到界面元素的位置信息；根据位置信息为界面元素建立背景视图，背景视图用于承载绘制的界面元素；根据背景视图设置二维坐标系，根据背景视图的尺寸和界面元素的宽度信息确定二维坐标系内的点坐标，并对二维坐标系内的点坐标进行二维遍历；在对二维坐标系内的点坐标进行二维遍历的过程中，对遍历到的点坐标进行插值计算以得到待绘制点；对待绘制点进行渲染处理，以在页面中绘制界面元素；具体请参加上述实施例，在此不再一一赘述。

图13示出了适于用来实现本申请实施例的电子设备的计算机系统的结构示意图。

需要说明的是，图13示出的电子设备的计算机系统1300仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

如图13所示，计算机系统1300包括中央处理单元(Central Processing Unit，CPU)1301，其可以根据存储在只读存储器(Read-Only Memory，ROM)1302中的程序或者从储存部分1308加载到随机访问存储器(Random Access Memory，RAM)1303中的程序而执行各种适当的动作和处理，例如执行上述实施例中所述的方法。在RAM 1303中，还存储有系统操作所需的各种程序和数据。CPU 1301、ROM 1302以及RAM 1303通过总线1304彼此相连。输入/输出(Input/Output，I/O)接口1305也连接至总线1304。

以下部件连接至I/O接口1305：包括键盘、鼠标等的输入部分1306；包括诸如阴极射线管(Cathode Ray Tube，CRT)、液晶显示器(Liquid Crystal Display，LCD)等以及扬声器等的输出部分1307；包括硬盘等的储存部分1308；以及包括诸如LAN(Local AreaNetwork，局域网)卡、调制解调器等的网络接口卡的通信部分1309。通信部分1309经由诸如因特网的网络执行通信处理。驱动器1310也根据需要连接至I/O接口1305。可拆卸介质1311，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器1310上，以便于从其上读出的计算机程序根据需要被安装入储存部分1308。

特别地，根据本申请的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本申请的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的计算机程序。在这样的实施例中，该计算机程序可以通过通信部分1309从网络上被下载和安装，和/或从可拆卸介质1311被安装。在该计算机程序被中央处理单元(CPU)1301执行时，执行本申请的系统中限定的各种功能。

需要说明的是，本申请实施例所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(Erasable Programmable Read Only Memory，EPROM)、闪存、光纤、便携式紧凑磁盘只读存储器(Compact Disc Read-Only Memory，CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本申请中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本申请中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的计算机程序。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的计算机程序可以用任何适当的介质传输，包括但不限于：无线、有线等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本申请各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。其中，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本申请实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现，所描述的单元也可以设置在处理器中。其中，这些单元的名称在某种情况下并不构成对该单元本身的限定。

本申请的另一方面还提供了一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现如前所述的方法。该计算机可读存储介质可以是上述实施例中描述的电子设备中所包含的，也可以是单独存在，而未装配入该电子设备中。

本申请的另一方面还提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述各个实施例中提供如下方法：对页面中待绘制的界面元素对应的绘制数据进行解析，得到界面元素的位置信息；根据位置信息为界面元素建立背景视图，背景视图用于承载绘制的界面元素；根据背景视图设置二维坐标系，根据背景视图的尺寸和界面元素的宽度信息确定二维坐标系内的点坐标，并对二维坐标系内的点坐标进行二维遍历；在对二维坐标系内的点坐标进行二维遍历的过程中，对遍历到的点坐标进行插值计算以得到待绘制点；对待绘制点进行渲染处理，以在页面中绘制界面元素；具体请参加上述实施例，在此不再一一赘述。

应当注意，尽管在上文详细描述中提及了用于动作执行的设备的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本申请的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。

通过以上的实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本申请实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、触控终端、或者网络设备等)执行根据本申请实施方式的方法。

本领域技术人员在考虑说明书及实践这里公开的实施方式后，将容易想到本申请的其它实施方案。本申请旨在涵盖本申请的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本申请的一般性原理并包括本申请未公开的本技术领域中的公知常识或惯用技术手段。

上述内容，仅为本申请的较佳示例性实施例，并非用于限制本申请的实施方案，本领域普通技术人员根据本申请的主要构思和精神，可以十分方便地进行相应的变通或修改，故本申请的保护范围应以权利要求书所要求的保护范围为准。

Claims (11)

1.一种界面元素绘制方法，其特征在于，所述方法包括：

对页面中待绘制的界面元素对应的绘制数据进行解析，得到所述界面元素的位置信息；

根据所述位置信息为所述界面元素建立背景视图，所述背景视图用于承载绘制的所述界面元素；

根据所述背景视图设置二维坐标系，根据所述背景视图的尺寸和所述界面元素的宽度信息确定所述二维坐标系内的点坐标，并对所述二维坐标系内的点坐标进行二维遍历；

在对所述二维坐标系内的点坐标进行二维遍历的过程中，对遍历到的点坐标进行插值计算以得到待绘制点；

对所述待绘制点进行渲染处理，以在所述页面中绘制所述界面元素。

2.根据权利要求1所述的方法，其特征在于，所述绘制数据包括所述界面元素对应的所述背景视图的顶点，以及所述界面元素的圆角半径；所述对页面中待绘制的界面元素对应的绘制数据进行解析，得到所述界面元素的位置信息，包括：

对所述背景视图的顶点进行索引，以确定所述界面元素对应的所述背景视图的位置区域；

根据所述界面元素的圆角半径从所述位置区域中确定所述背景视图的尺寸；

将所述背景视图的尺寸对应的位置作为所述界面元素的位置信息。

3.根据权利要求1所述的方法，其特征在于，所述根据所述背景视图设置二维坐标系，根据所述背景视图的尺寸和所述界面元素的宽度信息确定所述二维坐标系内的点坐标，并对所述二维坐标系内的点坐标进行二维遍历，包括：

以所述背景视图的左上角为原点建立二维坐标系，所述二维坐标系的横轴的正方向为水平向右，所述二维坐标系的纵轴的正方向为垂直向下；

根据所述背景视图的尺寸和所述界面元素的宽度信息在所述二维坐标系中确定基准点，以及确定以所述基准点为中心的多个控制点；

将所述基准点和控制点放入数组中进行二维遍历。

4.根据权利要求3所述的方法，其特征在于，所述将所述基准点和控制点放入数组中进行二维遍历包括：

对所述数组进行外层遍历，以获取每个控制点对应的坐标参数，所述坐标参数包括横坐标值和纵坐标值；

根据每个控制点对应的坐标参数，对控制点进行预设次数的内层遍历，得到每个控制点的坐标值，并记录当前的内层遍历次数。

5.根据权利要求1所述的方法，其特征在于，所述在对所述二维坐标系内的点坐标进行二维遍历的过程中，对遍历到的点坐标进行插值计算以得到待绘制点，包括：

获取在对控制点进行预设次数的内层遍历的过程中得到的每个控制点的坐标值，以及当前的内层遍历次数；

根据当前的内层遍历次数以及每个控制点的坐标值进行插值计算，得到待绘制点的坐标值。

6.根据权利要求1所述的方法，其特征在于，所述对所述待绘制点进行渲染处理，以在所述页面中绘制所述界面元素，包括：

根据所述背景视图的尺寸生成所述背景视图的图层对象；

为所述图层对象设置图层属性，所述图层属性包括描边颜色、填充颜色、线宽、描线开始的地方占总路径的百分比和描线结束的地方占总路径的百分比中的至少一个；

绘制所述待绘制点得到路径，利用所述图层对象将所述路径渲染显示到所述背景视图上，得到所述界面元素。

7.根据权利要求1-6任一项所述的方法，其特征在于，在所述对所述待绘制点进行渲染处理，以在所述页面中绘制所述界面元素之后，所述方法还包括：

为所述背景视图设置不同的手势操作对应的触发事件；

若获取到所述界面元素上输入的手势操作，触发所输入的手势操作对应的触发事件。

8.一种界面元素绘制装置，其特征在于，包括：

解析模块，用于对页面中待绘制的界面元素对应的绘制数据进行解析，得到所述界面元素的位置信息；

建立模块，用于根据所述位置信息为所述界面元素建立背景视图，所述背景视图用于承载绘制的所述界面元素；

遍历模块，根据所述背景视图设置二维坐标系，根据所述背景视图的尺寸和所述界面元素的宽度信息确定所述二维坐标系内的点坐标，并对所述二维坐标系内的点坐标进行二维遍历；

插值模块，用于在对所述二维坐标系内的点坐标进行二维遍历的过程中，对遍历到的点坐标进行插值计算以得到待绘制点；

绘制模块，用于对所述待绘制点进行渲染处理，以在所述页面中绘制所述界面元素。

9.一种电子设备，其特征在于，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，当所述一个或多个被所述一个或多个处理器执行时，使得所述电子设备实现如权利要求1-7任一项所述的方法。

10.一种计算机可读存储介质，其特征在于，其上存储有计算机可读指令，当所述计算机可读指令被计算机的处理器执行时，使计算机执行权利要求1-7中的任一项所述的方法。

11.一种计算机程序产品，包括计算机指令，其特征在于，所述计算机指令被处理器执行时实现权利要求1-7中的任一项所述的方法。

Images