CN107656979A - 一种时序对象二维空间显示方法及*** - Google Patents

Abstract

本发明提供的一种时序对象二维空间显示方法，具体包括以下步骤，客户端生成一个空白的画布，所述画布由二维平面表示，包括X轴和Y轴；客户端建立一个已占用区域的占用区域索引，所述占用区域索引用于记录在画布上的多个对象占用的矩形区域集合；客户端获取用户选择显示时间段的对象；客户端从服务器中获取所述时间段的对象数据；客户端逐一计算出所述时间段的对象在画布上的位置并显示对象。本发明的有益效果在于：通过用二维空间显示方式对时序对象进行显示，可直观查看该时间段的所有数据，便于记忆和查找。

Description

一种时序对象二维空间显示方法及***

技术领域

本发明涉及数据显示技术领域，具体涉及一种时序对象二维空间显示方法及***。

背景技术

目前在网站中，显示数据的方式多采用叙述的方式展示出来，例如对于像历史类具有明显的时间先后顺序，通过先描述时间，后描述事件发生的过程，这种方式在很多历史事迹在一起时，读者阅读记忆效果不好，也不利于整体归纳记忆。

发明内容

针对现有技术中的缺陷，本发明的目的之一在于提供一种时序对象二维空间显示方法，通过建立时间轴，将对象显示在由时间轴确定的固定位置，提供更直观便于记忆的方式显示数据。

第一方面，本发明提供的一种时序对象二维空间显示方法，具体包括以下步骤，客户端生成一个空白的画布，所述画布由二维平面表示，包括X轴和Y轴；客户端建立一个已占用区域的占用区域索引，所述占用区域索引用于记录在画布上的多个对象占用的矩形区域集合；客户端获取用户选择显示时间段的对象；客户端从服务器中获取所述时间段的对象数据；客户端逐一计算出所述时间段的对象在画布上的位置并显示对象。

可选地，所述客户端计算所述对象在画布上的位置的方法具体包括分别确定对象在画布X轴上的位置和Y轴上的位置。

可选地，所述确定对象在画布X轴上的位置的方法为通过所述对象的起始时间序号乘以时间单位长度。

可选地，所述确定对象在画布Y轴上的位置的方法具体包括：将所述对象预绘制在画布上，此时所述对象在画布上不显示，用于确定对象实际渲染后所占区域的尺寸，确定宽度值和高度值；设定所述对象在Y轴上的值为0，逐一判断所述对象所占矩形区域与占用区域索引中与所述对象的X轴相近的区域是否相交，如果相交，则以相交区域的下边界的Y轴的值为起点，继续重复进行判断，直至找到不相交的Y轴值。

可选地，在所述位置显示对象的具体方法为根据对象的X值和Y值，确定所述对象在画布的位置，设置对象的显示方式为可见，并将根据所述对象的X值、Y值、宽度值和高度值组成的矩形区域加入到占用区域索引中。

可选地，方法还包括客户端画布更新步骤，用于当用户拖动画布时，同时对应更新画布显示内容。

可选地，所述客户端画布更新步骤具体包括：根据画布上的对象建立以时间为索引的对象索引；客户端设定加载区域大小，所述加载区域包括一个可视区域和两个预加载区域，所述两个预加载区域分布位于可视区域的两侧；客户端获取加载区域的对象，将对象显示在画布上，并将加载的对象注册到对象索引中；获取用户拖动画布的信息，计算新加载区域大小，与拖动前的加载区域进行距离比较，如果距离小于阈值，则不做操作，如果大于等于阈值，将新加载区域与拖动前的加载区域比对，得出新增区域大小，客户端获取新增区域的对象，将新增区域的对象显示在画布上，并将加载的新增区域的对象注册到对象索引中；查找出不在当前加载区域的对象，从画布和对象索引中删除。

