CN110069254B - 文本显示方法、装置及服务器 - Google Patents

Abstract

本申请提供的文本显示方法、装置及服务器，应用于网页显示装置。该网页显示装置获取一网页文件，并在运行该网页文件的过程中，将待显示文本在网页画布中按照预设渲染效果对待显示文本进行渲染，获取该网页画布中待显示文本渲染后的渲染参数。根据获取到的渲染参数，通过WebGL在图形开发区域对该待显示文本进行渲染。如此，使得在不使用第三方字体库的情况下，实现文本在图形开发区域的显示，减少了程序的体积。

Description

文本显示方法、装置及服务器

技术领域

本申请涉及图形处理领域，具体而言，涉及一种文本显示方法、装置及服务器。

背景技术

WebAssembly技术作为一项通过C/C++开发网页端程序的技术，用以提升网页程序运行性能。因此，越来越多的网页项目都基于此技术进行开发。然而，受限于标准库功能的不足，通过C/C++开发程序经常需要使用第三方库。第三方库的引入会带来程序数据的增加，对于程序体积敏感的网页程序，不能满足实际项目的需求。

发明内容

为了克服现有技术中的至少一个不足，本申请的目的之一在于提供一种文本显示方法，应用于网页显示设备，所述方法包括：

获取一网页文件，所述网页文件携带有至少一个文本对应的渲染效果；

获取待显示文本，在预设的第一区域根据所述待显示文本的渲染效果对所述待显示文本进行渲染；

获取所述第一区域中待显示文本的渲染参数；

在预设的第二区域中，根据所述待显示文本的渲染参数通过WebGL对所述待显示文本进行渲染。

可选地，所述第一区域被所述第二区域隐藏，使得所述第一区域肉眼不可见。

可选地，所述方法还包括：

生成渲染参数库，记录所述待显示文本的渲染参数；

所述获取所述第一区域中待显示文本的渲染参数步骤包括：

检查所述渲染参数库中是否存在所述待显示文本；

若所述待显示文本存在于所述渲染参数库中，从所述渲染参数获取该待显示文本对应的渲染参数。

可选地，所述方法还包括：

生成渲染参数库，记录所述待显示文本在所述第一区域中的位置和大小；

所述获取待显示文本，在预设的第一区域根据所述待显示文本的渲染效果对所述待显示文本进行渲染的步骤包括：

检查所述渲染参数库中是否存在所述待显示文本；

若所述待显示文本不存在于所述渲染参数库中，根据所述渲染参数库中已记录的文本在所述第一区域中的位置和大小；将所述待显示文本在所述第一区域的空白区域进行渲染。

可选地，所述网页显示设备包括图像处理器，所述在预设的第二区域中，根据所述待显示文本的渲染参数通过WebGL对所述待显示文本进行渲染的步骤包括：

生成所述待显示文本的顶点缓冲以及对应的索引缓冲，所述顶点缓冲用于记录各个顶点颜色和纹理坐标，所述顶点用于将所述待显示文本的表面分成多个区域；

将所述待显示文本的渲染参数及文本大小写入所述顶点缓冲；

根据所述渲染参数及文本大小，通过所述WebGL控制所述图像处理器对所述待显示文本进行渲染。

本申请实施例的另一目的在于提供一种文本显示装置，所述文本显示装置包括文件获取模块、第一渲染模块、参数获取模块和第二渲染模块；

所述文件获取模块用于获取一网页文件，所述网页文件携带有至少一个文本对应的渲染效果；

所述第一渲染模块用于获取待显示文本，在预设的第一区域根据所述待显示文本的渲染效果对所述待显示文本进行渲染；

所述参数获取模块用于获取所述第一区域中待显示文本的渲染参数；

所述第二渲染模块用于在预设的第二区域中，根据所述待显示文本的渲染参数通过WebGL对所述待显示文本进行渲染。

可选地，所述第一区域被所述第二区域隐藏，使得所述第一区域肉眼不可见。

可选地，所述文本显示装置还包括第一记录模块；

所述第一记录模块用于生成渲染参数库，记录所述待显示文本的渲染参数；

所述参数获取模块通过以下方式获取所述待显示文本的渲染参数：

