CN104951202B - 一种显示聊天内容的方法及装置 - Google Patents

Abstract

本发明公开了一种显示聊天内容的方法及装置，属于互联网技术领域。所述方法包括：获取待显示的聊天内容在聊天窗口的显示区域中的第一显示位置；根据所述第一显示位置，在所述显示区域中绘制形状为预设形状的图片，所述显示区域的正上方叠加有透明的富文本编辑框；根据所述第一显示位置，将所述待显示的聊天内容显示在所述富文本编辑框上。本发明通过聊天窗口中的显示区域中加载的富文本编辑框显示待显示的聊天内容，并在待显示的聊天内容显示之前预先绘制预设形状的图片。避免了由于使用网页容器显示聊天内容时造成的系统资源消耗过高的缺陷，提高了显示聊天内容的效率。

Description

一种显示聊天内容的方法及装置

技术领域

本发明涉及互联网技术领域，特别涉及一种显示聊天内容的方法及装置。

背景技术

为了方便用户与其好友进行交流以及拓宽用户的交际圈，目前出现了诸多的社交应用。社交应用将用户与用户的好友之间的聊天内容显示在聊天界面上。为了使显示聊天内容更加美观，目前出现了气泡聊天界面，社交应用将聊天内容都显示在气泡聊天界面中并达到气泡的显示效果。

社交应用可以通过如下方式将聊天内容显示在气泡聊天界面中，可以为：气泡聊天界面包括有两个区域，分别为显示区域和输入区域，显示区域为一个网页容器，该网页容器用于显示信息。社交应用在显示聊天内容时，首先根据该聊天内容的显示位置在该网页容器的代码中添加一个网页块，然后在该网页块中添加一个形状为气泡的背景图片，并将背景图片以及该聊天内容作为显示信息添加入该网页块中，最后通过解析引擎和渲染引擎对该网页容器的代码进行解析和渲染，以将该网页容器中包括的所有背景图片以及位于背景图片上的聊天内容显示出来。

发明人发现现有技术至少存在以下问题：

在每次显示聊天内容时需要通过解析引擎和渲染引擎对该网页容器的代码进行解析和渲染，当聊天内容较多时，网页容器中的代码量非常庞大，对该网页容器的代码进行解析和渲染会占用较大资源，造成系统卡顿，甚至会造成系统崩溃。

发明内容

为了解决现有技术的问题，本发明实施例提供了一种显示聊天内容的方法及装置。所述技术方案如下：

一方面，提供了一种显示聊天内容的方法，所述方法包括：

获取待显示的聊天内容在聊天窗口的显示区域中的第一显示位置；

根据所述第一显示位置，在所述显示区域中绘制形状为预设形状的图片，所述显示区域的预设位置叠加有透明的编辑框；

根据所述第一显示位置，将所述待显示的聊天内容显示在所述编辑框上。

另一方面，提供了一种显示聊天内容的装置，所述装置包括：

第一获取模块，用于获取待显示的聊天内容在聊天窗口的显示区域中的第一显示位置；

绘制模块，用于根据所述第一显示位置，在所述显示区域中绘制形状为预设形状的图片，所述显示区域的预设位置叠加有透明的编辑框；

第一显示模块，用于根据所述第一显示位置，将所述待显示的聊天内容显示在所述编辑框上。

另一方面，提供了一种显示聊天内容的方法，其特征在于，将待显示的聊天内容显示于聊天窗口的显示区域中，所述显示区域包括窗口背景层、文字背景层、文字层；所述窗口背景在所述显示区域的最底层；所述文字背景层在所述显示区域的中间层；所述文字层在所述显示区域的最上层；

所述方法包括：

当所述聊天窗口创建后，在所述窗口背景层中绘制预设背景图片；

获取所述待显示的聊天内容在聊天窗口的显示区域中的第一显示位置；

根据所述第一显示位置，在所述文字背景层中绘制形状为预设形状的图片；

根据所述第一显示位置，将所述待显示的聊天内容显示于所述文字层中。

本发明实施例提供的技术方案带来的有益效果是：

通过聊天窗口中的显示区域中加载的富文本编辑框显示待显示的聊天内容，并在待显示的聊天内容显示之前预先绘制预设形状的图片。避免了由于使用网页容器显示聊天内容时造成的系统资源消耗过高的缺陷，提高了显示聊天内容的效率。

附图说明

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

图1是本发明实施例一提供的显示聊天内容的方法流程图；

图2是本发明实施例二提供的显示聊天内容的方法流程图；

图3是本发明实施例二提供的显示聊天内容的方法中滚动富文本编辑框的滚动条后显示聊天内容的方法流程图；

图4是本发明实施例二提供的显示聊天内容的方法流程图；

图5是本发明实施例三提供的显示聊天内容的方法流程图；

图6是本发明实施例四提供的显示聊天内容的装置结构示意图；

图7是本发明实施例五提供的一种终端的结构示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明实施方式作进一步地详细描述。

实施例一

本发明实施例提供了一种显示聊天内容的方法，参见图1，方法流程包括：

101：获取待显示的聊天内容在聊天窗口的显示区域中的第一显示位置；

