CN107066186A - 一种基于Canvas的UI界面字符展示方法及显示设备 - Google Patents

Abstract

本申请实施例公开了一种基于Canvas的UI界面字符展示方法和显示设备，该方法在UI界面的焦点移动至基于Canvas的展示区域，并且Canvas中存储的字符串的长度大于展示区域可显示的字符串长度时，每隔预设时间间隔，计算展示区域中当前待显示字符串的信息，将Canvas中存储的相对应的字符串生成图像，并刷新UI界面，以使生成的图像在展示区域内显示，从而，对于基于Canvas的UI界面显示场景，克服缺少滚动指令的限制，在不增加额外系统资源消耗的情况下，以更新被显示图像内容的方式实现文字平滑滚动的效果，进而，提高用户浏览UI界面时的使用体验。

Description

一种基于Canvas的UI界面字符展示方法及显示设备

技术领域

本申请涉及显示领域，特别涉及一种基于Canvas的UI界面字符展示方法及一种显示设备。

背景技术

随着HTML5(HyperText Markup Language 5.0，超级文本标记语言5.0)标准逐渐成为主流，在智能电视UI(User Interface，用户界面)领域，越来越多的厂商开始采用基于浏览器的Web UI开发模式。Canvas(HTML中的一种元素)是HTML5标准中一个新的标签，主要是用来处理图像数据的渲染和控制，它提供的绘图API(Application ProgrammingInterface，应用程序编程接口)能够直接调用GPU(Graphics Processing Unit，图形处理器)资源，实现图像绘制的硬件加速，大幅提高网页的图像处理性能。

在UI界面展示时，对于控件或者元素，往往需要进行文字的说明。但有些场景，其文字说明的长度已经超出了对应控件或元素的长度。UI只能将前面部分的文字内容显示出来。如图1所示，为现有技术中的一种长文字在UI界面中的场景。因为说明文字过长，需要截取其中部分字符串进行显示，而多出来的字符则被截取掉，因此，完整的字符串不能完整的进行显示。

在现有的一些UI显示场景中，可以采用滚动方式进行长字段的显示，即当在用户选中该组件时，即当焦点处于当前组件的时，文字能够横向滚动起来以显示完整的文字内容。

但是这样的功能对于擅长图像处理的HTML5Canvas来说，是比较困难的，由于Canvas无法使用现有的HTML DOM中常用的滚动文字<marqee>标签，对于文字的处理逻辑和渲染方式，需要开发者手动完成，也就是说，当Canvas组件处于焦点时，目前的处理方式通过动态改变字符串中的字符来实现滚动显示，对于开发者来说具有一定难度。

如图2所示，为现有技术的一种基于Canvas的文字滚动展示示意图。每隔一秒，将文字当前的第一个字符剔除，同时，将文字后部当前被截断处的下一个字符显示出来，从而，达到跨度为一个字符的文字滚动展示的效果。

申请人在实现本申请的过程中发现，上述现有的处理方案至少存在如下的问题：

通过对字符串中的字符进行逐个字符剔除，再绘制到Canvas中的方式，虽然能够使用户看到所有的文字，但是实际的应用场景中，Canvas处理这种字符滚动是非常耗费系统CPU、GPU等处理资源的，从而，影响终端运行的稳定性，因此，如何解决Canvas对文字处理能力差，占用系统资源较多的缺陷，成为本领域技术人员函待解决的问题。

发明内容

本申请提供了一种基于Canvas的UI界面字符展示方法以及显示设备，旨在实现平滑的文字滚动展示，进而提高用户的体验。

本申请实施例提出了一种基于Canvas的UI界面字符展示方法，所述方法包括：

当UI界面的焦点移动至基于Canvas的展示区域时，读取所述Canvas中存储的字符串信息；

当所述Canvas中存储的字符串的长度大于所述展示区域可显示的字符串长度时，每隔预设时间间隔，计算按照预设滚动速度和方向移动所述Canvas中存储的字符串时，所述展示区域中当前待显示字符串的信息；

将所述Canvas中存储的与所述当前待显示字符串的信息相对应的字符串生成图像，并刷新所述UI界面，以使生成的所述图像在所述展示区域内显示。

另一方面，本申请实施例还提出了一种显示设备，用于展示包含基于Canvas的展示区域的UI界面，所述显示设备具体包括：

识别模块，用于在所述UI界面的焦点移动至基于Canvas的展示区域时，读取所述Canvas中存储的字符串信息；

