CN107438194A - 一种智能电视ui对象绘制方法及智能电视 - Google Patents

Abstract

本申请公开了一种智能电视UI对象绘制方法及智能电视，包括：在接收到UI启动指令后，创建Canvas标签；解析预设UI模板文件，得到所述预设UI模板文件中各UI对象的位置坐标和格式；根据所述各UI对象的位置坐标和格式，在所述Canvas标签上依次绘制所述UI对象。本申请公开的方法及智能电视，有效减少对处理器资源的占用，加快绘制速度，并且脱离CSS动画模板的限制。

Description

一种智能电视UI对象绘制方法及智能电视

技术领域

本申请涉及智能电视UI领域，尤其涉及一种智能电视UI对象绘制方法及智能电视。

背景技术

HTML5标准给Web前端开发带来了革命性的变化，提高了网页展示丰富性和交互性。在智能电视UI领域，采用基于浏览器的Web UI开发模式以及HTML5标准构建UI逐渐成为主流。

图1，为现有技术中智能电视显示系统结构示意图。如图1所示，智能电视在开机后，接收模块接收服务器端发送的多个html文件，其中，html文件中定义了UI(UserInterface，用户界面)界面的架构、UI对象的格式及内容。处理器通过数据总线获取html文件，解析html文件并根据html文件中的代码调用Flash存储器中存储的DOM(DocumentObject Model，文档对象模型)接口标准文件和CSS(Cascading Style Sheets，层叠样式表)层叠样式表，占用处理器内部资源使用DOM访问并解析html文件中的每个UI对象，按照UI对象由高到低的级数生成DOM树存储在存储器(具体还不确定是哪种存储器)。在绘制UI界面时，遍历查找DOM树中的UI对象，以及套用CSS层叠样式表中定义的动画模板绘制对象，同时发送至显示屏中显示。

但是，在使用DOM访问html文件时，DOM遍历每个UI对象创建DOM树，占用处理器的处理资源，同时DOM树存储在存储器中占用存储空间，从而降低UI的绘制速度；另外，由于CSS层叠样式表中的动画模板已经定义好，对于用不到的动画模板占用存储空间，而用到的动画模板限制UI的设计样式，与用户想展现的UI设计样式冲突。

发明内容

本申请提供了一种智能电视UI对象绘制方法及智能电视，以解决占用处理器资源、降低UI绘制速度以及受动画模板限制的问题。

第一方面，本申请提供了一种智能电视UI对象绘制方法，包括：

在接收到UI启动指令后，创建Canvas标签；

解析预设UI模板文件，得到所述预设UI模板文件中各UI对象的位置坐标和格式；

根据所述各UI对象的位置坐标和格式，在所述Canvas标签上依次绘制所述UI对象。

第二方面，本申请还提供了一种智能电视，包括处理器、图形处理器和存储器；

所述存储器用于存储程序代码；

所述处理器用于读取所述存储器中的程序代码，并执行第一方面所述的方法；

所述图形处理器用于根据所述处理器的指令，绘制所述智能电视的UI。

本申请提供的一种基于Canvas的智能电视UI对象绘制方法，包括以下有益效果：

本申请提供的实施例中，基于Canvas标签绘制智能电视的UI对象。Canvas是HTML5标准中定义的标签，Canvas提供的API(Applicat ion Programming Interface，绘制应用程序编程接口)可以直接调用图形处理器的硬件资源。

首先，本申请提供的方法中，基于Canvas标签绘制智能电视UI界面，在接收到UI启动指令后，根据预设代码创建Canvas标签，接下来调用API绘制接口将每一个UI界面的UI对象均绘制在Canvas标签上。由于Canvas标签自带调用图形处理器硬件资源的功能，因此，Canvas标签可基于图形处理器渲染UI对象对应的图片和文字等。由此可知，基于Canvas标签绘制智能电视UI对象时，可调用图形处理器硬件资源，减小处理器资源的占用，加快绘制速度。

其次，智能电视中预先设置UI模板文件，可以在预设UI模板文件中定义UI界面的架构、UI对象的格式及位置坐标信息，可根据开发商的需求自由定义UI对象，无需多余的模板，并且UI对象的格式不受CSS层叠样式表中动画模板的限制，从而脱离CSS层叠样式表中定义的动画模板的限制，增强UI设计样式的灵活性，并且避免多余的模板占用存储空间。