102：根据第一显示位置，在显示区域中绘制形状为预设形状的图片，显示区域的预设位置叠加有透明的编辑框。

103：根据第一显示位置，将待显示的聊天内容显示在编辑框上。

本发明实施例通过聊天窗口中的显示区域中加载的富文本编辑框显示待显示的聊天内容，并在待显示的聊天内容显示之前预先绘制预设形状的图片。避免了由于使用网页容器显示聊天内容时造成的系统资源消耗过高的缺陷，提高了显示聊天内容的效率。

实施例二

本发明实施例提供了一种显示聊天内容的方法，参见图2，方法流程包括：

201：创建聊天窗口，并在聊天窗口中的显示区域中调用系统接口中的富文本编辑框控件，生成显示区域中的编辑框。

其中，当用户在即时通信应用中打开聊天窗口时创建聊天窗口，该聊天窗口中存在至少两个区域，包括显示区域和输入区域。显示区域用于显示该聊天窗口中用户输入的聊天内容和/或与用户进行聊天的通信联系人发送的聊天内容，输入区域用于供当前终端的用户进行聊天内容的输入。

本步骤可以为：建立聊天窗口，该聊天窗口包括显示区域和输入区域，在聊天窗口中的显示区域中调用系统接口中的富文本编辑框控件，将该富文本编辑框控件叠加在显示区域的预设位置，其中该预设位置为聊天窗口中的显示区域的正上方，其中，该富文本编辑框在生成时，设定该富文本编辑框的可显示区域的位置坐标与聊天窗口中的显示区域的位置坐标相同，该富文本编辑框为透明区域且该富文本编辑框的面积大小大于或等于聊天窗口中的显示区域的面积大小。另外，获取预设背景图片，将该预设背景图片绘制于聊天窗口的显示区域中。

富文本编辑框控件为RichEdit控件，该控件是一种终端广泛应用的文本输入框，支持图文混排。背景图片可以为系统默认设置的，也可以为用户选取的图片。

202：获取待显示的聊天内容。

具体的，从聊天窗口的输入区域中获取用户输入的聊天内容，并将该聊天内容作为待显示的聊天内容；或者，接收与用户聊天的通信联系人发送的聊天内容，并将接收的聊天内容作为待显示的聊天内容。其中，待显示的聊天内容可以为文字内容或图片内容。

203：获取待显示的聊天内容在聊天窗口的显示区域中的第一显示位置。

本步骤包括如下2031至2035的步骤，可以为：

2031：如果聊天窗口中没有任何已显示的聊天内容，则将显示区域中首行的纵向坐标确定为待显示的聊天内容在聊天窗口的显示区域中的第一显示位置。

2032：如果聊天窗口中有已显示的聊天内容，则获取待显示的聊天内容的显示格式，根据待显示的聊天内容的内容大小和显示格式，获取在显示区域中显示待显示的聊天内容的高度。

其中，显示格式可以包括但不限于：缩进间距，对齐方向以及段间距。还可以包括字体，字号，颜色等内容。

进一步的，当聊天窗口中为双方通信时，则终端可以根据当前聊天窗口中发送该待显示的聊天内容的发送方标识对联系人身份进行识别；当聊天窗口为群组通信时，则终端通过该群组中发送该待显示的聊天内容的发送方标识对联系人身份进行识别。其中，发送方标识用于确定该待显示的聊天内容对应的显示格式。具体对应于显示格式中缩进间距。其中，发送方标识在用于显示待显示的聊天内容时可以为两种，包括：终端当前用户以及非终端当前用户，这两种发送方标识可以对应上述双方通信以及群组通信中包括的所有联系人身份。

对于缩进间距，包括有左缩进间距和右缩进间距两个具体的参数。缩进间距中的左缩进间距用于设置待显示的聊天内容在聊天窗口中显示区域中距离该显示区域左侧边的距离；缩进间距中的左缩进间距用于设置待显示的聊天内容在聊天窗口中显示区域中距离该显示区域右侧边的距离。

可选的，当待显示的聊天内容对应的发送方标识被识别为终端当前用户时，则通过该缩进间距参数设置该待显示的聊天内容显示于聊天窗口中显示区域中的靠右侧显示；当待显示的聊天内容对应的发送方标识被识别为非终端当前用户时，则通过该缩进间距参数设置该待显示的聊天内容显示于聊天窗口中显示区域中的靠左侧显示。由于聊天窗口可以根据用户的需求进行分辨率的调整，这两种情况对应的缩进间距与聊天窗口的分辨率可以预先设置有对应关系，当聊天窗口的尺寸被调整时，会根据该对应关系自适应调整缩进间距。

如图3所示，该图示出了设置缩进间距的示意图，其中图中包括有聊天窗口301，显示区域302，输入区域303，第一已显示聊天内容304以及第二已显示聊天内容305。其中第一已显示聊天内容304为非终端当前用户发送的聊天内容，第二已显示聊天内容305为终端当前用户发送的聊天内容。其中，306部分对应的缩近间距为第二已显示聊天内容305对应的左缩近间距；307部分对应的缩近间距为第二已显示聊天内容305对应的右缩近间距；308部分对应的缩近间距为第一已显示聊天内容304对应的左缩近间距；309部分对应的缩近间距为第一已显示聊天内容304对应的右缩近间距。

