CN116501215A - 时间线滚动列表的渲染方法及装置 - Google Patents

Abstract

本申请提供了一种时间线滚动列表的渲染方法及装置。该方法包括：获取待渲染的事件数据；根据用于标记事件数据的图形参数，确定标记图形和标记图形的位置信息，以及确定用于连接相邻标记图形的标记线和标记线的位置信息；根据该事件数据，确定各个显示标签对应的待显示信息；根据显示信息的排列方式，确定待显示信息的位置信息；基于标记图形、标记图形的位置信息、标记线、标记线的位置信息、各个显示标签对应的待显示信息、待显示信息的位置信息、以及当前的时间信息，渲染时间线滚动列表中的部分显示区域。本申请可以将该时间线滚动列表的渲染方法直接供操作系统使用，无需与第三方其他功能进行绑定。

Description

时间线滚动列表的渲染方法及装置

技术领域

本申请涉及时间线滚动列表的渲染技术领域，尤其涉及一种时间线滚动列表的渲染方法及装置。

背景技术

目前，时间线功能大多都是被集成在第三方应用程序中，例如，电商应用程序中的时间线功能被应用在物流信息的查询场景。当前市面上并没有针对操作系统本身开发出一个可单独集成的时间线模块，以供操作系统使用或供外部使用。这样导致没有单纯关于时间线功能供操作系统使用，现有的时间线功能总是和其他功能绑定使用，无法拆分，因此集成困难。

发明内容

有鉴于此，本申请实施例提供了一种时间线滚动列表的渲染方法、装置、电子设备及计算机可读存储介质，以解决相关技术中因没有单纯关于时间线功能供操作系统使用，导致现有的时间线功能总是和其他功能绑定使用，无法拆分，因此集成困难的问题。

本申请实施例的第一方面，提供了一种时间线滚动列表的渲染方法，该方法包括：获取待渲染的事件数据；根据用于标记事件数据的图形参数，确定标记图形和标记图形的位置信息，以及确定用于连接相邻标记图形的标记线和标记线的位置信息；根据该事件数据，确定各个显示标签对应的待显示信息；根据显示信息的排列方式，确定待显示信息的位置信息；基于标记图形、标记图形的位置信息、标记线、标记线的位置信息、各个显示标签对应的待显示信息、待显示信息的位置信息、以及当前的时间信息，渲染时间线滚动列表中的部分显示区域。

本申请实施例的第二方面，提供了一种时间线滚动列表的渲染装置，该装置包括：获取模块，用于获取待渲染的事件数据；第一确定模块，用于根据用于标记事件数据的图形参数，确定标记图形和标记图形的位置信息，以及确定用于连接相邻标记图形的标记线和标记线的位置信息；第二确定模块，用于根据事件数据，确定各个显示标签对应的待显示信息；第三确定模块，用于根据显示信息的排列方式，确定待显示信息的位置信息；渲染模块，用于基于标记图形、标记图形的位置信息、标记线、标记线的位置信息、各个显示标签对应的待显示信息、待显示信息的位置信息、以及当前的时间信息，渲染时间线滚动列表中的部分显示区域。

本申请实施例的第三方面，提供了一种电子设备，包括存储器、处理器以及存储在存储器中并且可在处理器上运行的计算机程序，该处理器执行计算机程序时实现上述方法的步骤。

本申请实施例的第四方面，提供了一种计算机可读存储介质，该计算机可读存储介质存储有计算机程序，该计算机程序被处理器执行时实现上述方法的步骤。

本申请实施例与现有技术相比存在的有益效果至少包括：本申请实施例可以获取待渲染的事件数据，根据用于标记事件数据的图形参数，确定标记图形和标记图形的位置信息，以及确定用于连接相邻标记图形的标记线和标记线的位置信息，然后根据该事件数据，确定各个显示标签对应的待显示信息；根据显示信息的排列方式，确定待显示信息的位置信息，并基于标记图形、标记图形的位置信息、标记线、标记线的位置信息、各个显示标签对应的待显示信息、待显示信息的位置信息、以及当前的时间信息，渲染时间线滚动列表中的部分显示区域。以此方式可以将不同时间的事件数据通过标记图形和标记线串联成时间线滚动列表，在操作系统的用户界面上展示渲染后的时间线滚动列表。本申请可以将该时间线滚动列表的渲染方法直接供操作系统使用，无需与第三方其他功能进行绑定，这样该方法的时间线功能可以很容易被集成在操作系统。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。