处理模块，用于当所述识别模块确定所述Canvas中存储的字符串的长度大于所述展示区域可显示的字符串长度时，每隔预设时间间隔，计算按照预设滚动速度和方向移动所述Canvas中存储的字符串时，所述展示区域中当前待显示字符串的信息；

显示模块，用于将所述处理模块所计算得到的所述Canvas中存储的与所述当前待显示字符串的信息相对应的字符串生成图像，并刷新所述UI界面，以使生成的所述图像在所述展示区域内显示。

与现有技术相比，本申请实施例所提出的技术方案的有益技术效果包括：

本申请实施例公开了一种基于Canvas的UI界面字符展示方法和显示设备，该方法在UI界面的焦点移动至基于Canvas的展示区域，并且Canvas中存储的字符串的长度大于展示区域可显示的字符串长度时，每隔预设时间间隔，计算展示区域中当前待显示字符串的信息，将Canvas中存储的相对应的字符串生成图像，并刷新UI界面，以使生成的图像在展示区域内显示，从而，对于基于Canvas的UI界面显示场景，克服缺少滚动指令的限制，在不增加额外系统资源消耗的情况下，以更新被显示图像内容的方式实现文字平滑滚动的效果，提高用户浏览UI界面时的使用体验。

附图说明

图1为本申请背景技术中提出的一种长文字在UI界面中的场景示例图；

图2为本申请背景提出的现有技术中一种文字滚动展示示意图；

图3为本申请具体实施例提出的一种基于Canvas的UI界面字符展示方法流程示意图；

图4为本申请的优选实施例中的一种平滑的文字滚动展示效果图；

图5为本申请的优选实施例中的一种文字滚动展示的内容示意图；

图6为本申请具体实施例提出的一种基于Canvas的UI界面字符展示方法流程示意图；

图7为本申请的优选实施例中的待显示字符串选取范围(1)示意图；

图8为本申请的优选实施例中的待显示字符串选取范围(2)示意图；

图9为本申请的优选实施例中的待显示字符串选取范围(3)示意图；

图10为本申请具体实施例中提出一种UI界面的结构示意图；

具体实施方式

如背景技术中所述，在智能终端设备的UI界面中，如智能电视、手机等等，主要针对UI界面中HTML5Canvas中的文字滚动展示，Canvas仅提供基础的绘图API，并不支持HTMLDOM和CSS等布局管理和控制的机制，Canvas本身并没有UI的概念，相当于一个可以用JavaScript操作的位图，且CSS等HTML DOM特性并不适用于Canvas，所以Canvas UI的结构，交互逻辑等需要完全由UI开发者控制，组件、元素以及动画的绘制也需要开发者实现，因此，在Canvas中文字滚动展示通过人工设置读秒滚动的方式实现文字滚动展示，但是在文字滚动展示的过程中并不连续，影响用户体验。

有鉴于以上现有技术中的缺点，本申请提出了一种基于Canvas的UI界面字符展示方法以及显示设备，来实现平滑的文字滚动展示，进而提高用户的体验。

在描述本申请的技术方案之间，首先对本申请技术方案进行简要说明，UI界面中的HTML5Canvas对于文字的处理能力不强，Canvas对文字的渲染相对于Canvas对图片的渲染是非常耗费性能资源的。本申请的技术方案中首先利用Canvas的绘图机制，将待显示字符串转换为图片，规避了Canvas处理文字耗费性能资源的这个弱项，在提高文字绘制效率的同时，也实现了文字平滑滚动。

如图3所示，为本申请实施例提出的一种基于Canvas的UI界面字符展示方法的流程示意图，具体步骤如下：

步骤S301、当UI界面的焦点移动至基于Canvas的展示区域时，读取所述Canvas中存储的字符串信息。

在具体的应用场景中，只有当UI界面的焦点移动至Canvas的展示区域时，才会进行文字的滚动展示，而对焦点位置的判断，一般当终端设备连接的遥控器通过方向键等按键进行OK选中或LEFT离开操作、以及屏幕高亮显示时，认为当前Canvas的焦点位于展示区域，此时，可以进行文字的滚动展示。

分了方便区分，以下将Canvas中原有的字符串定义为待显示字符串，本步骤中存在比较操作，根据Canvas中字符串的长度不同，分别具有以下两种不同的显示方式：

1)当展示区域可显示字符串的长度大于或等于待显示字符串的长度时，直接将待显示字符串生成图像并在展示区域中进行展示。

2)当展示区域可显示字符串的长度小于待显示字符串的长度时，此时Canvas中只能显示待显示字符中的部分，因此需要在展示区域中进行待显示字符的滚动展示，尤其对于本申请所使用的应用场景，每次滚动，都相当于图片的一次更新，即需要对UI界面进行一次刷新。