附图说明

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

图1为现有技术中智能电视显示系统结构示意图；

图2为本申请实施例提供的一种智能电视UI对象绘制方法流程示意图；

图3为本申请实施例提供的一种智能电视结构示意图；

图4为本申请实施例提供的一种预设UI模板树形结构示意图；

图5为本申请实施例提供的步骤S200流程示意图；

图6为本申请实施例提供的步骤S300流程示意图；

图7为本申请实施例提供的另一种智能电视UI对象绘制方法；

图8为本申请实施例提供的又一种智能电视UI对象绘制方法。

具体实施方式

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

Canvas标签是HTML5标准中的一个新标签，Canvas标签提供绘图API，能够直接调用GPU的硬件资源，实现图像绘制的硬件加速，大幅提高网页的图像处理性能。但是，Canvas标签不支持HTML DOM和CSS等布局管理和控制机制，也就是说Canvas标签不具备调用DOM和CSS接口的功能，因此，在Canvas标签上绘制UI时，需要开发人员通过编码实现UI架构和控制。Canvas标签是一个画布，在Canvas画布上显示图形，并且实现不同页面层叠时，需要通过代码实现。

参见图2，为本申请实施例提供的一种智能电视UI对象绘制方法流程示意图。

在步骤S100中，在接收到UI启动指令后，创建Canvas标签。

在按下遥控器的开机按键或者智能电视上的开机按键后，处理器接收到开机指令，根据开机指令生成UI启动指令，根据UI启动指令控制智能电视的UI显示。在接收到UI启动指令后，创建Canvas标签，以Canvas标签作为画布，在Canvas画布上绘制UI。

如图3所示，图3为本申请实施例提供的一种智能电视结构示意图。如图3所示，智能电视包括Flash存储器和图像处理器，在Flash存储器中存储html文件，html文件中写入创建Canvas标签的代码，并调用API绘图接口，控制图像处理器绘制Canvas标签。

开发商在生产智能电视时，将开发者开发的html文件存储在智能电视的Flash存储器中。html文件中的内容一般情况下不可更改，当需要更改html文件中的代码时，接收服务器发送的更新文件，从而更新html文件。

在步骤S200中，解析预设UI模板文件，得到预设UI模板文件中各UI对象的位置坐标和格式。

预设UI模板文件与创建Canvas标签的html文件一样，均预先存储在Flash存储器中。预设UI模板文件是UI架构文件，定义了UI的布局和结构，以及各UI对象的位置坐标和格式。

预设UI模板文件中的UI对象按照树形结构层级排序，Canvas标签为预设UI模板文件中的根节点，树形结构的每一个节点定义一个UI对象。预设UI模板文件中的各UI对象由一个文档实现定义，在文档中编码设置UI对象的位置坐标和格式，所有的文档以树形结构层级排序。依次解析预设UI模板文件中的每个文档，从而得到各对象的位置坐标和格式。

优选地，预设UI模板文件设置为Json文件，Json是JS中一组数据的字符串表示法，与XML(Extensible Markup Language，可扩展标记语言)有相似之处。一般情况下，Json用来在服务器与用户端之间传输数据用，本申请实施例中，将预设UI模板文件中的每个文档以Json文件形式编码，将每一个Json文档作为JS的一个对象，以不同Json文档作为不同的UI对象进行处理。

对于开发人员来说，在设计UI模板文件时，对于相同格式的UI对象，可以直接复制对应的Json文档，并且可以多次复制。例如，参见图4，图4为本申请实施例提供的一种预设UI模板树形结构示意图。如果Canvas标签被分隔为四个相同格式的区域，在那么，Canvas标签上绘制四个相同格式的container，每个container为一个UI对象，那么在预设UI模板文件中第一层级包括四个格式相同的Json文档，因此，可以复制三次格式相同的Json文档即可，对于UI对象的位置坐标可以再分别设置。

如果每个container中包含有相同格式的UI对象，依然可以重复多次复制Json文档。例如，如果Json文档1的子节点定义三个相同的UI对象，则Json文档1的子节点下的Json文档11、Json文档12和Json文档13对应相同格式的UI对象，因此，在建立好Json文档11后，直接两次复制Json文档11，命名为Json文档12和Json文档13即可。