第二方面，本发明提供的一种时序对象二维空间显示***，包括客户端，所述客户端包括画布生成单元、已占用区域索引建立单元、用户选择信息获取单元、对象获取单元、对象位置计算单元和显示单元，所述画布生成单元用于生成一个空白的画布，所述画布由二维平面表示，包括X轴和Y轴；所述已占用区域索引建立单元用于建立一个已占用区域的占用区域索引，所述占用区域索引用于记录在画布上的多个对象占用的矩形区域集合；所述用户选择信息获取单元用于获取用户选择显示时间段的对象；所述对象获取单元用于获取所述时间段的对象数据；所述对象位置计算单元用于逐一计算出所述时间段的对象在画布上的位置；所述显示单元用于在所述位置显示对象。

可选地，所述对象位置计算单元计算对象在画布上的位置的方法具体包括分别确定对象在画布X轴上的位置和Y轴上的位置，所述确定对象在画布X轴上的位置的方法为通过所述对象的起始时间序号乘以时间单位长度；所述确定对象在画布Y轴上的位置的方法具体包括：将所述对象预绘制在画布上，用于确定对象实际渲染后所占区域的尺寸，确定宽度值和高度值，此时所述对象在画布上不显示；设定所述对象在Y轴上的值为0，逐一判断所述对象所占矩形区域与占用区域索引中与所述对象的X轴相近的区域是否相交，如果相交，则以相交区域的下边界的Y轴的值为起点，继续重复进行判断，直至找到不相交的Y轴值。

可选地，所述***还包括画布更新单元，所述画布更新单元进行画布更新方法包括以下步骤：根据画布上的对象建立以时间为索引的对象索引；客户端设定加载区域大小，所述加载区域包括一个可视区域和两个预加载区域，所述两个预加载区域分布位于可视区域的两侧；客户端获取加载区域的对象，将对象显示在画布上，并将加载的对象注册到对象索引中；获取用户拖动画布的信息，计算新加载区域大小，与拖动前的加载区域进行距离比较，如果距离小于阈值，则不做操作，如果大于等于阈值，将新加载区域与拖动前的加载区域比对，得出新增区域大小，客户端获取新增区域的对象，将新增区域的对象显示在画布上，并将加载的新增区域的对象注册到对象索引中；查找出不在当前加载区域的对象，从画布和对象索引中删除。

本发明的有益效果：

本发明的一种时序对象二维空间显示方法，通过用二维空间显示方式对时序对象进行显示，可直观查看某个时间段的所有数据，便于记忆和查找。

通过在画布上确定对象在X轴、Y轴的显示位置，使对象尽可能聚集，以减少空间占用，但避免对象在画布上重叠显示，提高对象展示效果，便于查看。

画布更新步骤在画布移动过程中，移除范围之外的对象，只保留“可视区域”和“预加载区域”的对象，以此保证画布上只存在有限数量的对象，解决画布中对象过多导致拖放卡顿问题，提高画布更新的速度。

本发明的一种时序对象二维空间显示***，通过用二维空间显示方式对时序对象进行显示，可直观查看某个时间段的所有数据，便于记忆和查找。

通过在画布上确定对象在X轴、Y轴的显示位置，使对象尽可能聚集，以减少空间占用，但避免对象在画布上重叠显示，提高对象展示效果，便于查看。

画布更新单元在画布移动过程中，移除范围之外的对象，只保留“可视区域”和“预加载区域”的对象，以此保证画布上只存在有限数量的对象，解决画布中对象过多导致拖放卡顿问题，提高画布更新的速度，提高用户体验。

附图说明

为了更清楚地说明本发明具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍。在所有附图中，类似的元件或部分一般由类似的附图标记标识。附图中，各元件或部分并不一定按照实际的比例绘制。

图1示出了本发明所提供的一种时序对象二维空间显示方法的一实施例的流程图；

图2示出了本发明所提供的一种时序对象二维空间显示方法的另一实施例的流程图；

图3示出了本发明所提供的一种时序对象二维空间显示***的一实施例的结构框图；

图4示出了本发明所提供的一种时序对象二维空间显示***的另一实施例的结构框图。

具体实施方式

下面将结合附图对本发明技术方案的实施例进行详细的描述。以下实施例仅用于更加清楚地说明本发明的技术方案，因此只是作为示例，而不能以此来限制本发明的保护范围。