图1是本申请实施例的一种时间线滚动列表的渲染方法的流程图；

图2是本申请实施例的确定标记图形和标记图形的位置信息的步骤的流程图；

图3是本申请实施例的另一种时间线滚动列表的渲染方法的流程图；

图4是本申请实施例的又一种时间线滚动列表的渲染方法的流程图；

图5是本申请实施例的确定用于连接相邻标记图形的标记线和标记线的位置信息的步骤的流程图；

图6是本申请实施例的一种时间线滚动列表的渲染装置的框图；

图7是本申请实施例的一种电子设备的结构示意图。

具体实施方式

以下描述中，为了说明而不是为了限定，提出了诸如特定系统结构、技术之类的具体细节，以便透彻理解本申请实施例。然而，本领域的技术人员应当清楚，在没有这些具体细节的其它实施例中也可以实现本申请。在其它情况中，省略对众所周知的系统、装置、电路以及方法的详细说明，以免不必要的细节妨碍本申请的描述。

为了方便理解本申请的技术方案，下面对一些专业术语作出了专业解释，具体如下：

UITableView：IOS中一种可以纵向滚动的、且每一行代表一条数据的滚动列表。

UITableViewCell：在UITableView中代表一行数据的控件。

CAShapeLayer：IOS一种专门用来渲染图形的控件。

CGFloat：IOS表示浮点型的数据类型。

UIColor：IOS表示颜色的类型。

UILabel：用来显示文本内容的标签控件。

UIStackView：IOS中用来布局控件的控件。

UIBezierPath：贝塞尔曲线，IOS中用来显示形状的路径对象。

本申请在实现时间线滚动列表的渲染方法之前，需要配置该时间线滚动列表的渲染方法涉及的一系列参数。下面以标记图形为圆形举例，配置过程具体如下：

1.先创建一个用于展示所有时间线内容的单元格TimeLineCell，并使该单元格继承于UITableViewCell，该TimeLineCell用于存储该时间线滚动列表的渲染方法涉及的一系列参数。

2.配置该时间线滚动列表的渲染方法涉及的图形参数。例如，属性名称、属性类型、属性用途，如下表1所示：

3.配置用于显示具体内容的显示标签。这样可以将对应时间线的标题、摘要、具体描述等内容的呈现出来，如下表2所示：

4.配置通过贝塞尔曲线绘制圆形路径涉及的一些图形参数。由于贝塞尔曲线画圆形实际上是通过对正方形设置相应圆角而得到的，例如，首先得先画出一个正方形，并计算正方形的4个顶点，顶点的具体信息，如下表3所示：

正方形的顶点坐标说明
		坐标	位置说明
(circleX，circleY)	起点(左上)
		(circleX+circleDiameter，circleY)	右上
(circleX+circleDiameter，circleY+circleDiameter)	右下
		(circleX，circleY+circleDiameter)	左下

5.配置结构体模型TimeLineModel，该模型用于存储用户通过移动端在操作系统界面输入的事件数据。为该模型配置三个属性，分别为title，des与info，如下表4所示：

本申请中，在配置完单元格TimeLineCell后，移动端操作系统想要使用单元格TimeLineCell，可以在创建UITableView时将单元TimeLineCell注册为移动端操作系统的复用cell，并通过setData(model:)将自定义数据上传至移动端操作系统即可，在这种情况下，移动端操作系统可以执行本申请的时间线滚动列表的渲染方法。

下面将结合附图详细说明根据本申请实施例的时间线滚动列表的渲染方法和装置。

图1是本申请实施例的一种时间线滚动列表的渲染方法的流程图。本申请实施例提供的方法可以由任意具备计算机处理能力的电子设备执行。例如，可以由该电子设备的操作系统执行。