检查所述渲染参数库中是否存在所述待显示文本；

若所述待显示文本存在于所述渲染参数库中，从所述渲染参数获取该待显示文本对应的渲染参数。

可选地，所述文本显示装置还包括第二记录模块；

所述第二记录模块用于生成渲染参数库，记录所述待显示文本在所述第一区域中的位置和大小；

所述第一渲染模块通过以下方式对所述待显示文本进行渲染：

检查所述渲染参数库中是否存在所述待显示文本；

若所述待显示文本不存在于所述渲染参数库中，根据所述渲染参数库中已记录的文本在所述第一区域中的位置和大小；将所述待显示文本在所述第一区域的空白区域进行渲染。

本申请实施例的另一目的在于提供一种服务器，所述服务器存储有预设网页文件，当所述服务器获取到数据处理设备发送的获取请求时，将所述预设网页文件发送给所述数据处理设备，使得所述数据处理设备运行所述预设网页文件时，实现所述的文本显示方法。

相对于现有技术而言，本申请具有以下有益效果：

本申请实施例提供的文本显示方法、装置及服务器，应用于网页显示装置。该网页显示装置获取一网页文件，并在运行该网页文件的过程中，将待显示文本在网页画布中按照预设渲染效果对待显示文本进行渲染，获取该网页画布中待显示文本渲染后的渲染参数。根据获取到的渲染参数，通过WebGL在图形开发区域对该待显示文本进行渲染。如此，使得在不使用第三方字体库的情况下，实现文本在图形开发区域的显示，减少了程序的体积。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为本申请实施例提供的网页显示设备的硬件结构图；

图2为本申请实施例提供的文本显示方法的步骤流程图；

图3为本申请实施例提供的待显示文本的渲染流程图；

图4为本申请实施例提供的文本显示装置的结构示意图之一；

图5为本申请实施例提供的文本显示装置的结构示意图之二；

图6为本申请实施例提供的服务器与网页显示设备的通信示意图。

图标：100-服务器；200-网页显示设备；140-通信单元；130-处理器；110-文本显示装置；120-存储器；1101-文件获取模块；1102-第一渲染模块；1103-参数获取模块；1104-第二渲染模块；1105-第一记录模块；1106-第二记录模块。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。

因此，以下对在附图中提供的本申请的实施例的详细描述并非旨在限制要求保护的本申请的范围，而是仅仅表示本申请的选定实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

请参照图1，图1为本申请实施例提供的一种网页显示设备200的硬件结构图，该网页显示设备200包括文本显示装置110、存储器120、处理器130、通信单元140。所述存储器120、处理器130以及通信单元140各元件相互之间直接或间接地电性连接，以实现数据的传输或交互。例如，这些元件相互之间可通过一条或多条通讯总线或信号线实现电性连接。所述文本显示装置110包括至少一个可以软件或固件(firmware)的形式存储于所述存储器120中或固化在所述网页显示设备200的操作系统(operating system，OS)中的软件功能模块。所述处理器130用于执行所述存储器120中存储的可执行模块，例如所述文本显示装置110所包括的软件功能模块及计算机程序等。

所述网页显示设备200可以是，但不限于，智能手机、个人电脑(personalcomputer，PC)、平板电脑、个人数字助理(personal digital assistant，PDA)、移动上网设备(mobile Internet device，MID)等。

所述存储器120可以是，但不限于，随机存取存储器(Random Access Memory，RAM)，只读存储器(Read Only Memory，ROM)，可编程只读存储器(Programmable Read-OnlyMemory，PROM)，可擦除只读存储器(Erasable Programmable Read-Only Memory，EPROM)，电可擦除只读存储器(Electric Erasable Programmable Read-Only Memory，EEPROM)等。其中，存储器120用于存储程序，所述处理器130在接收到执行指令后，执行所述程序。所述通信单元140用于通过所述网络建立所述服务器与网页显示设备200之间的通信连接，并用于通过所述网络收发数据。

所述处理器130可能是一种集成电路芯片，具有信号的处理能力。上述的处理器130可以是通用处理器，包括中央处理器(Central Processing Unit，简称CPU)、网络处理器(Network Processor，简称NP)等；还可以是数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