需要说明的是，由于基于Canvas的场景中已经将Canvas中存储的字符串进行了图片转换，对于上述的情况1)，直接进行图片展示即可，无需进一步处理，而对于上述的情况2)，则需要在所转换的完整图片中进行部分片段的截取呈现，因此，需要进行进一步的处理，具体通过以下步骤S302和步骤S303进行说明。

具体的，本步骤中获取所述Canvas中存储的字符串，并比较所述Canvas中存储的字符串的长度和所述展示区域可显示的字符串长度。

当所述Canvas中存储的字符串的长度大于所述展示区域可显示的字符串长度时，执行步骤S302。

步骤S302、每隔预设时间间隔，计算按照预设滚动速度和方向移动所述Canvas中存储的字符串时，所述展示区域中当前待显示字符串的信息。

基于前述说明，由于Canvas自身处理图片的性能要优于处理文字的性能，在本申请所提出的技术方案中需要将待显示字符串转换为图像，然后进行图像的展示，来实现展现给用户文字平滑滚动的效果。而本步骤则是为了确定被展示的图像中所包含的字符串信息。

在具体的应用场景中，本步骤的具体处理过程说明如下：

步骤S1、每隔预设时间间隔，确定自所述焦点移动至Canvas的展示区域开始，到当前时刻所经过的时间长度。

需要说明的是，在实际的应用场景中，本步骤的执行需要先行进行焦点位置判断，即每隔预设时间间隔，需要判断所述UI界面的焦点是否位于所述展示区域。

若是，则代表需要继续进行滚动展示，执行步骤S1，继续对所述焦点移动至Canvas的展示区域的时间进行计时，并确定自所述焦点移动至Canvas的展示区域开始，到当前时刻所经过的时间长度。

若否，则代表滚动展示结束，无需进行后续步骤的操作，直接停止对所述焦点移动至Canvas的展示区域的时间的计时，并将所述展示区域当前所显示的图片重置为预设的初始图片。

步骤S2、根据所述时间长度，按照预设的滚动速度和方向，确定所述Canvas中存储的字符串所移动的距离。

通过本步骤，可以初步估算字符展示的进度。

步骤S3、根据所述Canvas中存储的字符串所移动的距离，以及所述展示区域预设的起始位置，在所述Canvas中存储的字符串中确定显示原点的当前位置，所述显示原点为对应所述展示区域待显示字符串的起始坐标。

本步骤的处理尤为关键，通过本步骤，即可确定进行字符串展示的起点，从而对后续步骤确定展示内容确定起始位置和长度计算基础。

在本申请的优选实施例中，还需要设定待显示字符串的滚动开始位置与结束位置，其中，开始位置指当Canvas的展示区域处于焦点时，待显示字符串从开始位置开始滚动，使待显示字符串滚动后有一定时间的缓冲供用户阅读。结束位置是指待显示字符串滚动到该结束位置后，停止滚动并停留一段时间，使用户能够完全读到全部文字内容。

步骤S4、基于所述Canvas中存储的字符串的起始边界和结束边界在所述展示区域中的位置，以及所述展示区域的尺寸信息，确定所述展示区域待显示的字符串的长度信息。

具体的，本步骤中对于长度信息的确定过程说明如下：

首先，识别所述Canvas中存储的字符串的起始边界和结束边界在所述展示区域中的位置。在具体的应用场景中，位置关系可以分为以下三种情况：

情况一、展示内容包括起始边界。

当所述Canvas中存储的字符串的起始边界位于所述展示区域中时，确定所述显示原点的当前位置相对于所述展示区域的起始位置的距离，并将所述展示区域的长度与所述距离的差值作为所述展示区域待显示的字符串的长度信息。

情况二、展示内容包括结束边界。

当所述Canvas中存储的字符串的结束边界位于所述展示区域中时，将所述显示原点的当前位置到所述Canvas中存储的字符串的结束边界之间的长度值作为所述展示区域待显示的字符串的长度信息。

情况三、展示内容不包括任何边界。

当所述Canvas中存储的字符串的起始边界和结束边界均没有位于所述展示区域中时，将所述展示区域的长度值作为所述展示区域待显示的字符串的长度信息。

步骤S5、根据所述显示原点的当前位置以及所述展示区域待显示的字符串的长度信息，在所述Canvas中存储的字符串中获取所述展示区域中当前待显示字符串的信息，直到所述Canvas中存储的字符串的结束边界的当前位置到达所述展示区域预设的结束位置。