如图1所示，该方法包括步骤S110～步骤S150。

在步骤S110中，获取待渲染的事件数据。

在步骤S120中，根据用于标记事件数据的图形参数，确定标记图形和该标记图形的位置信息，以及确定用于连接相邻标记图形的标记线和该标记线的位置信息。

在步骤S130中，根据事件数据，确定各个显示标签对应的待显示信息。

在步骤S140中，根据显示信息的排列方式，确定待显示信息的位置信息。

在步骤S150中，基于标记图形、标记图形的位置信息、标记线、标记线的位置信息、各个显示标签对应的待显示信息、待显示信息的位置信息、以及当前的时间信息，渲染时间线滚动列表中的部分显示区域。

该方法可以获取待渲染的事件数据，根据用于标记事件数据的图形参数，确定标记图形和标记图形的位置信息，以及确定用于连接相邻标记图形的标记线和标记线的位置信息，然后根据该事件数据，确定各个显示标签对应的待显示信息；根据显示信息的排列方式，确定待显示信息的位置信息，并基于标记图形、标记图形的位置信息、标记线、标记线的位置信息、各个显示标签对应的待显示信息、待显示信息的位置信息、以及当前的时间信息，渲染时间线滚动列表中的部分显示区域。以此方式可以将不同时间的事件数据通过标记图形和标记线串联成时间线滚动列表，在操作系统的用户界面上展示渲染后的时间线滚动列表。本申请可以将该时间线滚动列表的渲染方法直接供操作系统使用，无需与第三方其他功能进行绑定，这样该方法的时间线功能可以很容易被集成在操作系统。

在一些实施例中，该时间线滚动列表的渲染方法可以应用于操作系统，例如IOS系统。该时间线滚动列表的渲染方法的技术方案可以被IOS系统直接使用，即该时间线滚动列表的渲染方法的实现逻辑可以被集成在IOS系统，IOS系统可以复用该时间线滚动列表的渲染方法的实现逻辑，以此可以渲染出时间线滚动列表，该时间线滚动列表展示的事件数据通过标记图形和标记线串联起来。

在一些实施例中，上述待渲染的事件数据可以是用户在移动端操作系统界面上输入的文本数据。该文本数据可以包括标题信息、摘要信息、具体描述等等。例如，用户在移动端操作系统界面上展示的多个输入框输入对应的内容，例如，在标题输入框中输入标题，在摘要输入框中输入摘要，在描述输入框中输入具体描述。当用户输入完成点击确定按钮后，对应的内容可以被存储到上述表4中。

在一些实施例中，根据事件数据，确定各个显示标签对应的待显示信息。例如，根据标签映射表中的映射关系，可以确定出各个显示标签对应的待显示信息。参考上述表2和表4，在渲染各个显示标签对应的待显示信息时，可以通过单元格TimeLineCell创建方法setData(model:)，将外部TimeLineModel模型传进来，然后分别赋值，具体过程为：将model的title赋值给TimeLineCell的titleLabel的text属性；将model的des赋值给TimeLineCell的desLabel的text属性；将model的info赋值给TimeLineCell的lineInfoLabel的text属性。这样可以完成对时间线所有显示标签的数据填充。

在一些实施例中，根据显示信息的排列方式，确定待显示信息的位置信息，包括：根据显示信息的排列方向，确定各个待显示信息之间的排列方向为纵向排列；根据显示信息沿排列方向排列的间距，确定各个待显示信息之间的排列间距为等高间距；根据显示信息的对齐方式，确定各个待显示信息之间的对齐方式为垂直于该排列方向进行横向充满。

参考上述表2的参数，stackView控件是一种布局控件，在titleLabel、descriptionLabel与lineInfoLabel配置完成后，将它们通过stackView控件的addArrangedSubview方法设置为需要被布局的控件后，根据stackView控件的布局设置可以进行自动布局。由于时间线不可能是水平排列的，而是纵向排列的，依据这一原则，stackView控件的布局设置的具体步骤为：设置axis(排列方向)为vertical(纵向)，这样stackView控件的所有子控件可以自上而下纵向排列；将distribution(沿排列方向的排列方式)设置为fillEqually(等高)，这样在纵向排列上，所有控件的高度会保持一致；最后将alignment(对齐方式，其方向与axis方向垂直)设置为fill(横向充满)，这样stackView的子控件在水平方向上可以充满stackView而不会留下空白。