需要注意的是，除非另有说明，本申请使用的技术术语或者科学术语应当为本发明所属领域技术人员所理解的通常意义。

如图1所示，提供了本发明一种时序对象二维空间显示方法的第一实施例，具体包括以下步骤，S1.客户端生成一个空白的画布，所述画布由二维平面表示，包括X轴和Y轴；S2.客户端建立一个已占用区域的占用区域索引，所述占用区域索引用于记录在画布上的多个对象占用的矩形区域集合；S3.客户端获取用户选择显示时间段的对象；S4.客户端从服务器中获取所述时间段的对象数据；S5.客户端逐一计算出所述时间段的对象在画布上的位置并显示对象。画布上包含X轴和Y轴，X轴代表横向轴，表示时间维度。X轴起点为画布的最左边，从1开始向右依次计序号。每个对象可以根据起始时间，换算出对应的序号。Y轴：纵向轴，画布的顶部Y轴值为0，越下方值越大。对象：即画布中需要陈列的元素。

通过用二维空间显示方式对时序对象进行显示，可直观查看某个时间段的所有数据，便于记忆和查找。

所述客户端计算所述对象在画布上的位置的方法具体包括分别确定对象在画布X轴上的位置和Y轴上的位置。通过在画布上确定对象在X轴、Y轴的显示位置，使对象尽可能聚集，以减少空间占用，但避免对象在画布上重叠显示，提高对象展示效果，便于查看。

确定对象在画布X轴上的位置的方法为通过所述对象的起始时间序号乘以时间单位长度。

所述确定对象在画布Y轴上的位置的方法具体包括：将所述对象预绘制在画布上，此时所述对象在画布上不显示，用于确定对象实际渲染后所占区域的尺寸，确定宽度值和高度值；设定所述对象在Y轴上的值为0，逐一判断所述对象所占矩形区域与占用区域索引中与所述对象的X轴相近的区域是否相交，如果相交，则以相交区域的下边界的Y轴的值为起点，继续重复进行判断，直至找到不相交的Y轴值。对象的渲染：指由数据转换为可视元素的过程，期间会涉及到字体大小、内边距、外边距、边框等依赖客户端环境的不确定量，这些不确定量会使元素在不同客户端上表现为不同的大小，只有在对象渲染完成时才能确定实际所占区域的宽和高。

在所述位置显示对象的具体方法为根据对象的X值和Y值，确定所述对象在画布的位置，设置对象的显示方式为可见，并将根据所述对象的X值、Y值、宽度值和高度值组成的矩形区域加入到占用区域索引中。

如图2所示，本发明还提供一种时序对象二维空间显示方法的另一实施例，在上述实施例的基础上还包括S6.客户端画布更新步骤，用于当用户拖动画布时，同时对应更新画布显示内容。

所述客户端画布更新步骤具体包括：根据画布上的对象建立以时间为索引的对象索引；客户端设定加载区域大小，所述加载区域包括一个可视区域和两个预加载区域，所述两个预加载区域分布位于可视区域的两侧；客户端获取加载区域的对象，将对象显示在画布上，并将加载的对象注册到对象索引中；客户端获取用户拖动画布的信息，计算新加载区域大小，将新加载区域大小与拖动前的加载区域进行距离比较，距离比较是通过对拖动的X轴区间进行求差操作，比如拖动前区间是[100,200]，拖动后区间是[150,250]，那么新加载区域的区间为[200,250]，跨度为50，阈值是针对这个跨度的，如果距离小于阈值，则不做操作，如果大于等于阈值，将新加载区域与拖动前的加载区域比对，得出新增区域大小，客户端获取新增区域的对象，将新增区域的对象显示在画布上，并将加载的新增区域的对象注册到对象索引中；查找出不在当前加载区域的对象，从画布和对象索引中删除。画布更新步骤在画布移动过程中，移除范围之外的对象，只保留“可视区域”和“预加载区域”的对象，以此保证画布上只存在有限数量的对象，解决画布中对象过多导致拖放卡顿问题，提高画布更新的速度。