请参照图2，图2为应用于图1所示的网页显示设备200的文本显示方法的步骤流程图，下面就该文本显示方法的各个步骤进行详细的阐述。

步骤S100，获取一网页文件，所述网页文件携带有至少一个文本对应的渲染效果。

可选地，该网页显示设备200通过网络从服务器获取一个网页文件，其中，该网页文件包括WebAssembly可执行代码和JavaScript可执行代码。该WebAssembly执行代码为一种新的编码方式，可以在浏览器中运行的。由于该WebAssembly执行代码是一种低级的类汇编语言，具有紧凑的二进制格式，因此，WebAssembly执行代码在运行的时候可以接近你原生的机器码的运行性能。WebAssembly执行代码是经C/C++编译获得，在使用第三方字体库的时，WebAssembly执行代码的会占用大量的存储空间。例如，在一种可能的示例中，该第三方字体库为FreeType。该WebAssembly可执行代码中携带有需要通过WebAssembly可执行代码进行显示的文本和该文本对应的渲染效果。

步骤S200，获取待显示文本，在预设的第一区域根据所述待显示文本的渲染效果对所述待显示文本进行渲染。

步骤S300，获取所述第一区域中待显示文本的渲染参数。

步骤S400，在预设的第二区域中，根据所述待显示文本的渲染参数通过WebGL对所述待显示文本进行渲染。

该网页显示设备200运行该网页文件时，该网页包括第一区域和第二区域，其中，该第一区域为网页的画布标签(Element Canvas)形成的画布区域。例如，在一种可能的示例中，通过在网页文件通过代码“<canvas id＝"myCanvas"width＝"512"height＝"512"></canvas>”形成该第一区域，该第一区域为宽度为512，长度为512的画布区域。该第二区域为通过WebGL进行三维场景显示的3D显示区域。

在申请提供的一种实施例中，为了避免在第一区域中多次重复渲染相同的文本，进而提高了程序执行效率，以及用户体验。该网页设备在运行该网页文件时，生成一个渲染参数库，该渲染参数库用于记录待显示文本的渲染参数。该网页显示设备200在运行该网页文件的WebAssembly可执行代码时，运行到需要显示该待显示文本的位置，先查询该渲染参数库。

若在该渲染参数库只中没有找到待渲染文本，该网页显示设备200则调用JavaScript可执行代码在在第一区域中进行渲染，并根据渲染结果从该第一区域中获取待显示文本的渲染参数。该网页显示设备200的WebAssembly可执行代码根据该待显示文本的渲染参数，通过WebGL在第二区域中进行渲染。进一步地，将该待显示文本的渲染参数记录到该渲染参数库中。

若在该渲染参数库中，记录有该待显示文本的渲染参数，该网页显示设备200直接从该渲染参数库中，获取该带显示文本的渲染参数，并通过WebGL在该第二区域中，根据该待显示文本的渲染参数进行渲染。

例如，在一种可能的示例中，请参照图3，图3为该网页显示设备200对待显示文本的渲染流程图。该待显示文本为文本“好”，该待显示文本的渲染效果为“楷体、加粗、14号”。该渲染参数库为一表格，用于记录待显示文本的渲染参数。该网页显示设备200通过该WebAssembly可执行代码运行到需要显示文本“好”，先检查该渲染参数库是否存在该文本“好”的渲染参数。若该渲染参数库中没有该文本“好”的渲染参数，该网页显示设备200通过WebAssembly可执行代码调用JavaScript可执行代码在画布中对该文本“好”进行渲染，然后获取该文本“好”的渲染参数。该网页显示设备200根据该文本“好”的渲染参数，通过WebAssembly可执行代码调用WebGL在第二区域中渲染出该文本“好”。进一步地，该网页显示设备200将该文本“好”的渲染参数记录到该渲染参数库中。当该网页显示设备200再次需要通过WebAssembly可执行代码显示文本“好”时，直接从该文本渲染库中获取对应的渲染参数即可。