对于对齐方向，当待显示的聊天内容在当前的富富文本编辑框控件中无法以一行进行显示时，需要根据该对其方向参数对多行文本内容的对齐方向进行设置。一般情况下对齐方向默认设置为左对齐。其中待显示的聊天内容的宽度可以根据待显示的聊天内容中文字的字符个数或者图片的分辨率中得到，并根据聊天窗口中显示区域的尺寸信息可以确定该待显示的聊天内容是否可以在一行中显示，如果不能在一行显示则需要进行换行，并设置换行后的文字内容的对齐方向。

对于段间距，则是设置各个已显示的聊天内容之间的段落距离。其中段间距可以包括段前间距和段后间距两个具体的参数，分别对应当前信息对应的段落与上一条信息对应的段落之间的距离，以及当前信息对应的段落与下一条信息对应的段落之间的距离。

其中，对于缩进间距则需要通过待显示的聊天内容的发送方标识进行识别，对于对齐方向和段间距则为预先设置的参数，并不随待显示的聊天内容的发送方的不同而变化。

2033：获取聊天窗口中已显示的聊天内容与聊天窗口的显示区域的底端之间的高度，如果获取的高度大于待显示的聊天内容的高度，执行2034，否则，执行2035。

具体地，获取最后一条已显示的聊天内容的在显示区域中的显示位置、内容大小和显示格式。根据最后一条已显示的聊天内容的内容大小和显示格式，计算最后一条已显示的聊天内容的高度。获取显示区域底端的位置，根据最后一条已显示的聊天内容的高度和在显示区域中的显示位置以及显示区域底端的位置，计算聊天窗口中已显示的聊天内容与显示区域的底端之间的高度，并比较计算的高度与待显示的聊天内容的高度。

2034：根据最后一条已显示的聊天内容在显示区域中的显示位置和最后一条已显示的聊天内容的高度，计算待显示的聊天内容在显示区域中的第一显示位置。

按如下公式计算出待显示的聊天内容在显示区域中的第一显示位置；

p₁=p₀+h+s；

在上述公式中p₁为待显示的聊天内容在显示区域中的第一显示位置，p₀为最后一条已显示的聊天内容在显示区域中的显示位置，h为最后一条已显示的聊天内容的内容高度，s为预设数值。

2035：根据待显示的聊天内容的内容高度和显示区域的底端的位置，计算待显示的聊天内容在显示区域中的第一显示位置。

按如下公式计算出待显示的聊天内容在显示区域中的第一显示位置；

p₁=p₂-h；

在上述公式中p₁为待显示的聊天内容在显示区域中的第一显示位置，p₂为显示区域的底端的位置，h为最后一条已显示的聊天内容的内容高度。

204：根据第一显示位置，在显示区域中绘制形状为预设形状的图片，显示区域的预设位置叠加有透明的编辑框。

其中，预设形状的图片即为聊天窗口中用于突出聊天内容的气泡图片。通过调用系统接口中用于在窗口中绘制图片的方法进行气泡图片的绘制。

进一步的，由于待显示的聊天内容的尺寸并不固定，因此在本步骤中还可以根据待显示的聊天内容的高度和宽度进一步的设定第一预设图片的拉伸尺寸，便于适应待显示的聊天内容的高度和宽度。

其中，绘制预设形状的图片也需要根据步骤203中确定的第一显示位置中的纵向坐标以及显示格式进行绘制，这样才可以使得最终显示出的待显示信息完全在预设形状的图片中进行显示。

因此，步骤204可以具体为：

2041：获取待显示的聊天内容的高度和宽度，并根据待显示的聊天内容的高度和宽度确定预设形状的图片拉伸的尺寸；

2042：根据预设形状的图片拉伸的尺寸以及第一显示位置，在聊天窗口的显示区域中绘制形状为预设形状的图片。

优选的，在绘制预设形状的图片时，还可以将发送该待显示的聊天内容身份的标识信息的显示位置与预设形状的图片共同进行绘制。其中标识信息可以为标识用户的图片信息或者文字信息或者数字信息等。

205：根据第一显示位置，将待显示的聊天内容显示在编辑框上。

其中，步骤205可以具体为：

2051：获取显示区域的顶端在编辑框中的第二显示位置。

其中，第二显示位置为富文本编辑框中的纵向坐标。

2052：根据第一显示位置和第二显示位置，获取待显示的聊天内容在编辑框中的第三显示位置。

通过显示区域在富文本编辑框中的纵向坐标，以及第一显示位置在显示区域中的纵向坐标，可以得到这两个纵向坐标之间的偏移量，并根据该偏移量确定待显示的聊天内容在富文本编辑框中的存储的位置，即第三显示位置。

2053：根据第三显示位置，将待显示的聊天内容显示在编辑框上。