步骤S303、将所述Canvas中存储的与所述当前待显示字符串的信息相对应的字符串生成图像，并刷新所述UI界面，以使生成的所述图像在所述展示区域内显示。

结合前述步骤S302中的步骤S4中所列举的三种情况，本步骤中图像的生成过程，具体也可以包括以下三种：

对应前述情况一，当所述Canvas中存储的字符串的起始边界位于所述展示区域中时，根据所述Canvas中存储的字符串的起始边界与所述展示区域的起始边界之间的距离生成填充图像块，并将所述填充图像块置于所述显示原点之前，与在所述Canvas中存储的字符串中所获取的所述展示区域中当前待显示字符串的信息，进行组合，生成图像。

即补足字符串之前的空白。

对应前述情况二，当所述Canvas中存储的字符串的结束边界位于所述展示区域中时，根据所述Canvas中存储的字符串的结束边界与所述展示区域的结束边界之间的距离生成填充图像块，并将所述填充图像块置于所述Canvas中存储的字符串的结束边界之后，与在所述Canvas中存储的字符串中所获取的所述展示区域中当前待显示字符串的信息，进行组合，生成图像。

即补足字符串之后的空白。

对应前述情况三，当所述Canvas中存储的字符串的起始边界和结束边界均没有位于所述展示区域中时，根据在所述Canvas中存储的字符串中所获取的所述展示区域中当前待显示字符串的信息，生成图像。

与现有技术相比，本申请实施例所提出的技术方案的有益技术效果包括：

本申请实施例公开了一种基于Canvas的UI界面字符展示方法和显示设备，该方法在UI界面的焦点移动至基于Canvas的展示区域，并且Canvas中存储的字符串的长度大于展示区域可显示的字符串长度时，每隔预设时间间隔，计算展示区域中当前待显示字符串的信息，将Canvas中存储的相对应的字符串生成图像，并刷新UI界面，以使生成的图像在展示区域内显示，从而，对于基于Canvas的UI界面显示场景，克服缺少滚动指令的限制，在不增加额外系统资源消耗的情况下，以更新被显示图像内容的方式实现文字平滑滚动的效果，进而，提高用户浏览UI界面时的使用体验。

为了进一步阐述本申请的技术思想，现结合具体的应用场景，对本申请的技术方案进行说明。如图4所示，为本申请的优选实施例中的一种平滑的文字滚动展示效果图，其所滚动展示的完整文字内容如图5所示，本申请实施例对于图4中所示的文字展示过程进行说明如下。

如图6所示，为本申请具体实施例提出的一种基于Canvas的UI界面字符展示方法的流程示意图，具体包括以下的步骤：

步骤S601、获取字符串的显示长度、显示宽度。

具体的，利用Canvas提供的measureText(str)接口，得到字符串的长度和宽度，即图5中的a和h。

步骤S602、设置图像滚动展示的开始位置。

具体的，图像滚动展示的开始位置设为展示区域约五分之一处(此处的数值设置时是一种优选示例，并不会影响本申请的保护范围，本实施例中的以下类似情况不再一一指出)，文字滚动展示后设置一定的缓冲时间供用户阅读展示内容，即待显示字符串的x坐标x0＝x1+w*0.2，其中，w为显示宽度，具体如图7所示。

而开始滚动展示后，处于中间状态的字符串状态如图8所示。

步骤S603、设置图像滚动展示的结束位置。

具体的，图像滚动展示的结束位置设为文字的尾部与展示区域的右端距离为w*0.2处，也就是文字的x坐标x0＝x1+w*0.8-a，具体如图9所示，图像滚动展示到该位置时，同样设置一定的缓冲时间供用户阅读展示内容。

步骤S604、计算文字滚动展示所需时间。

具体的，设定文字是从右向左滚动，根据UI配置的文字滚动展示速度v(单位：px/s)，以及以上步骤得到的文字滚动展示开始位置和结束位置，可算出该文字滚动展示所需时间t＝((x1+w*0.2)-(x1+w*0.8-a))/v，即t＝(a-0.6*w)/v。

步骤S605、计算文字滚动展示1像素需要的时间。

具体的，根据文字滚动展示速度v，可知移动1像素需要的毫秒数t1＝1000/v。

通过上述步骤的处理，完成了基础参数的准备过程。

在此基础上，一旦UI界面的焦点落在了相应的展示区域上，则执行步骤S606。

步骤S606、开始文字滚动展示。