在一些实施例中，方法还包括：根据图形参数中图形颜色和事件数据中选中的颜色，确定标记图形的填充颜色；根据图形参数中线条颜色和事件数据中选中的颜色，确定标记线的填充颜色；以及根据图形参数中线条宽度事件数据中选中的宽度，确定标记线的宽度。本申请实施例中，用户在移动端操作系统的界面上可以根据自己的偏好选择颜色。待用户点击确认选择的颜色后，响应该操作可以根据选中颜色与上述表1配置的颜色是否匹配，如果匹配根据用户选中的颜色渲染图形和线条。用户还可以在移动端操作系统的界面上可以根据自己的偏好选择线条的宽度。待用户点击确认选择的线条的宽度后，响应该操作可以根据选中线条的宽度与上述表1配置的线条宽度是否匹配，如果匹配根据用户选中的线条的宽度渲染线条。

图2是本申请实施例的确定标记图形和标记图形的位置信息的步骤的流程图。

如图2所示，上述步骤S120中的确定标记图形和标记图形的位置信息可以包括步骤S210和步骤S220。

在步骤S210中，根据图形尺寸、图形坐标、以及图形路径，确定上述标记图形。

在步骤S220中，根据图形尺寸和图形坐标，确定上述标记图形的位置信息。

该方法可以根据图形尺寸、图形坐标、以及图形路径，确定上述标记图形，然后根据图形尺寸和图形坐标，确定上述标记图形的位置信息，这样后续根据标记图形的位置信息可以将该标记图形渲染到时间线滚动列表的对应位置。

在一些实施例中，通过用于渲染图形的控件，根据图形尺寸、图形坐标、以及图形路径，绘制上述标记图形。例如，通过CAShapeLayer控件，根据图形尺寸、图形坐标、以及图形路径，绘制上述标记图形。相关技术中通过UIVIew控件绘制图形，以此方式绘制图形层次结构不清晰，代码臃肿，文件体积大。采用轻量级的CAShapeLayer控件绘制图形，层次结构清晰，代码简单，文件体积小，在一定程度上提升绘制图的性能。另外，CAShapeLayer控件自身的很多属性自带动画效果，因此可以较为容易得实现需要的动画，使得加载过程更平滑，可以极大地提升用户体验。

在一些实施例中，在绘制图形之前，先通过上述单元格TimeLineCell的属性contentView.layer.sublayers获取当前添加在contentView的layer中的所有子层的集合，然后遍历该集合，并判断该集合中的每一个对象是否是CAShapeLayer，如果是CAShapeLayer类型，则通过removeFromSuperlayer方法将该子层从父层中移除。这样可以防止操作系统(例如，IOS系统)在复用该单元格TimeLineCell的过程中多次创建该层，造成显示错误。

在一些实施例中，上述图形尺寸可以是多边形的边长，也可以是圆形的直径。例如，在图形尺寸为圆形直径时，参考上述表1，circleShapeLaye表示圆形。circleDiameter表示圆形的直径。

在一些实施例中，上述图形坐标可以为多边形的顶点坐标，也可以是圆形的圆心坐标。例如，在图形坐标为圆心坐标时，参考上述表1，circleX表示圆心的横坐标，circleY表示圆心的纵坐标。