在该第三显示位置中，将聊天内容按照步骤203中的显示格式添加入富文本编辑框中。此时，即完成了将待显示的聊天内容显示与富文本编辑框中的过程。

进一步的，由于聊天窗口的显示区域中显示该待显示的聊天内容之前还可以存在已显示的聊天内容，因此当聊天窗口的显示区域中存在已显示的聊天内容时，还需要确定当前聊天窗口的显示区域中其他可显示的聊天内容，并对其他可显示的聊天内容进行显示。

因此，在步骤203执行之后，与步骤204可以同时执行对其他可显示的聊天内容进行显示的步骤，即步骤206-步骤208。

206：根据富文本编辑框的第一显示范围和待显示的聊天内容的高度获取第二显示范围，第一显示范围为在显示待显示的聊天内容之前编辑框位于显示区域的预设位置的区域范围。

其中，由于显示区域中的显示范围是固定的，因此当添加了待显示的聊天内容以后，根据当前显示区域中的显示情况，其他可显示的聊天内容至少要小于或等于已显示的聊天内容。因此，第二显示范围为聊天窗口的显示区域中除待显示的聊天内容以外可显示的聊天内容对应的坐标区域。

待显示的聊天内容的高度可以转化为聊天窗口的显示区域中对应的坐标偏移量，第一显示范围为聊天窗口的显示区域中已显示的聊天内容对应的坐标区间。

将第一显示范围对应的坐标区间与待显示的聊天内容的高度值转化的坐标偏移量求差运算，得到第二显示范围对应的坐标区间。此时，该第二显示范围为除待显示的聊天内容以外其他可显示的聊天内容的显示范围对应的坐标区间。

207：从位于第一显示范围内的聊天内容中，获取位于第二显示范围内的每个聊天内容。

已显示的聊天内容中获取位于第二显示范围内的每个聊天内容。

根据该第二显示范围对应的坐标区间对应的坐标偏移量，在富文本编辑框中当前显示的区域中从下往上选取该坐标偏移量对应的坐标区间，并获取该坐标区间中的聊天内容。

例如：第二显示范围对应的坐标区间为5-10，则坐标偏移量为5。

208：根据每个聊天内容在富文本编辑框中的第四显示位置，在显示区域中绘制形状为预设形状的图片。

获取显示区域的顶端在富文本编辑框中的当前位置，根据每个聊天内容在富文本编辑框中的第四显示位置和显示区域的顶端在富文本编辑框中的当前位置，计算每个聊天内容在显示区域中的显示位置，根据每个聊天内容在显示区域中的显示位置，分别为每个聊天内容绘制预设形状的图片。

其中，计算每个聊天内容在显示区域中的显示位置的方式可以为：

通过显示区域的顶端在富文本编辑框中的第二显示范围中的纵向坐标，以及每个聊天内容在富文本编辑框中的第四显示位置对应的纵向坐标，可以确定出这两个纵向坐标之间的偏移量，并根据该偏移量确定每个聊天内容在显示区域中的显示位置对应的纵向坐标。

在本发明实施例中还提出了一种显示聊天内容的方法中滚动富文本编辑框滚动条后显示聊天内容的方法，如图4所示，该方法包括：

401：当接收到对编辑框滚动条的操作命令时，根据滚动前编辑框中显示的第三显示范围以及操作命令中的滚动方向和滚动距离，确定滚动后编辑框中待显示的第四显示范围，并获取第四显示范围内的聊天内容。

其中，在滚动操作前终端可以确定富文本编辑框中显示在聊天窗口的显示区域中的第三显示范围的坐标区间。

滚动操作后，根据滚动距离和坐标的对应关系，以及根据滚动方向确定的计算方式，可以对第三显示范围的坐标区间进行计算，得到第四显示范围的坐标区间。在根据第四显示范围的坐标区间从富文本编辑框中确定第四显示范围内的聊天内容。

402：根据第四显示范围内的聊天内容在编辑框中的第五显示位置，在显示区域中绘制形状为预设形状的图片。

获取滚动后显示区域的顶端在富文本编辑框中的当前位置，根据第四显示范围内的聊天内容在富文本编辑框中的第五显示位置和滚动后显示区域的顶端在富文本编辑框中的当前位置，计算第四显示范围内的聊天内容在显示区域中的显示位置，根据第四显示范围内的聊天内容在显示区域中的显示位置，在显示区域中绘制第四显示范围内的聊天内容对应的形状为预设形状的图片

其中，计算第四显示范围内的聊天内容在显示区域中的显示位置的方式为：

通过显示区域的顶端在富文本编辑框中的第四显示范围中的纵向坐标，以及第四显示范围内的聊天内容在富文本编辑框中的第五显示位置对应的纵向坐标，可以确定出这两个纵向坐标之间的偏移量，并根据该偏移量确定第四显示范围内的聊天内容在显示区域中的显示位置对应的纵向坐标。

本发明实施例通过聊天窗口中的显示区域中加载的富文本编辑框显示待显示的聊天内容，并在待显示的聊天内容显示之前预先绘制预设形状的图片。避免了由于使用网页容器显示聊天内容时造成的系统资源消耗过高的缺陷，提高了显示聊天内容的效率。