在解析预设UI模板文件过程中，由于预设UI模板文件是根据树形结构层级顺序排列的，因此，可以根据预设UI模板文件由高到低的层级顺序，依次解析预设UI模板文件中同一层级节点下的所有UI对象后，在解析下一层级节点下的所有UI对象。

例如，在图4中，在解析预设UI模板文件时，先解析第一层级的Json文档1、Json文档2、Json文档3和Json文档4之后，在解析第二层级的Json文档，也就是Json文档1、Json文档2、Json文档3和Json文档4对应节点的子节点下的文档，例如，解析Json文档11、Json文档12和Json文档13，解析完Json文档11、Json文档12和Json文档13后，在解析Json文档2对应节点的子节点下的文档，直到解析完所有的Json文档。

或者，参见图5，为本申请实施例提供的步骤S200流程示意图。

在步骤S201中，根据预设UI模板文件由高到低的层级顺序，依次解析UI模板文件中同一层级节点下的UI对象。

在步骤S202中，如果解析的当前节点的UI对象存在子节点，则优先解析以当前节点为根节点的树形结构下各节点的UI对象，直至解析完所有节点下的UI对象。

另一种解析预设UI模板文件的方式是，如果解析的当前节点的UI对象存在子节点，则优先解析以当前节点为根节点的树形结构下各节点的UI对象。例如，如图4中所示，根据预设UI模板文件由高到低的层次顺序，依次解析UI模板文件中第一层级Json文档1、Json文档2、Json文档3和Json文档4，当解析Json文档1时，Json文档1存在子节点，所以，在解析完Json文档1后，优先解析以Json文档1为根节点的树形结构下各节点的UI对象，也就是优先解析Json文档11、Json文档12和Json文档13.

如果Json文档11存在子节点，则优先解析Json文档11的子节点，以此类推，不断循环，直到解析完所有的Json文档。当解析完以Json文档1为根节点的树形结构时，再解析Json文档2、Json文档3和Json文档4。

在步骤S300中，根据各UI对象的位置坐标和格式，在Canvas标签上依次绘制UI对象。

本申请实施例中的位置坐标以Canvas标签的左上角为原点，向右和向下分别为x、y轴，或者，以Canvas标签的中心点为原点，将Canvas标签分为四个象限。UI对象的位置坐标指UI对象绘制的起始点坐标、UI对象的中心坐标或者UI对象的某一个特征点坐标。

UI对象的格式包括UI对象的尺寸大小、属性、背景颜色等，如果UI对象是文字，则UI对象的格式还包括字体类型、字体大小、字体颜色等。每一个节点处的Json文档也定义了UI对象的属性，UI对象可以是文字、图片、图形、容器等。

在预设UI模板文件中每一个节点处的Json文档均以节点路径命名，可方便根据路径查找某一个UI对象。对于服务器发送的UI对象文件，以节点路径命名，方便根据节点路径查找UI对象在Canvas标签上的位置。

在绘制UI对象时，从UI对象的位置坐标处开始作为起始点，根据UI对象的格式绘制。例如，如果UI对象是一个容器，位置坐标是(0,0)，UI对象的大小是长3厘米宽2厘米，则从坐标点(0，0)开始，绘制大小是长3厘米宽2厘米的容器。

进一步的，参见图6，为本申请实施例提供的步骤S300流程示意图。

在步骤S301中，如果当前绘制的UI对象为图片和/或文字格式，则从服务器中获取命名与当前绘制的UI对象路径相同的图片和/或文字。

在依次解析预设UI模板文件的过程中，如果当前解析的UI对象是图片，在当前解析的Json文档中定义UI对象的位置坐标和格式，在Json文档中也可以定义UI对象的内容，如果UI对象时图片，可以定义图片信息，本申请实施例中，在Json文档中不定义图片信息，如果当前解析的UI对象为图片时，则接收服务器发送的图片，图片的命名与UI对象的路径相同。

同理，如果当前解析的UI对象是文字格式，则在Json文档中只定义UI对象是文字类型，但是不定义文字的内容，因为文字的内容变化性较大。所以，UI对象的文字内容可以从服务器中获取，由于文字内容的命名与UI对象的路径相同，因此，可通过当前解析UI对象的路径获取UI对象的文字内容。