在一些实施例中，上述图形路径可以是通过贝塞尔曲线绘制的path。本申请的方法还可以包括通过贝塞尔曲线，根据图形参数中的多个预设顶点的坐标，绘制图形路径。下面以图形为圆形为例，描述通过贝塞尔曲线绘制的圆形的path，例如，参考上述表3的参数，通过UIBezierPath(roundedRect：，cornerRadius：)方法创建一个贝塞尔曲线path，其中，给roundedRect参数传circleDiameter，给cornerRadius传circleDiameter/2。调用addLine(to:)方法4次，给参数to传一个点，该点的坐标依次按照(circleX+circleDiameter，circleY)、(circleX+circleDiameter，circleY+circleDiameter)、(circleX，circleY+circleDiameter)、(circleX，circleDiameter)传入。将创建好的贝塞尔曲线path赋值给circleShapeLayer的path属性。在本申请中可以将fillColor赋值给circleShapeLayer的fillColor属性，以此设置circleShapeLayer的填充色。最后调用单元格TimeLineCell自带的contentView.layer.addSublayer()方法将circleShapeLayer渲染到屏幕上显示，即通过该方法根据圆心的坐标、圆形的直径、以及圆形路径，绘制circleShapeLayer，并将其渲染到屏幕上。

本申请中，采用CAShapeLayer类型，并与贝塞尔曲线相结合，通过严谨的数学计算与极高性能的CAShapeLayer渲染技术，使得在实现相关功能的同时能够实现更平滑的过渡与更少资源的浪费。这样可以根据应用场景的实际需求扩展相关功能，例如，根据应用场景的实际需求，自定义上述表格中的数据以实现响应的功能。

图3是本申请实施例的另一种时间线滚动列表的渲染方法的流程图。本申请实施例中在步骤S210之前，该方法还可以包括步骤S310和步骤S320，如图3所示。

在步骤S310中，判断图形尺寸是否小于零，如果该图形尺寸小于零，确定该图形尺寸为零。

在步骤S320中，如果图形尺寸大于零，判断该图形尺寸是否大于预设阈值，如果该图形尺寸大于预设阈值，确定该图形尺寸为预设阈值。

该方法可以判断图形尺寸是否小于零，如果该图形尺寸小于零，确定该图形尺寸为零，如果图形尺寸大于零，判断该图形尺寸是否大于预设阈值，如果该图形尺寸大于预设阈值，确定该图形尺寸为预设阈值，以此方式可以校验图形尺寸是否合理，有效避免基于不合理的图形尺寸绘制标记图形，导致标记图形无法展示在时间线滚动列表上。

在一些实施例中，需注意的是，在上述表1的属性circleDiameter配置完成后，还需重写该属性的didSet方法，例如，以图形为圆形为例，由于圆形的直径只能大于等于0，不能为负，基于这一原则，可以先判断当前设置的新值是否小于0，若小于0，则可以将其赋值为0，使其符合基本的数学运算规则。同时，若该值过大，则基于该直径渲染出的圆形无法很好地显示在操作系统的界面上，所以还需为其设定一个最大值，即上述预设阈值，例如该预设阈值可以设置为100，此时还需判断，当该值被赋予的值大于100时，可以将其赋值为100。以此方式可以完成对circleDiameter的合理性的校验。

图4是本申请实施例的又一种时间线滚动列表的渲染方法的流程图。本申请实施例中在步骤S210之前，该方法还可以包括步骤S410和步骤S420，如图4所示。

如图4所示，上述方法还可以包括步骤S410和步骤S420。

在步骤S410中，根据用于标记事件数据的图形参数，获取用于渲染图形的所有子层。

在步骤S420中，判断用于渲染图形的所有子层中是否包含预设图形渲染对象，如果该子层包含预设图形渲染对象，删除该用于渲染图形的子层。

该方法可以根据用于标记事件数据的图形参数，获取用于渲染图形的所有子层，然后判断用于渲染图形的所有子层中是否包含预设图形渲染对象，如果该子层包含预设图形渲染对象，删除该用于渲染图形的子层，以此方式可以防止操作系统在复用上述单元格TimeLineCell的过程中多次创建该层，造成显示错误。

在一些实施例中，先通过上述单元格TimeLineCell的属性contentView.layer.sublayers获取当前添加在contentView的layer中的所有子层的集合，然后遍历该集合，并判断该集合中的每一个对象是否是CAShapeLayer，如果是CAShapeLayer类型，则通过removeFromSuperlayer方法将该子层从父层中移除。这样可以防止操作系统(例如，IOS系统)在复用该单元格TimeLineCell的过程中多次创建该层，造成显示错误。