在申请提供的另一种实施例中，为了避免第一区域中在后渲染的文本对在先渲染的文本造成覆盖，进而影响对待显示文本的渲染参数的提取。该网页显示设备200在运行该网页文件时，生成一个渲染参数库，用于待显示文本在第一区域中的位置和大小。该网页显示设备200在运行该网页文件的WebAssembly可执行代码时，运行到需要显示该待显示文本的位置，先查询该渲染参数库。若所述待显示文本不存在于所述渲染参数库，根据该渲染参数库中已记录的文本在第一区域中的位置和大小，将该待显示文本在第一区域的空白区域进行渲染。

请再次参照图3，将该待显示文本“好”在第一区域中的位置和大小记录到该渲染参数库中。

可选地，为了提高用户体验，该第二区域将第一区域隐藏，使得第一区域肉眼不可见。网页显示设备200在第二区域中对待显示文本的渲染动作为默默执行。

可选地，为了提高文本的渲染效率，该网页显示设备200还包括图像处理器。该网页设备生成该待显示文本的顶点缓冲以及对应的索引缓冲，该顶点缓冲用于将该待显示文本显示在屏幕对应的坐标上，该索引缓冲用于记录各个顶点的序号，所述顶点用于将所述待显示文本的表面分成多个区域。该网页显设备将待显示文本的渲染参数及文本大小写入该顶点缓冲。该网页显示设备200根据渲染参数以及文本大小，通过WebGL控制该图像处理设备对所述待显示文本进行渲染。

本申请实施例还提供一种文本显示装置110，文本装置包括至少一个可以软件形式存储于存储器中的功能模块。请参照图4，图4为该文本显示装置110的结构示意图之一，从功能上划分，该文本装置可以包括文件获取模块1101、第一渲染模块1102、参数获取模块1103和第二渲染模块1104。

该文件获取模块1101用于获取一网页文件，所述网页文件携带有至少一个文本对应的渲染效果。

在本实施例中，该文件获取模块1101用于执行图2中的步骤S100，关于该文件获取模块1101的详细描述可以参考步骤S100的详细描述。

该第一渲染模块1102用于获取待显示文本，在预设的第一区域根据该待显示文本的渲染效果对该待显示文本进行渲染。

在本实施例中，该文件获取模块1101用于执行图2中的步骤S200，关于该文件获取模块1101的详细描述可以参考步骤S200的详细描述。

该参数获取模块1103用于获取该第一区域中待显示文本的渲染参数。

在本实施例中，该参数获取模块1103终于执行图2中的步骤S300，关于该参数获取模块1103的详细描述，请参考步骤S300的详细描述。

该第二渲染模块1104用于在预设第二区域中，根据该待显示文本的渲染参数通过WebGL对该待显示文本进行渲染。

在本实施例中，该第二渲染模块1104用于执行图2中的步骤S400，关于该第二渲染模块1104的详细描述可以参考步骤S400的详细描述。

可选地，该第一区域被该第二区域隐藏，使得该第一区域肉眼不可见。

可选地，请参照图5，图5为文本显示装置的结构示意图之二，该文本显示装置110还包括第一记录模块1105。该第一记录模块1105用于生成渲染参数库，记录该待显示文本的渲染参数。

其中，该参数记录模块通过以下方式获取该待显示文本的渲染参数：

检查该渲染参数库中是否存在该待显示文本。

若该待显示文本存在于该渲染参数库中，从该渲染参数获取该待显示文本对应的渲染参数。

可选地，请再次参照图5，该文本显示装置110还包括第二记录模块1106。该第二记录模块1106用于生成渲染参数库，记录该待显示文本在该第一区域中的位置和大小。

其中，该第一渲染模块1102通过以下方式对该待显示文本进行渲染：

检查该渲染参数库中是否存在该待显示文本；

若该待显示文本不存在于该渲染参数库中，根据该渲染参数库中已记录的文本在该第一区域中的位置和大小；将该待显示文本在该第一区域的空白区域进行渲染。

本本申请实施例还提供一种服务器100。请参照图6，图6为该服务器100和网页显示终端通信的示意图。该服务器100存储有预设网页文件，当该服务器100获取到数据处理设备发送的获取请求时，将该预设网页文件发送给该数据处理设备，使得该数据处理设备运行该预设网页文件时，实现该文本显示方法。