如图3所示，提供了本发明的一种时序对象二维空间显示***的一实施例，包括客户端和服务器，服务器用于存储数据，所述客户端包括画布生成单元1、已占用区域索引建立单元2、用户选择信息获取单元3、对象获取单元4、对象位置计算单元5和显示单元6，所述画布生成单元1用于生成一个空白的画布，所述画布由二维平面表示，包括X轴和Y轴；所述已占用区域索引建立单元2用于建立一个已占用区域的占用区域索引，所述占用区域索引用于记录在画布上的多个对象占用的矩形区域集合；所述用户选择信息获取单元3用于获取用户选择显示时间段的对象；所述对象获取单元4用于从服务器中获取所述时间段的对象数据；所述对象位置计算单元5用于逐一计算出所述时间段的对象在画布上的位置；所述显示单元6用于在所述位置显示对象。通过用二维空间显示方式对时序对象进行显示，可直观查看某个时间段的所有数据，便于记忆和查找。

所述对象位置计算单元5计算对象在画布上的位置的方法具体包括分别确定对象在画布X轴上的位置和Y轴上的位置，所述确定对象在画布X轴上的位置的方法为通过所述对象的起始时间序号乘以时间单位长度；所述确定对象在画布Y轴上的位置的方法具体包括：将所述对象预绘制在画布上，此时所述对象在画布上不显示，用于确定对象实际渲染后所占区域的尺寸，确定宽度值和高度值；设定所述对象在Y轴上的值为0，逐一判断所述对象所占矩形区域与占用区域索引中与所述对象的X轴相近的区域是否相交，如果相交，则以相交区域的下边界的Y轴的值为起点，继续重复进行判断，直至找到不相交的Y轴值。

如图4所示，本发明还提供一种时序对象二维空间显示***的另一实施例，在上述实施例的基础上还包括画布更新单元7，所述画布更新单元7进行画布更新方法包括以下步骤：根据画布上的对象建立以时间为索引的对象索引；客户端设定加载区域大小，所述加载区域包括一个可视区域和两个预加载区域，所述两个预加载区域分布位于可视区域的两侧；客户端获取加载区域的对象，将对象显示在画布上，并将加载的对象注册到对象索引中；获取用户拖动画布的信息，计算新加载区域大小，与拖动前的加载区域进行距离比较，距离比较是通过对拖动的X轴区间进行求差操作，比如拖动前区间是[100,200]，拖动后区间是[150,250]，那么新加载区域的区间为[200,250]，跨度为50，阈值是针对这个跨度的，如果距离小于阈值，则不做操作，如果大于等于阈值，将新加载区域与拖动前的加载区域比对，得出新增区域大小，客户端获取新增区域的对象，将新增区域的对象显示在画布上，并将加载的新增区域的对象注册到对象索引中；查找出不在当前加载区域的对象，从画布和对象索引中删除。画布更新步骤在画布移动过程中，移除范围之外的对象，只保留“可视区域”和“预加载区域”的对象，以此保证画布上只存在有限数量的对象，解决画布中对象过多导致拖放卡顿问题，提高画布更新的速度，提高用户体验。

应用场景