实施例三

本发明实施例提供了一种显示聊天内容的方法，参见图5。

其中，在本发明实施例中，将待显示的聊天内容显示于聊天窗口的显示区域中，显示区域包括窗口背景层、文字背景层、文字层；窗口背景在显示区域的最底层；文字背景层在显示区域的中间层；文字层在显示区域的最上层；

其中，该方法包括：

501：当聊天窗口创建后，在窗口背景层中绘制预设背景图片。

502：获取待显示的聊天内容在聊天窗口的显示区域中的第一显示位置。

503：根据第一显示位置，在文字背景层中绘制形状为预设形状的图片。

由于待显示的聊天内容的尺寸并不固定，因此在本步骤中还可以根据待显示的聊天内容的高度和宽度进一步的设定第一预设图片的拉伸尺寸，便于适应待显示的聊天内容的高度和宽度。

因此，步骤503可以由以下步骤完成：

5031：获取待显示的聊天内容的高度和宽度，并根据待显示的聊天内容的高度和宽度确定预设形状的图片拉伸的尺寸；

5032：根据预设形状的图片拉伸的尺寸以及第一显示位置，在文字背景层中绘制形状为预设形状的图片。

504：根据第一显示位置，将待显示的聊天内容显示于文字层中。

其中，步骤504可以由以下步骤完成：

5041：获取显示区域的顶端在文字层中的第二显示位置。

5042：根据第一显示位置和第二显示位置，获取待显示的聊天内容在文字层中的第三显示位置。

通过显示区域在文字层中的纵向坐标，以及第一显示位置在显示区域中的纵向坐标，可以得到这两个纵向坐标之间的偏移量，并根据该偏移量确定待显示的聊天内容在文字层中的存储的位置，即第三显示位置。

5043：根据第三显示位置，将待显示的聊天内容显示在文字层中。

在该第三显示位置中，将聊天内容按照相应的显示格式添加入文本层中。此时，即完成了将待显示的聊天内容显示与文本层中的过程。

在本发明实施例中，窗口背景层中用于绘制聊天窗口的显示区域中的背景图片，在显示区域中的最底层，其他文字背景图以及聊天内容显示在该层之上；文字背景层用于显示文字背景图即气泡图片，用于在待显示的聊天内容显示之前，在获取到的待显示的聊天内容的显示位置，预先在该显示位置上绘制预设形状的图片，以作为待显示的聊天内容的背景气泡图片，文字背景层位于窗口背景层之上，文字层之下；文字层用于显示聊天内容，该层位于窗口背景层之上，位于文字背景层之上。

本发明实施例通过在聊天窗口的显示区域中的窗口背景层、文字背景层、文字层，分别显示窗口背景图片、文字背景图片以及聊天内容。避免了由于使用网页容器显示聊天内容时造成的系统资源消耗过高的缺陷，提高了显示聊天内容的效率。

实施例四

本发明实施例提供了一种显示聊天内容的装置，参见图6，该装置包括：

第一获取模块601，用于获取待显示的聊天内容在聊天窗口的显示区域中的第一显示位置；

绘制模块602，用于根据第一显示位置，在显示区域中绘制形状为预设形状的图片，显示区域的预设位置叠加有透明的编辑框；

第一显示模块603，用于根据第一显示位置，将待显示的聊天内容显示在编辑框上。

其中，该第一显示模块603，包括：

第一获取单元，用于获取显示区域的顶端在编辑框中的第二显示位置；

第二获取单元，用于根据第一显示位置和第二显示位置，获取待显示的聊天内容在编辑框中的第三显示位置；

显示单元，用于根据第三显示位置，将待显示的聊天内容显示在编辑框上。

其中，该绘制模块602，包括：

第三获取单元，用于获取待显示的聊天内容的高度和宽度，并根据待显示的聊天内容的高度和宽度确定预设形状的图片拉伸的尺寸；

绘制单元，用于根据预设形状的图片拉伸的尺寸以及第一显示位置，在聊天窗口的显示区域中绘制形状为预设形状的图片。

其中，该装置还包括：

第二获取模块604，用于根据所述编辑框的第一显示范围和待显示的聊天内容的高度获取第二显示范围；

第三获取模块605，用于从位于所述第一显示范围内的聊天内容中，获取位于所述第二显示范围内的每个聊天内容；

第二显示模块606，用于根据每个聊天内容在编辑框中的第四显示位置，在显示区域中绘制形状为预设形状的图片。

其中，该装置还包括：

滚动处理模块607，用于当接收到对编辑框滚动条的操作命令时，根据滚动前编辑框中显示的第三显示范围以及操作命令中的滚动方向和滚动距离，确定滚动后编辑框中待显示的第四显示范围，并获取第四显示范围内的聊天内容；

第三显示模块608，用于根据第四显示范围内的聊天内容在编辑框中的第五显示位置，在显示区域中绘制形状为预设形状的图片。

其中，该装置还包括：

调用模块609，用于在聊天窗口中的显示区域中调用系统接口中的富文本编辑框控件，生成所述显示区域中的编辑框。