在步骤S302中，在所述Canvas标签上，从当前绘制的所述UI对象的位置坐标开始，绘制所述图片和/或文字。

获取到图片和/或文字时，在Canvas标签上，从当前解析UI对象的位置坐标开始绘制图片和/或文字，绘制的大小、样式根据UI对象的格式确定。

由上述描述可知，在预设UI模板文件中，对于相同格式的UI对象，开发人员可多次复制相同格式的UI对象，节省开发时间和成本。在绘制UI对象过程中，对于格式相同的UI对象，也可以将UI对象复制在位置坐标处。

优选地，如果UI对象的格式与同层级的UI对象的格式相同，则将UI对象复制在同层级的UI对象的位置坐标。例如，在同一个容器中包含四个相同格式的图形时，可在绘制好一个图形时，另外三个图形直接复制绘制好的即可，可加快绘制时间。

由上述描述可知，本申请实施例中，将创建Canvas标签的html文件和定义UI架构的预设UI模板文件存储在智能电视的存储器中，在接收到UI启动指令后，从存储器中读取创建Canvas标签的html文件，创建Canvas标签；从存储器中读取预设UI模板文件，解析预设UI模板文件，得到各UI对象的位置坐标和格式，根据各UI对象的位置坐标和格式，调用Canvas标签的API接口，在Canvan标签上依次绘制UI对象。由于Canvas标签可调用Canvas标签，因此，Canvas标签可基于图形处理器渲染UI对象对应的图片和文字等UI对象，所以，基于Canvas标签绘制智能电视的UI时，减少处理器硬件资源的占用，加快绘制速度。

另外，本申请实施例中将定义UI架构的预设UI模板存储在存储器中，在预设UI模板文件中定义了UI的架构、UI对象的格式和位置坐标，开发人员可自由定义UI对象，不需要设计多个模板，在绘制过程中不受CSS层叠样式表中动画模板的限制，增强UI设计样式的灵活性，并且避免多余模板对存储空间的占用。

在上述实施例的基础上，参见图7，图7为本申请实施例提供的另一种智能电视UI对象绘制方法。

在步骤S400中，接收服务器发送的UI对象的位置坐标和/或格式信息。

本申请提供的实施例中，预设UI模板文件定义了UI架构和各UI对象的格式和位置坐标，因此，智能电视的UI是预先定义好的，在接收到UI启动指令后直接根据预设文件绘制UI即可。

但是，对于需要更改UI的情况，需要接受服务器发送的UI对象的位置坐标和/或格式信息，服务器发送的信息以路径命名，以表示需要对哪一个节点处的UI对象进行更改。例如，想要更改UI导航栏的位置，将UI导航栏由UI顶部设置在底部时，导航栏包括一个容器和容器内的多个导航文字，因此，在更改导航栏时，需要将导航栏的容器移动到UI的底部即可。

在步骤S500中，在所述UI模板文件中查找所述UI对象。

在预设UI模板文件中查找UI对象，即在预设UI模板文件中根据命名的路径查找与路径命名相同的Json文档。

接收服务器发送的导航栏容器的位置坐标，该位置坐标信息以导航栏容器的路径命名，解析导航栏容器的位置坐标，根据路径命名在预设UI模板文件中查找导航栏容器对应的Json文档。

在步骤S600中，将所述UI对象的位置坐标和/或格式，替换为新的位置坐标和/或格式

例如，查找到命名路径对应的Json文档后，将导航栏容器的位置坐标替换为新的位置坐标。对于导航栏容器中的文字对象，如果文字对象的位置坐标是以Canvas为基准定义的，那么同时也需要更改文字对象的位置坐标，将文字绘制在导航栏容器上。

由上述描述可知，本申请实施例中提供的方法，用于更改预设UI模板文件中的信息。智能电视中虽然预置定义UI架构的UI模板文件，但是并不限制智能电视的UI，当需要更改智能电视的UI时，服务器向智能电视发送UI对象的位置坐标和/或格式信息，将预设UI模板文件中UI对象的位置坐标和/或格式信息替换为新的位置坐标和/或格式信息即可。

参见图8，为本申请实施例提供的又一种智能电视UI对象绘制方法。