综上所述，本申请实施例提供的文本显示方法、装置及服务器，应用于网页显示装置。该网页显示装置获取一网页文件，并在运行该网页文件的过程中，将待显示文本在网页画布中按照预设渲染效果对待显示文本进行渲染，获取该网页画布中待显示文本渲染后的渲染参数。根据获取到的渲染参数，通过WebGL在图形开发区域对该待显示文本进行渲染。如此，使得在不使用第三方字体库的情况下，实现文本在图形开发区域的显示，减少了程序的体积。

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

另外，在本申请各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。

所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上所述，仅为本申请的各种实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应所述以权利要求的保护范围为准。

Claims (6)

1.一种文本显示方法，其特征在于，应用于网页显示设备，所述方法包括：

获取一网页文件，所述网页文件携带有至少一个文本对应的渲染效果；

运行所述网页文件，生成一个渲染参数库；

获取待显示文本，在预设的第一区域根据所述待显示文本的渲染效果对所述待显示文本进行渲染，包括：

检查所述渲染参数库中是否存在所述待显示文本；

若所述待显示文本不存在于所述渲染参数库中，根据所述渲染参数库中已记录的文本在第一区域中的位置和大小；将所述待显示文本在所述第一区域的空白区域进行渲染；

在所述渲染参数库中记录所述待显示文本的渲染参数以及所述待显示文本在所述第一区域中的位置和大小；

若所述待显示文本存在于所述渲染参数库中，从所述渲染参数库获取该待显示文本对应的渲染参数；

在预设的第二区域中，根据所述待显示文本的渲染参数通过WebGL对所述待显示文本进行渲染。

2.根据权利要求1所述的文本显示方法，其特征在于，所述第一区域被所述第二区域隐藏，使得所述第一区域肉眼不可见。

3.根据权利要求1所述的文本显示方法，其特征在于，所述网页显示设备包括图像处理器，所述在预设的第二区域中，根据所述待显示文本的渲染参数通过WebGL对所述待显示文本进行渲染的步骤包括：

生成所述待显示文本的顶点缓冲以及对应的索引缓冲，所述顶点缓冲用于记录各个顶点颜色和纹理坐标，所述顶点用于将所述待显示文本的表面分成多个区域；

将所述待显示文本的渲染参数及文本大小写入所述顶点缓冲；

根据所述渲染参数及文本大小，通过所述WebGL控制所述图像处理器对所述待显示文本进行渲染。

4.一种文本显示装置，其特征在于，所述文本显示装置包括第一记录模块、第二记录模块、文件获取模块、第一渲染模块、参数获取模块和第二渲染模块；

所述文件获取模块用于获取一网页文件，所述网页文件携带有至少一个文本对应的渲染效果；

所述第一记录模块，用于运行所述网页文件，生成渲染参数库；

所述第一渲染模块用于获取待显示文本，在预设的第一区域根据所述待显示文本的渲染效果对所述待显示文本进行渲染，所述第一渲染模块还具体用于：

检查所述渲染参数库中是否存在所述待显示文本；

若所述待显示文本不存在于所述渲染参数库中，根据所述渲染参数库中已记录的文本在第一区域中的位置和大小；将所述待显示文本在所述第一区域的空白区域进行渲染；

所述第二记录模块用于在所述渲染参数库中记录所述待显示文本在所述第一区域中的位置和大小；

所述第一记录模块，用于在所述渲染参数库中记录所述待显示文本的渲染参数；

所述参数获取模块用于若所述待显示文本存在于所述渲染参数库中，从所述渲染参数库获取该待显示文本对应的渲染参数；

所述第二渲染模块用于在预设的第二区域中，根据所述待显示文本的渲染参数通过WebGL对所述待显示文本进行渲染。

5.根据权利要求4所述的文本显示装置，其特征在于，所述第一区域被所述第二区域隐藏，使得所述第一区域肉眼不可见。

6.一种服务器，其特征在于，所述服务器存储有预设网页文件，当所述服务器获取到数据处理设备发送的获取请求时，将所述预设网页文件发送给所述数据处理设备，使得所述数据处理设备运行所述预设网页文件时，实现权利要求1-3任一项所述的文本显示方法。

Images