本发明实施例通过聊天窗口中的显示区域中加载的富文本编辑框显示待显示的聊天内容，并在待显示的聊天内容显示之前预先绘制预设形状的图片。避免了由于使用网页容器显示聊天内容时造成的系统资源消耗过高的缺陷，提高了显示聊天内容的效率。

实施例五

请参考图7，其示出了本发明实施例所涉及的具有触敏表面的终端结构示意图，用于实施上述实施例中提供的方法。具体来讲：

终端900可以包括RF（Radio Frequency，射频）电路110、包括有一个或一个以上计算机可读存储介质的存储器120、输入单元130、显示单元140、传感器150、音频电路160、WiFi(wireless fidelity，无线保真)模块170、包括有一个或者一个以上处理核心的处理器180、以及电源190等部件。本领域技术人员可以理解，图5中示出的终端结构并不构成对终端的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。其中：

RF电路110可用于收发信息或通话过程中，信号的接收和发送，特别地，将基站的下行信息接收后，交由一个或者一个以上处理器180处理；另外，将涉及上行的数据发送给基站。通常，RF电路110包括但不限于天线、至少一个放大器、调谐器、一个或多个振荡器、用户身份模块（SIM）卡、收发信机、耦合器、LNA（Low Noise Amplifier，低噪声放大器）、双工器等。此外，RF电路110还可以通过无线通信与网络和其他设备通信。所述无线通信可以使用任一通信标准或协议，包括但不限于GSM(Global System of Mobile communication，全球移动通讯系统)、GPRS(General Packet Radio Service，通用分组无线服务)、CDMA(CodeDivision Multiple Access，码分多址)、WCDMA(Wideband Code Division MultipleAccess,宽带码分多址)、LTE(Long Term Evolution,长期演进)、电子邮件、SMS(ShortMessaging Service，短消息服务)等。

存储器120可用于存储软件程序以及模块，处理器180通过运行存储在存储器120的软件程序以及模块，从而执行各种功能应用以及数据处理。存储器120可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序（比如声音播放功能、图像播放功能等）等；存储数据区可存储根据终端900的使用所创建的数据（比如音频数据、电话本等）等。此外，存储器120可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。相应地，存储器120还可以包括存储器控制器，以提供处理器180和输入单元130对存储器120的访问。

输入单元130可用于接收输入的数字或字符信息，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。具体地，输入单元130可包括触敏表面131以及其他输入设备132。触敏表面131，也称为触摸显示屏或者触控板，可收集用户在其上或附近的触摸操作（比如用户使用手指、触笔等任何适合的物体或附件在触敏表面131上或在触敏表面131附近的操作），并根据预先设定的程式驱动相应的连接装置。可选的，触敏表面131可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器180，并能接收处理器180发来的命令并加以执行。此外，可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触敏表面131。除了触敏表面131，输入单元130还可以包括其他输入设备132。具体地，其他输入设备132可以包括但不限于物理键盘、功能键（比如音量控制按键、开关按键等）、轨迹球、鼠标、操作杆等中的一种或多种。

显示单元140可用于显示由用户输入的信息或提供给用户的信息以及终端900的各种图形用户接口，这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。显示单元140可包括显示面板141，可选的，可以采用LCD(Liquid Crystal Display，液晶显示器)、OLED(Organic Light-Emitting Diode,有机发光二极管)等形式来配置显示面板141。进一步的，触敏表面131可覆盖显示面板141，当触敏表面131检测到在其上或附近的触摸操作后，传送给处理器180以确定触摸事件的类型，随后处理器180根据触摸事件的类型在显示面板141上提供相应的视觉输出。虽然在图5中，触敏表面131与显示面板141是作为两个独立的部件来实现输入和输入功能，但是在某些实施例中，可以将触敏表面131与显示面板141集成而实现输入和输出功能。

终端900还可包括至少一种传感器150，比如光传感器、运动传感器以及其他传感器。具体地，光传感器可包括环境光传感器及接近传感器，其中，环境光传感器可根据环境光线的明暗来调节显示面板141的亮度，接近传感器可在终端900移动到耳边时，关闭显示面板141和/或背光。作为运动传感器的一种，重力加速度传感器可检测各个方向上（一般为三轴）加速度的大小，静止时可检测出重力的大小及方向，可用于识别手机姿态的应用（比如横竖屏切换、相关游戏、磁力计姿态校准）、振动识别相关功能（比如计步器、敲击）等;至于终端900还可配置的陀螺仪、气压计、湿度计、温度计、红外线传感器等其他传感器，在此不再赘述。

音频电路160、扬声器161，传声器162可提供用户与终端900之间的音频接口。音频电路160可将接收到的音频数据转换后的电信号，传输到扬声器161，由扬声器161转换为声音信号输出；另一方面，传声器162将收集的声音信号转换为电信号，由音频电路160接收后转换为音频数据，再将音频数据输出处理器180处理后，经RF电路110以发送给比如另一终端，或者将音频数据输出至存储器120以便进一步处理。音频电路160还可能包括耳塞插孔，以提供外设耳机与终端900的通信。