图5是本申请实施例的确定用于连接相邻标记图形的标记线和标记线的位置信息的步骤的流程图。

如图5所示，上述步骤S120中的确定用于连接相邻标记图形的标记线和标记线的位置信息可以包括步骤S510和步骤S520。

在步骤S510中，根据线条的两个端点的坐标和线条路径，确定上述标记线。

在步骤S520中，根据线条的两个端点的坐标，确定上述标记线的位置信息。

该方法可以根据线条的两个端点的坐标和线条路径，确定上述标记线，然后根据线条的两个端点的坐标，确定上述标记线的位置信息，这样后续根据标记线的位置信息可以将该标记线渲染到时间线滚动列表的对应位置。

在一些实施例中，上述标记线可以用于连接相邻标记图形，该相邻标记图形用于标记相邻事件数据。这样可以使得时间线滚动列表中展示的多个事件被标记图形和标记线串联起来，实现时间的连续性。

在一些实施例中，上述方法还可以包括通过贝塞尔曲线，根据图形参数中线条的两个端点的坐标，绘制线条路径。

以图形是圆形为例，参考上述表1的数据，将circleShapeLayer绘制完成后，还需要绘制标记线，例如绘制一根纵线，使其连接CAShapeLayer的中心到单元格TimeLineCell的底部，这样符合时间线的连续性。通过CAShapeLayer绘制标记线的过程具体如下：通过UIBezierPath()方法创建一个贝塞尔曲线的path，设置起点为圆形标记的下方顶点，即(lineX，lineY)；调用addLine(to:)方法，给to参数传终点(lineX，cell.height)；设置path的线条宽度lineWidth的值为单元格TimeLineCell的属性lineWidth，即path.lineWidth＝self.lineWidth。给lineShapeLayer的path属性设置为已经存在的贝塞尔曲线path。同时，将线条颜色strokeColor设置为lineColor；最后调用单元格TimeLineCell自带的contentView.layer.addSublayer()方法将lineShapeLayer渲染到屏幕上显示。即通过该方法根据线条的两个端点的坐标和线条路径，绘制lineShapeLayer，并将其渲染到屏幕上。

下述为本申请装置实施例，可以用于执行本申请方法实施例。下文描述的时间线滚动列表的渲染装置与上文描述的时间线滚动列表的渲染方法可相互对应参照。对于本申请装置实施例中未披露的细节，请参照本申请方法实施例。

图6是本申请实施例的一种时间线滚动列表的渲染装置的方框图。

如图6所示，时间线滚动列表的渲染装置600包括获取模块610、第一确定模块620、第二确定模块630、第三确定模块640和渲染模块650，。

具体地，获取模块610，用于获取待渲染的事件数据。

第一确定模块620，用于根据用于标记事件数据的图形参数，确定标记图形和标记图形的位置信息，以及确定用于连接相邻标记图形的标记线和标记线的位置信息。

第二确定模块630，用于根据事件数据，确定各个显示标签对应的待显示信息。

第三确定模块640，用于根据显示信息的排列方式，确定待显示信息的位置信息。

渲染模块650，用于基于标记图形、标记图形的位置信息、标记线、标记线的位置信息、各个显示标签对应的待显示信息、待显示信息的位置信息、以及当前的时间信息，渲染时间线滚动列表中的部分显示区域。

该时间线滚动列表的渲染装置600可以获取待渲染的事件数据，根据用于标记事件数据的图形参数，确定标记图形和标记图形的位置信息，以及确定用于连接相邻标记图形的标记线和标记线的位置信息，然后根据该事件数据，确定各个显示标签对应的待显示信息；根据显示信息的排列方式，确定待显示信息的位置信息，并基于标记图形、标记图形的位置信息、标记线、标记线的位置信息、各个显示标签对应的待显示信息、待显示信息的位置信息、以及当前的时间信息，渲染时间线滚动列表中的部分显示区域。以此方式可以将不同时间的事件数据通过标记图形和标记线串联成时间线滚动列表，在操作系统的用户界面上展示渲染后的时间线滚动列表。本申请可以将该时间线滚动列表的渲染方法直接供操作系统使用，无需与第三方其他功能进行绑定，这样该方法的时间线功能可以很容易被集成在操作系统。