采用时序对象二维空间显示***显示历史知识，显示***包括客户端和服务器，服务器用于存储数据，客户端画布生成单元生成空白画布，画布上包含X轴和Y轴，X轴代表横向轴，表示时间维度。X轴起点为画布的最左边，从1开始向右依次计序号。每个对象可以根据起始时间，换算出对应的序号。Y轴：纵向轴，画布的顶部Y轴值为0，越下方值越大。确定对象在画布X轴上的位置的方法为通过所述对象的起始时间序号乘以时间单位长度；所述确定对象在画布Y轴上的位置的方法具体包括：将所述对象预绘制在画布上，此时所述对象在画布上不显示，用于确定对象实际渲染后所占区域的尺寸，确定宽度值和高度值；设定所述对象在Y轴上的值为0，逐一判断所述对象所占矩形区域与占用区域索引中与所述对象的X轴相近的区域是否相交，如果相交，则以相交区域的下边界的Y轴的值为起点，继续重复进行判断，直至找到不相交的Y轴值。对象：即画布中需要陈列的元素，对象包括历史人物名字、历史事件和历史典故。在画布的上部显示出年份，画布的下部显示历史朝代信息，画布的中部显示相应朝代对应年份的历史信息，历史信息包括国内外历史人物、历史事件和历史典故等。对象的渲染：指由数据转换为可视元素的过程，期间会涉及到字体大小、内边距、外边距、边框等依赖客户端环境的不确定量，这些不确定量会使元素在不同客户端上表现为不同的大小，只有在对象渲染完成时才能确定实际所占区域的宽和高。用户选择信息获取单元获取用户选择查看某个朝代的操作，客户端对应自动跳转到该朝代的起始年代，显示单元显示该朝代年代的信息；用户选择信息获取单元获取用户选择查看历史人物、历史事件和历史典故的详细信息等操作，在显示单元对应显示出用户选择的历史人物、历史事件和历史典故的详细信息。直观看到历史元素在时间维度的关联，可以直观的查看历史人物的寿命，将历史各时期按精确的长度比例呈现。占用区域索引单元记录已显示的详细信息的矩形区域，详细信息内容越多，宽度越大，超过预先设定矩形最大宽度时会发生换行，换行会增加显示矩形的纵向高度。对象获取单元获取用户选择需要显示的内容操作，对象计算单元逐一计算出显示的内容需要在画布上占多大的位置，计算出位置大小后通过显示单元在这个位置上显示出来。客户端设定了加载区域的大小，加载区域包括一个可视区域和两个预加载区域，两个预加载区域分布位于可视区域的两侧，如果客户端获取加载区域的对象，将对象显示在画布上，并将加载的对象注册到对象索引中，客户端获取用户选择的朝代操作，客户端计算新加载区域大小，与之前的加载区域进行距离比较，距离比较是通过对拖动的X轴区间进行求差操作，比如拖动前区间是[100,200]，拖动后区间是[150,250]，那么新加载区域的区间为[200,250]，跨度为50，阈值是针对这个跨度的，如果距离小于阈值，则不做操作，如果大于等于阈值，将新加载区域与拖动前的加载区域比对，得出新增区域大小，客户端获取新增区域的对象，将新增区域的对象显示在画布上，并将加载的新增区域的对象注册到对象索引中；查找出不在当前加载区域的对象，从画布和对象索引中删除，实现画布对象的更新。本发明的***在历史知识方面的应用，使用户可以在一个界面内沉浸式的、连续的了解数千年跨度的历史信息，这是以往的媒介(书籍、影视剧、讲座、文章、词条)无法实现的。

最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围，其均应涵盖在本发明的权利要求和说明书的范围当中。

Claims (10)

1.一种时序对象二维空间显示方法，其特征在于：具体包括以下步骤，客户端生成一个空白的画布，所述画布由二维平面表示，包括X轴和Y轴；客户端建立一个已占用区域的占用区域索引，所述占用区域索引用于记录在画布上的多个对象占用的矩形区域集合；客户端获取用户选择显示时间段的对象；客户端从服务器中获取所述时间段的对象数据；客户端逐一计算出所述时间段的对象在画布上的位置并显示对象。

2.如权利要求1所述的时序对象二维空间显示方法，其特征在于：所述客户端计算所述对象在画布上的位置的方法具体包括分别确定对象在画布X轴上的位置和Y轴上的位置。

3.如权利要求2所述的时序对象二维空间显示方法，其特征在于：所述确定对象在画布X轴上的位置的方法为通过所述对象的起始时间序号乘以时间单位长度。

4.如权利要求3所述的时序对象二维空间显示方法，其特征在于：所述确定对象在画布Y轴上的位置的方法具体包括：将所述对象预绘制在画布上，此时所述对象在画布上不显示；用于确定对象实际渲染后所占区域的尺寸，确定宽度值和高度值，设定所述对象在Y轴上的值为0，逐一判断所述对象所占矩形区域与占用区域索引中与所述对象的X轴相近的区域是否相交，如果相交，则以相交区域的下边界的Y轴的值为起点，继续重复进行判断，直至找到不相交的Y轴值。