具体的，首先将待显示字符串的x坐标设置为步骤S602所得到的计算结果x1+w*0.2。

然后利用setInterval接口，进行循环定时处理并记录这个interval的id，以便后续清空该记录。

需要说明的是，在将步骤S605计算出的毫秒数t1作为参数传入setInterval接口之后，则每隔该毫秒数，需要进行以下步骤S607～步骤S613的循环操作。

步骤S607、判断焦点是否还处于当前的展示区域上。

具体的，由于捕获焦点为较成熟技术，在此不予赘述。

如果焦点已经移开，则并执行步骤S608。

如果焦点还处于当前的展示区域上，则执行步骤S609。

步骤S608、跳出循环，恢复文字位置并清空延时处理，结束文字滚动展示流程。

步骤S609、将该待显示字符串的x坐标左移一个像素。

步骤S610、重新计算待显示字符串的显示范围。

具体的，由于设定文字是从右向左滚动，所以，只计算横向的显示范围，如图7-9所示，为本申请的优选实施例中的几种待显示字符串选取范围的示意图，因为待显示字符串左上角为绘制原点O(即前述的步骤S302中所提及的显示原点)，故其横向显示范围设为相对于绘制原点O的横坐标x2，横向绘制长度为k。具体的计算方式如下：

如图7所示，当x1–x0<＝0时，说明待显示字符串开头在展示区域的起始边界的右边，故x2＝0，k＝w–(x0–x1)；

当x1–x0>0时，说明待显示字符串开头在展示区域的起始边界的左边，故x2＝x1–x0，此时：

如图8所示，当a–(x1–x0)>＝w时，k＝w。

如图9所示，当a–(x1–x0)<w时，k＝a–(x1–x0)。

步骤S611、根据计算结果生成待展示的图片。

步骤S612、刷新UI，展示图片呈现字符串滚动效果。

具体的，利用Canvas提供的drawImage接口，将待显示字符串转换的Canvas图像，以及步骤S609～步骤S611所计算出的坐标和绘制范围作为参数传入，更新待显示的图片。

步骤S613、判断是否滚动超时。

如果否，则返回步骤S607，继续执行滚动展示的循环操作。

如果是，则停止文字滚动展示，执行步骤S614。

具体的，利用setTimeout接口，进行延时处理，将步骤S604计算出的t作为时间参数传入setTimeout接口，在经过了时间t后，即判定为滚动超时，通过id清空步骤S606中执行的interval处理，使文字停止滚动，这时文字必然处于步骤S603计算出的结束位置处。

步骤S614、停止滚动展示，并将当前所展示的文字进行预设时间的滞留。

文字停止滚动后，还需将文字在滚动结束位置停留一段时间(设为n)，以便用户进行浏览。

具体的，在执行步骤S612后，再次利用setTimeout接口，将n作为时间参数，在经过时间n后，可以重新开始执行步骤S606，开始下一轮的滚动展示。

与现有技术相比，本申请实施例所提出的技术方案的有益技术效果包括：

本申请实施例公开了一种基于Canvas的UI界面字符展示方法和显示设备，该方法在UI界面的焦点移动至基于Canvas的展示区域，并且Canvas中存储的字符串的长度大于展示区域可显示的字符串长度时，每隔预设时间间隔，计算展示区域中当前待显示字符串的信息，将Canvas中存储的相对应的字符串生成图像，并刷新UI界面，以使生成的图像在展示区域内显示，从而，对于基于Canvas的UI界面显示场景，克服缺少滚动指令的限制，在不增加额外系统资源消耗的情况下，以更新被显示图像内容的方式实现文字平滑滚动的效果，进而，提高用户浏览UI界面时的使用体验。

为更清楚地说明本申请前述实施例提供的方案，基于与上述方法同样的发明构思，本申请实施例还提出了一种显示设备，用于展示包含基于Canvas的展示区域的UI界面，其结构示意图如图10所示，具体包括：

识别模块101，用于在所述UI界面的焦点移动至基于Canvas的展示区域时，读取所述Canvas中存储的字符串信息；

处理模块102，用于当所述识别模块101确定所述Canvas中存储的字符串的长度大于所述展示区域可显示的字符串长度时，每隔预设时间间隔，计算按照预设滚动速度和方向移动所述Canvas中存储的字符串时，所述展示区域中当前待显示字符串的信息；

显示模块103，用于将所述处理模块102所计算得到的所述Canvas中存储的与所述当前待显示字符串的信息相对应的字符串生成图像，并刷新所述UI界面，以使生成的所述图像在所述展示区域内显示。