在一些实施例中，上述第一确定模块620被配置为：根据图形尺寸、图形坐标、以及图形路径，确定标记图形，该图形路径是通过贝塞尔曲线，根据图形参数中的多个预设顶点的坐标绘制的；以及根据图形尺寸和图形坐标，确定标记图形的位置信息。根据线条的两个端点的坐标和线条路径，确定标记线，该线条路径是通过贝塞尔曲线，根据图形参数中线条的两个端点的坐标绘制的；以及根据线条的两个端点的坐标，确定标记线的位置信息。

在一些实施例中，上述时间线滚动列表的渲染装置600还可以用于：判断图形尺寸是否小于零，如果图形尺寸小于零，确定图形尺寸为零；以及如果图形尺寸大于零，判断图形尺寸是否大于预设阈值，如果图形尺寸大于预设设阈值，确定图形尺寸为预设阈值。

在一些实施例中，上述时间线滚动列表的渲染装置600还可以用于：根据用于标记事件数据的图形参数，获取用于渲染图形的所有子层；判断用于渲染图形的所有子层中是否包含预设图形渲染对象，如果该子层包含预设图形渲染对象，删除该用于渲染图形的子层。

在一些实施例中，上述第三确定模块640被配置为：根据显示信息的排列方向，确定各个待显示信息之间的排列方向为纵向排列；根据显示信息沿排列方向排列的间距，确定各个待显示信息之间的排列间距为等高间距；根据显示信息的对齐方式，确定各个待显示信息之间的对齐方式为垂直于该排列方向进行横向充满。

在一些实施例中，上述时间线滚动列表的渲染装置600还可以用于：根据图形参数中图形颜色和事件数据中选中的颜色，确定标记图形的填充颜色；根据图形参数中线条颜色和事件数据中选中的颜色，确定标记线的填充颜色；以及根据图形参数中线条宽度事件数据中选中的宽度，确定标记线的宽度。

图7是本申请实施例的一种电子设备的结构示意图。

如图7所示，该实施例的电子设备700包括：处理器710、存储器720以及存储在该存储器720中并且可在处理器710上运行的计算机程序730。处理器710执行计算机程序730时实现上述各个方法实施例中的步骤。或者，处理器710执行计算机程序730时实现上述各装置实施例中各模块的功能。

电子设备700可以是桌上型计算机、笔记本、掌上电脑及云端服务器等电子设备。电子设备700可以包括但不仅限于处理器710和存储器720。本领域技术人员可以理解，图7仅仅是电子设备700的示例，并不构成对电子设备700的限定，可以包括比图示更多或更少的部件，或者不同的部件。

处理器710可以是中央处理单元(Central Processing Unit，CPU)，也可以是其它通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其它可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。

存储器720可以是电子设备700的内部存储单元，例如，电子设备700的硬盘或内存。存储器720也可以是电子设备700的外部存储设备，例如，电子设备700上配备的插接式硬盘，智能存储卡(Smart Media Card，SMC)，安全数字(Secure Digital，SD)卡，闪存卡(Flash Card)等。存储器720还可以既包括电子设备700的内部存储单元也包括外部存储设备。存储器720用于存储计算机程序以及电子设备所需的其它程序和数据。

所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。实施例中的各功能单元、模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中，上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

集成的模块如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读存储介质中。基于这样的理解，本申请实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，计算机程序可以存储在计算机可读存储介质中，该计算机程序在被处理器执行时，可以实现上述各个方法实施例的步骤。计算机程序可以包括计算机程序代码，计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。计算机可读介质可以包括：能够携带计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、电载波信号、电信信号以及软件分发介质等。需要说明的是，计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如，在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括电载波信号和电信信号。

以上实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围，均应包含在本申请的保护范围之内。

Claims (10)

1.一种时间线滚动列表的渲染方法，其特征在于，所述方法应用于操作系统，该方法包括：

获取待渲染的事件数据；

根据用于标记所述事件数据的图形参数，确定标记图形和所述标记图形的位置信息，以及确定用于连接相邻所述标记图形的标记线和所述标记线的位置信息；