5.如权利要求4所述的时序对象二维空间显示方法，其特征在于：在所述位置显示对象的具体方法为根据对象的X值和Y值，确定所述对象在画布的位置，设置对象的显示方式为可见，并将根据所述对象的X值、Y值、宽度值和高度值组成的矩形区域加入到占用区域索引中。

6.如权利要求1所述的时序对象二维空间显示方法，其特征在于：还包括客户端画布更新步骤，用于当用户拖动画布时，同时对应更新画布显示内容。

7.如权利要求6所述的时序对象二维空间显示方法，其特征在于：所述客户端画布更新步骤具体包括：根据画布上的对象建立以时间为索引的对象索引；客户端设定加载区域大小，所述加载区域包括一个可视区域和两个预加载区域，所述两个预加载区域分布位于可视区域的两侧；客户端获取加载区域的对象，将对象显示在画布上，并将加载的对象注册到对象索引中；获取用户拖动画布的信息，计算新加载区域大小，与拖动前的加载区域进行距离比较，如果距离小于阈值，则不做操作，如果大于等于阈值，将新加载区域与拖动前的加载区域比对，得出新增区域大小，客户端获取新增区域的对象，将新增区域的对象显示在画布上，并将加载的新增区域的对象注册到对象索引中；查找出不在当前加载区域的对象，从画布和对象索引中删除。

8.一种时序对象二维空间显示***，其特征在于：包括客户端，所述客户端包括画布生成单元、已占用区域索引建立单元、用户选择信息获取单元、对象获取单元、对象位置计算单元和显示单元，所述画布生成单元用于生成一个空白的画布，所述画布由二维平面表示，包括X轴和Y轴；所述已占用区域索引建立单元用于建立一个已占用区域的占用区域索引，所述占用区域索引用于记录在画布上的多个对象占用的矩形区域集合；所述用户选择信息获取单元用于获取用户选择显示时间段的对象；所述对象获取单元用于获取所述时间段的对象数据；所述对象位置计算单元用于逐一计算出所述时间段的对象在画布上的位置；所述显示单元用于在所述位置显示对象。

9.如权利要求8所述的时序对象二维空间显示***，其特征在于：所述对象位置计算单元计算对象在画布上的位置的方法具体包括分别确定对象在画布X轴上的位置和Y轴上的位置，所述确定对象在画布X轴上的位置的方法为通过所述对象的起始时间序号乘以时间单位长度；所述确定对象在画布Y轴上的位置的方法具体包括：将所述对象预绘制在画布上，此时所述对象在画布上不显示，用于确定对象实际渲染后所占区域的尺寸，确定宽度值和高度值；设定所述对象在Y轴上的值为0，逐一判断所述对象所占矩形区域与占用区域索引中与所述对象的X轴相近的区域是否相交，如果相交，则以相交区域的下边界的Y轴的值为起点，继续重复进行判断，直至找到不相交的Y轴值。

10.如权利要求8所述的时序对象二维空间显示***，其特征在于：所述***还包括画布更新单元，所述画布更新单元进行画布更新方法包括以下步骤：根据画布上的对象建立以时间为索引的对象索引；客户端设定加载区域大小，所述加载区域包括一个可视区域和两个预加载区域，所述两个预加载区域分布位于可视区域的两侧；客户端获取加载区域的对象，将对象显示在画布上，并将加载的对象注册到对象索引中；获取用户拖动画布的信息，计算新加载区域大小，与拖动前的加载区域进行距离比较，如果距离小于阈值，则不做操作，如果大于等于阈值，将新加载区域与拖动前的加载区域比对，得出新增区域大小，客户端获取新增区域的对象，将新增区域的对象显示在画布上，并将加载的新增区域的对象注册到对象索引中；查找出不在当前加载区域的对象，从画布和对象索引中删除。