优选的，所述处理模块102，具体用于：

每隔预设时间间隔，确定自所述焦点移动至Canvas的展示区域开始，到当前时刻所经过的时间长度；

根据所述时间长度，按照预设的滚动速度和方向，确定所述Canvas中存储的字符串所移动的距离；

根据所述Canvas中存储的字符串所移动的距离，以及所述展示区域预设的起始位置，在所述Canvas中存储的字符串中确定显示原点的当前位置，所述显示原点为对应所述展示区域待显示字符串的起始坐标；

基于所述Canvas中存储的字符串的起始边界和结束边界在所述展示区域中的位置，以及所述展示区域的尺寸信息，确定所述展示区域待显示的字符串的长度信息；

根据所述显示原点的当前位置以及所述展示区域待显示的字符串的长度信息，在所述Canvas中存储的字符串中获取所述展示区域中当前待显示字符串的信息，直到所述Canvas中存储的字符串的结束边界的当前位置到达所述展示区域预设的结束位置。

优选的，所述处理模块102，具体用于：

识别所述Canvas中存储的字符串的起始边界和结束边界在所述展示区域中的位置；

当所述Canvas中存储的字符串的起始边界位于所述展示区域中时，确定所述显示原点的当前位置相对于所述展示区域的起始位置的距离，并将所述展示区域的长度与所述距离的差值作为所述展示区域待显示的字符串的长度信息；

当所述Canvas中存储的字符串的结束边界位于所述展示区域中时，将所述显示原点的当前位置到所述Canvas中存储的字符串的结束边界之间的长度值作为所述展示区域待显示的字符串的长度信息；

当所述Canvas中存储的字符串的起始边界和结束边界均没有位于所述展示区域中时，将所述展示区域的长度值作为所述展示区域待显示的字符串的长度信息。

优选的，所述显示模块103，具体用于：

当所述Canvas中存储的字符串的起始边界位于所述展示区域中时，根据所述Canvas中存储的字符串的起始边界与所述展示区域的起始边界之间的距离生成填充图像块，并将所述填充图像块置于所述显示原点之前，与在所述Canvas中存储的字符串中所获取的所述展示区域中当前待显示字符串的信息，进行组合，生成图像；

当所述Canvas中存储的字符串的结束边界位于所述展示区域中时，根据所述Canvas中存储的字符串的结束边界与所述展示区域的结束边界之间的距离生成填充图像块，并将所述填充图像块置于所述Canvas中存储的字符串的结束边界之后，与在所述Canvas中存储的字符串中所获取的所述展示区域中当前待显示字符串的信息，进行组合，生成图像；

当所述Canvas中存储的字符串的起始边界和结束边界均没有位于所述展示区域中时，根据在所述Canvas中存储的字符串中所获取的所述展示区域中当前待显示字符串的信息，生成图像。

优选的，所述处理模块102，还用于：

所述每隔预设时间间隔，判断所述UI界面的焦点是否位于所述展示区域；

若是，则继续对所述焦点移动至Canvas的展示区域的时间进行计时，并确定自所述焦点移动至Canvas的展示区域开始，到当前时刻所经过的时间长度；

若否，则停止对所述焦点移动至Canvas的展示区域的时间的计时，并将所述展示区域当前所显示的图片重置为预设的初始图片。

与现有技术相比，本申请实施例所提出的技术方案的有益技术效果包括：

本申请实施例公开了一种基于Canvas的UI界面字符展示方法和显示设备，该方法在UI界面的焦点移动至基于Canvas的展示区域，并且Canvas中存储的字符串的长度大于展示区域可显示的字符串长度时，每隔预设时间间隔，计算展示区域中当前待显示字符串的信息，将Canvas中存储的相对应的字符串生成图像，并刷新UI界面，以使生成的图像在展示区域内显示，从而，对于基于Canvas的UI界面显示场景，克服缺少滚动指令的限制，在不增加额外系统资源消耗的情况下，以更新被显示图像内容的方式实现文字平滑滚动的效果，进而，提高用户浏览UI界面时的使用体验。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到本申请可以通过硬件实现，也可以借助软件加必要的通用硬件平台的方式来实现。基于这样的理解，本申请的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施场景所述的方法。

本领域技术人员可以理解附图只是一个优选实施场景的示意图，附图中的模块或流程并不一定是实施本申请所必须的。

本领域技术人员可以理解实施场景中的装置中的模块可以按照实施场景描述进行分布于实施场景的装置中，也可以进行相应变化位于不同于本实施场景的一个或多个装置中。上述实施场景的模块可以合并为一个模块，也可以进一步拆分成多个子模块。