WiFi属于短距离无线传输技术，终端900通过WiFi模块170可以帮助用户收发电子邮件、浏览网页和访问流式媒体等，它为用户提供了无线的宽带互联网访问。虽然图5示出了WiFi模块170，但是可以理解的是，其并不属于终端900的必须构成，完全可以根据需要在不改变发明的本质的范围内而省略。

处理器180是终端900的控制中心，利用各种接口和线路连接整个手机的各个部分，通过运行或执行存储在存储器120内的软件程序和/或模块，以及调用存储在存储器120内的数据，执行终端900的各种功能和处理数据，从而对手机进行整体监控。可选的，处理器180可包括一个或多个处理核心；优选的，处理器180可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器180中。

终端900还包括给各个部件供电的电源190（比如电池），优选的，电源可以通过电源管理系统与处理器180逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源190还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。

尽管未示出，终端900还可以包括摄像头、蓝牙模块等，在此不再赘述。具体在本实施例中，终端900的显示单元是触摸屏显示器，终端900还包括有存储器，以及一个或者一个以上的程序，其中一个或者一个以上程序存储于存储器中，且经配置以由一个或者一个以上处理器执行述一个或者一个以上程序包含用于进行以下操作的指令：

获取待显示的聊天内容在聊天窗口的显示区域中的第一显示位置；

根据所述第一显示位置，在所述显示区域中绘制形状为预设形状的图片，所述显示区域的正上方叠加有透明的富文本编辑框；

根据所述第一显示位置，将所述待显示的聊天内容显示在所述富文本编辑框上。

优选的，所述根据所述第一显示位置，将所述待显示的聊天内容显示在所述富文本编辑框上，包括：

获取所述显示区域的顶端在所述富文本编辑框中的第二显示位置；

根据所述第一显示位置和所述第二显示位置，获取待显示的聊天内容在所述富文本编辑框中的第三显示位置；

根据所述第三显示位置，将所述待显示的聊天内容显示在所述富文本编辑框上。

优选的，所述根据所述第一显示位置，在所述显示区域中绘制形状为预设形状的图片，包括：

获取所述待显示的聊天内容的高度和宽度，并根据所述待显示的聊天内容的高度和宽度确定所述预设形状的图片拉伸的尺寸；

根据所述预设形状的图片拉伸的尺寸以及所述第一显示位置，在所述聊天窗口的显示区域中绘制形状为预设形状的图片。

优选的，所述获取待显示的聊天内容在聊天窗口的显示区域中的第一显示位置之后，所述方法还包括：

根据所述富文本编辑框的第一显示范围和待显示的聊天内容的高度获取第二显示范围；

从位于所述第一显示范围内的聊天内容中，获取位于所述第二显示范围内的每个聊天内容；

根据所述每个聊天内容在所述富文本编辑框中的第四显示位置，在所述显示区域中绘制形状为预设形状的图片。

优选的，所述根据所述第一显示位置，将所述聊天内容显示在所述富文本编辑框上之后，所述方法还包括：

当接收到对富文本编辑框滚动条的操作命令时，根据滚动前所述富文本编辑框中显示的第三显示范围以及所述操作命令中的滚动方向和滚动距离，确定滚动后所述富文本编辑框中待显示的第四显示范围，并获取所述第四显示范围内的聊天内容；

根据所述第四显示范围内的聊天内容在所述富文本编辑框中的第五显示位置，在所述显示区域中绘制形状为预设形状的图片。

优选的，所述获取待显示的聊天内容在聊天窗口的显示区域中的第一显示位置之前，所述方法还包括：

在聊天窗口中的显示区域中调用系统接口中的富文本编辑框控件。

本发明实施例通过聊天窗口中的显示区域中加载的富文本编辑框显示待显示的聊天内容，并在待显示的聊天内容显示之前预先绘制预设形状的图片。避免了由于使用网页容器显示聊天内容时造成的系统资源消耗过高的缺陷，提高了显示聊天内容的效率。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (13)

1.一种显示聊天内容的方法，其特征在于，所述方法包括：

获取待显示的聊天内容在聊天窗口的显示区域中的第一显示位置；

获取所述待显示的聊天内容的高度和宽度，并根据所述待显示的聊天内容的高度和宽度确定预设形状的图片拉伸的尺寸；

根据所述预设形状的图片拉伸的尺寸以及所述第一显示位置，在所述聊天窗口的显示区域中绘制形状为预设形状的图片，所述显示区域的预设位置叠加有透明的编辑框；

根据所述第一显示位置，将所述待显示的聊天内容显示在所述编辑框上。

2.根据权利要求1所述的方法，其特征在于，所述根据所述第一显示位置，将所述待显示的聊天内容显示在所述编辑框上，包括：

获取所述显示区域的顶端在所述编辑框中的第二显示位置；

根据所述第一显示位置和所述第二显示位置，获取待显示的聊天内容在所述编辑框中的第三显示位置；

根据所述第三显示位置，将所述待显示的聊天内容显示在所述编辑框上。

3.根据权利要求1所述的方法，其特征在于，所述获取待显示的聊天内容在聊天窗口的显示区域中的第一显示位置之后，所述方法还包括：