根据所述事件数据，确定各个显示标签对应的待显示信息；

根据显示信息的排列方式，确定所述待显示信息的位置信息；

基于所述标记图形、所述标记图形的位置信息、所述标记线、所述标记线的位置信息、各个显示标签对应的待显示信息、所述待显示信息的位置信息、以及当前的时间信息，渲染所述时间线滚动列表中的部分显示区域。

2.根据权利要求1所述的方法，其特征在于，根据所述用于标记所述事件数据的图形参数，确定所述标记图形和所述标记图形的位置信息，包括：

根据图形尺寸、图形坐标、以及图形路径，确定所述标记图形，所述图形路径是通过贝塞尔曲线，根据所述图形参数中的多个预设顶点的坐标绘制的；

根据所述图形尺寸和所述图形坐标，确定所述标记图形的位置信息。

3.根据权利要求2所述的方法，其特征在于，在根据所述图形尺寸、所述图形坐标、以及所述图形路径确定所述标记图形之前，所述方法包括：

判断所述图形尺寸是否小于零，如果所述图形尺寸小于零，确定所述图形尺寸为零；

如果所述图形尺寸大于零，判断所述图形尺寸是否大于预设阈值，如果所述图形尺寸大于所述预设阈值，确定所述图形尺寸为所述预设阈值。

4.根据权利要求2所述的方法，其特征在于，在根据所述图形尺寸、所述图形坐标、以及所述图形路径确定所述标记图形之前，所述方法包括：

根据所述用于标记所述事件数据的图形参数，获取用于渲染图形的所有子层；

判断所述用于渲染图形的所有子层中是否包含预设图形渲染对象，如果该子层包含所述预设图形渲染对象，删除该用于渲染图形的子层。

5.根据权利要求1所述的方法，其特征在于，根据所述用于标记所述事件数据的图形参数，确定所述用于连接相邻所述标记图形的标记线和所述标记线的位置信息，包括：

根据线条的两个端点的坐标和线条路径，确定所述标记线，所述线条路径是通过贝塞尔曲线，根据所述图形参数中线条的两个端点的坐标绘制的；

根据所述线条的两个端点的坐标，确定所述标记线的位置信息。

6.根据权利要求1所述的方法，其特征在于，根据所述显示信息的排列方式，确定所述待显示信息的位置信息，包括：

根据所述显示信息的排列方向，确定各个所述待显示信息之间的排列方向为纵向排列；

根据所述显示信息沿排列方向排列的间距，确定各个所述待显示信息之间的排列间距为等高间距；

根据所述显示信息的对齐方式，确定各个所述待显示信息之间的对齐方式为垂直于该排列方向进行横向充满。

7.根据权利要求1所述的方法，其特征在于，所述方法还包括：

根据所述图形参数中图形颜色和所述事件数据中选中的颜色，确定所述标记图形的填充颜色；

根据所述图形参数中线条颜色和所述事件数据中选中的颜色，确定所述标记线的填充颜色；

根据所述图形参数中线条宽度所述事件数据中选中的宽度，确定所述标记线的宽度。

8.一种时间线滚动列表的渲染装置，其特征在于，所述装置应用于操作系统，所述装置包括：

获取模块，用于获取待渲染的事件数据；

第一确定模块，用于根据用于标记所述事件数据的图形参数，确定标记图形和所述标记图形的位置信息，以及确定用于连接相邻所述标记图形的标记线和所述标记线的位置信息；

第二确定模块，用于根据所述事件数据，确定各个显示标签对应的待显示信息；

第三确定模块，用于根据显示信息的排列方式，确定所述待显示信息的位置信息；

渲染模块，用于基于所述标记图形、所述标记图形的位置信息、所述标记线、所述标记线的位置信息、各个显示标签对应的待显示信息、所述待显示信息的位置信息、以及当前的时间信息，渲染所述时间线滚动列表中的部分显示区域。

9.一种电子设备，包括存储器、处理器以及存储在所述存储器中并且可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至7中任一项所述方法的步骤。

10.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至7中任一项所述方法的步骤。