上述本申请序号仅仅为了描述，不代表实施场景的优劣。

以上公开的仅为本申请的几个具体实施场景，但是，本申请并非局限于此，任何本领域的技术人员能思之的变化都应落入本申请的保护范围。

Claims (10)

1.一种基于Canvas的UI界面字符展示方法，其特征在于，所述方法包括：

当UI界面的焦点移动至基于Canvas的展示区域时，读取所述Canvas中存储的字符串信息；

当所述Canvas中存储的字符串的长度大于所述展示区域可显示的字符串长度时，每隔预设时间间隔，计算按照预设滚动速度和方向移动所述Canvas中存储的字符串时，所述展示区域中当前待显示字符串的信息；

将所述Canvas中存储的与所述当前待显示字符串的信息相对应的字符串生成图像，并刷新所述UI界面，以使生成的所述图像在所述展示区域内显示。

2.如权利要求1所述的方法，其特征在于，所述每隔预设时间间隔，计算按照预设滚动速度和方向移动所述Canvas中存储的字符串时，所述展示区域中当前待显示字符串的信息，具体包括：

每隔预设时间间隔，确定自所述焦点移动至Canvas的展示区域开始，到当前时刻所经过的时间长度；

根据所述时间长度，按照预设的滚动速度和方向，确定所述Canvas中存储的字符串所移动的距离；

根据所述Canvas中存储的字符串所移动的距离，以及所述展示区域预设的起始位置，在所述Canvas中存储的字符串中确定显示原点的当前位置，所述显示原点为对应所述展示区域待显示字符串的起始坐标；

基于所述Canvas中存储的字符串的起始边界和结束边界在所述展示区域中的位置，以及所述展示区域的尺寸信息，确定所述展示区域待显示的字符串的长度信息；

根据所述显示原点的当前位置以及所述展示区域待显示的字符串的长度信息，在所述Canvas中存储的字符串中获取所述展示区域中当前待显示字符串的信息，直到所述Canvas中存储的字符串的结束边界的当前位置到达所述展示区域预设的结束位置。

3.如权利要求2所述的方法，其特征在于，基于所述Canvas中存储的字符串的起始边界和结束边界在所述展示区域中的位置，以及所述展示区域的尺寸信息，确定所述展示区域待显示的字符串的长度信息，具体包括：

识别所述Canvas中存储的字符串的起始边界和结束边界在所述展示区域中的位置；

当所述Canvas中存储的字符串的起始边界位于所述展示区域中时，确定所述显示原点的当前位置相对于所述展示区域的起始位置的距离，并将所述展示区域的长度与所述距离的差值作为所述展示区域待显示的字符串的长度信息；

当所述Canvas中存储的字符串的结束边界位于所述展示区域中时，将所述显示原点的当前位置到所述Canvas中存储的字符串的结束边界之间的长度值作为所述展示区域待显示的字符串的长度信息；

当所述Canvas中存储的字符串的起始边界和结束边界均没有位于所述展示区域中时，将所述展示区域的长度值作为所述展示区域待显示的字符串的长度信息。

4.如权利要求3所述的方法，其特征在于，将所述Canvas中存储的与所述当前待显示字符串的信息相对应的字符串生成图像，具体包括：

当所述Canvas中存储的字符串的起始边界位于所述展示区域中时，根据所述Canvas中存储的字符串的起始边界与所述展示区域的起始边界之间的距离生成填充图像块，并将所述填充图像块置于所述显示原点之前，与在所述Canvas中存储的字符串中所获取的所述展示区域中当前待显示字符串的信息，进行组合，生成图像；

当所述Canvas中存储的字符串的结束边界位于所述展示区域中时，根据所述Canvas中存储的字符串的结束边界与所述展示区域的结束边界之间的距离生成填充图像块，并将所述填充图像块置于所述Canvas中存储的字符串的结束边界之后，与在所述Canvas中存储的字符串中所获取的所述展示区域中当前待显示字符串的信息，进行组合，生成图像；

当所述Canvas中存储的字符串的起始边界和结束边界均没有位于所述展示区域中时，根据在所述Canvas中存储的字符串中所获取的所述展示区域中当前待显示字符串的信息，生成图像。

5.如权利要求2所述的方法，其特征在于，所述每隔预设时间间隔，确定自所述焦点移动至Canvas的展示区域开始，到当前时刻所经过的时间长度，还包括：

所述每隔预设时间间隔，判断所述UI界面的焦点是否位于所述展示区域；