根据所述编辑框的第一显示范围和待显示的聊天内容的高度获取第二显示范围；

从位于所述第一显示范围内的聊天内容中，获取位于所述第二显示范围内的每个聊天内容；

根据所述每个聊天内容在所述编辑框中的第四显示位置，在所述显示区域中绘制形状为预设形状的图片。

4.根据权利要求1所述的方法，其特征在于，所述根据所述第一显示位置，将所述聊天内容显示在所述编辑框上之后，所述方法还包括：

当接收到对编辑框滚动条的操作命令时，根据滚动前所述编辑框中显示的第三显示范围以及所述操作命令中的滚动方向和滚动距离，确定滚动后所述编辑框中待显示的第四显示范围，并获取所述第四显示范围内的聊天内容；

根据所述第四显示范围内的聊天内容在所述编辑框中的第五显示位置，在所述显示区域中绘制形状为预设形状的图片。

5.根据权利要求1所述的方法，其特征在于，所述获取待显示的聊天内容在聊天窗口的显示区域中的第一显示位置之前，所述方法还包括：

在聊天窗口中的显示区域中调用系统接口中的所述富文本编辑框控件，生成所述显示区域中的编辑框。

6.一种显示聊天内容的装置，其特征在于，所述装置包括：

第一获取模块，用于获取待显示的聊天内容在聊天窗口的显示区域中的第一显示位置；

第三获取单元，用于获取所述待显示的聊天内容的高度和宽度，并根据所述待显示的聊天内容的高度和宽度确定预设形状的图片拉伸的尺寸；

绘制单元，用于根据所述预设形状的图片拉伸的尺寸以及所述第一显示位置，在所述聊天窗口的显示区域中绘制形状为预设形状的图片，所述显示区域的预设位置叠加有透明的编辑框；

第一显示模块，用于根据所述第一显示位置，将所述待显示的聊天内容显示在所述编辑框上。

7.根据权利要求6所述的装置，其特征在于，所述第一显示模块，包括：

第一获取单元，用于获取所述显示区域的顶端在所述编辑框中的第二显示位置；

第二获取单元，用于根据所述第一显示位置和所述第二显示位置，获取待显示的聊天内容在所述编辑框中的第三显示位置；

显示单元，用于根据所述第三显示位置，将所述待显示的聊天内容显示在所述编辑框上。

8.根据权利要求6所述的装置，其特征在于，所述装置还包括：

第二获取模块，用于根据所述编辑框的第一显示范围和待显示的聊天内容的高度获取第二显示范围；

第三获取模块，用于从位于所述第一显示范围内的聊天内容中，获取位于所述第二显示范围内的每个聊天内容；

第二显示模块，用于根据所述每个聊天内容在所述编辑框中的第四显示位置，在所述显示区域中绘制形状为预设形状的图片。

9.根据权利要求6所述的装置，其特征在于，所述装置还包括：

滚动处理模块，用于当接收到对编辑框滚动条的操作命令时，根据滚动前所述编辑框中显示的第三显示范围以及所述操作命令中的滚动方向和滚动距离，确定滚动后所述编辑框中待显示的第四显示范围，并获取所述第四显示范围内的聊天内容；

第三显示模块，用于根据所述第四显示范围内的聊天内容在所述编辑框中的第五显示位置，在所述显示区域中绘制形状为预设形状的图片。

10.根据权利要求6所述的装置，其特征在于，所述装置还包括：

调用模块，用于在聊天窗口中的显示区域中调用系统接口中的所述富文本编辑框控件，生成所述显示区域中的编辑框。

11.一种显示聊天内容的方法，其特征在于，将待显示的聊天内容显示于聊天窗口的显示区域中，所述显示区域包括窗口背景层、文字背景层、文字层；所述窗口背景在所述显示区域的最底层；所述文字背景层在所述显示区域的中间层；所述文字层在所述显示区域的最上层；

所述方法包括：

当所述聊天窗口创建后，在所述窗口背景层中绘制预设背景图片；

获取所述待显示的聊天内容在聊天窗口的显示区域中的第一显示位置；

获取所述待显示的聊天内容的高度和宽度，并根据所述待显示的聊天内容的高度和宽度确定预设形状的图片拉伸的尺寸；

根据所述预设形状的图片拉伸的尺寸以及所述第一显示位置，在所述文字背景层中绘制形状为所述预设形状的图片；

根据所述第一显示位置，将所述待显示的聊天内容显示于所述文字层中。

12.根据权利要求11所述的方法，其特征在于，所述根据所述第一显示位置，将所述待显示的聊天内容显示于所述文字层中，包括：

获取所述显示区域的顶端在所述文字层中的第二显示位置；

根据所述第一显示位置和所述第二显示位置，获取所述待显示的聊天内容在所述文字层中的第三显示位置；

根据所述第三显示位置，将所述待显示的聊天内容显示在所述文字层中。

13.一种计算机可读存储介质，其特征在于，所述可读存储介质存储有程序，所述程序被处理器执行时用于实现如权利要求1至5任一所述的显示聊天内容的方法。