在步骤S700中，接收服务器发送的预设UI模板文件更新信息。

当整体更新智能电视的UI时，只需要更新预设UI模板文件即可，因此，服务器发送预设UI模板文件更新信息至智能电视，智能电视接收服务器发送的预设UI模板文件更新信息。

在步骤S800中，按照所述预设UI模板文件更新信息由高到低的层级顺序，依次更新所述预设UI模板文件

接收到预设UI模板文件更新信息后，根据由高到低的层级顺序，依次更新预设模板文件。参见图4，先更新第一层级的Json文档1、Json文档2、Json文档3和Json文档4.然后再更新Json文档1的子节点下的Json文档，依次更新，直到更新完所有的Json文档。

由上述描述可知，本申请实施例提供的方法，可以用于更新智能电视中的预设UI模板文件，从而更新智能电视的UI界面，减少预设UI模板文件对智能电视UI的限制。

本申请实施例还提供一种智能电视，包括处理器、图形处理器和存储器，其中，存储器用于存储程序代码；处理器用于读取所述存储器中的程序代码，并执行上述实施例提供的方法；图形处理器用于根据处理器的指令，绘制智能电视的UI。

本领域技术人员在考虑说明书及实践这里发明的公开后，将容易想到本发明的其它实施方案。本申请旨在涵盖本发明的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本发明的一般性原理并包括本发明未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本发明的真正范围和精神由下面的权利要求指出。

应当理解的是，本发明并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本发明的范围仅由所附的权利要求来限制。

Claims (10)

1.一种智能电视UI对象绘制方法，其特征在于，包括：

在接收到UI启动指令后，创建Canvas标签；

解析预设UI模板文件，得到所述预设UI模板文件中各UI对象的位置坐标和格式；

根据所述各UI对象的位置坐标和格式，在所述Canvas标签上依次绘制所述UI对象。

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

接收服务器发送的UI对象的位置坐标和/或格式信息；

在所述UI模板文件中查找所述UI对象；

将所述UI对象的位置坐标和/或格式，替换为新的位置坐标和/或格式。

3.根据权利要求1所述的方法，其特征在于，根据所述UI对象的位置坐标和格式，在所述Canvas标签上依次绘制所述UI对象，包括：

如果当前绘制的UI对象为图片和/或文字格式，则从服务器中获取命名与当前绘制的UI对象路径相同的图片和/或文字；

在所述Canvas标签上，从当前绘制的所述UI对象的位置坐标开始，绘制所述图片和/或文字。

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

接收服务器发送的预设UI模板文件更新信息；

按照所述预设UI模板文件更新信息由高到低的层级顺序，依次更新所述预设UI模板文件。

5.根据权利要求1所述的方法，其特征在于，所述预设UI模板文件中的UI对象按照树形结构层级排序。

6.根据权利要求5所述的方法，其特征在于，解析所述预设UI模板文件，得到所述UI模板文件中各UI对象的位置坐标和格式，包括：

根据所述预设UI模板文件由高到低的层级顺序，依次解析所述UI模板文件中同一层级节点下的所有UI对象后，再解析下一层级节点下的所有UI对象。

7.根据权利要求5所述的方法，其特征在于，解析所述预设UI模板文件，得到所述UI模板文件中各UI对象的位置坐标和格式，包括：

根据所述预设UI模板文件由高到低的层级顺序，依次解析所述UI模板文件中同一层级节点下的UI对象；

如果解析的当前节点的UI对象存在子节点，则优先解析以当前节点为根节点的树形结构下各节点的UI对象，直至解析完所有节点下的UI对象。

8.根据权利要求1所述的方法，其特征在于，所述根据所述各UI对象的位置坐标和格式，在所述Canvas标签上依次绘制所述UI对象，包括：

如果所述UI对象的格式与同层级的UI对象的格式相同，则将所述UI对象复制在同层级的UI对象的位置坐标。

9.根据权利要求1所述的方法，其特征在于，所述预设UI模板文件设置为Json文件。

10.一种智能电视，其特征在于，包括处理器、图形处理器和存储器；

所述存储器用于存储程序代码；

所述处理器用于读取所述存储器中的程序代码，并执行如权利要求1至9任一所述的方法；

所述图形处理器用于根据所述处理器的指令，绘制所述智能电视的UI。