若是，则继续对所述焦点移动至Canvas的展示区域的时间进行计时，并确定自所述焦点移动至Canvas的展示区域开始，到当前时刻所经过的时间长度；

若否，则停止对所述焦点移动至Canvas的展示区域的时间的计时，并将所述展示区域当前所显示的图片重置为预设的初始图片。

6.一种显示设备，其特征在于，用于展示包含基于Canvas的展示区域的UI界面，所述显示设备具体包括：

识别模块，用于在所述UI界面的焦点移动至基于Canvas的展示区域时，读取所述Canvas中存储的字符串信息；

处理模块，用于当所述识别模块确定所述Canvas中存储的字符串的长度大于所述展示区域可显示的字符串长度时，每隔预设时间间隔，计算按照预设滚动速度和方向移动所述Canvas中存储的字符串时，所述展示区域中当前待显示字符串的信息；

显示模块，用于将所述处理模块所计算得到的所述Canvas中存储的与所述当前待显示字符串的信息相对应的字符串生成图像，并刷新所述UI界面，以使生成的所述图像在所述展示区域内显示。

7.如权利要求6所述的显示设备，其特征在于，所述处理模块，具体用于：

每隔预设时间间隔，确定自所述焦点移动至Canvas的展示区域开始，到当前时刻所经过的时间长度；

根据所述时间长度，按照预设的滚动速度和方向，确定所述Canvas中存储的字符串所移动的距离；

根据所述Canvas中存储的字符串所移动的距离，以及所述展示区域预设的起始位置，在所述Canvas中存储的字符串中确定显示原点的当前位置，所述显示原点为对应所述展示区域待显示字符串的起始坐标；

基于所述Canvas中存储的字符串的起始边界和结束边界在所述展示区域中的位置，以及所述展示区域的尺寸信息，确定所述展示区域待显示的字符串的长度信息；

根据所述显示原点的当前位置以及所述展示区域待显示的字符串的长度信息，在所述Canvas中存储的字符串中获取所述展示区域中当前待显示字符串的信息，直到所述Canvas中存储的字符串的结束边界的当前位置到达所述展示区域预设的结束位置。

8.如权利要求7所述的显示设备，其特征在于，所述处理模块，具体用于：

识别所述Canvas中存储的字符串的起始边界和结束边界在所述展示区域中的位置；

当所述Canvas中存储的字符串的起始边界位于所述展示区域中时，确定所述显示原点的当前位置相对于所述展示区域的起始位置的距离，并将所述展示区域的长度与所述距离的差值作为所述展示区域待显示的字符串的长度信息；

当所述Canvas中存储的字符串的结束边界位于所述展示区域中时，将所述显示原点的当前位置到所述Canvas中存储的字符串的结束边界之间的长度值作为所述展示区域待显示的字符串的长度信息；

当所述Canvas中存储的字符串的起始边界和结束边界均没有位于所述展示区域中时，将所述展示区域的长度值作为所述展示区域待显示的字符串的长度信息。

9.如权利要求8所述的显示设备，其特征在于，所述显示模块，具体用于：

当所述Canvas中存储的字符串的起始边界位于所述展示区域中时，根据所述Canvas中存储的字符串的起始边界与所述展示区域的起始边界之间的距离生成填充图像块，并将所述填充图像块置于所述显示原点之前，与在所述Canvas中存储的字符串中所获取的所述展示区域中当前待显示字符串的信息，进行组合，生成图像；

当所述Canvas中存储的字符串的结束边界位于所述展示区域中时，根据所述Canvas中存储的字符串的结束边界与所述展示区域的结束边界之间的距离生成填充图像块，并将所述填充图像块置于所述Canvas中存储的字符串的结束边界之后，与在所述Canvas中存储的字符串中所获取的所述展示区域中当前待显示字符串的信息，进行组合，生成图像；

当所述Canvas中存储的字符串的起始边界和结束边界均没有位于所述展示区域中时，根据在所述Canvas中存储的字符串中所获取的所述展示区域中当前待显示字符串的信息，生成图像。

10.如权利要求7所述的显示设备，其特征在于，所述处理模块，还用于：

所述每隔预设时间间隔，判断所述UI界面的焦点是否位于所述展示区域；

若是，则继续对所述焦点移动至Canvas的展示区域的时间进行计时，并确定自所述焦点移动至Canvas的展示区域开始，到当前时刻所经过的时间长度；

若否，则停止对所述焦点移动至Canvas的展示区域的时间的计时，并将所述展示区域当前所显示的图片重置为预设的初始图片。