CN109712214A

CN109712214A - 一种基于OpenGL ES的实时涂鸦方法及装置

Info

Publication number: CN109712214A
Application number: CN201811360554.7A
Authority: CN
Inventors: 王恒
Original assignee: Guiyang Yuwan Science & Technology Co Ltd
Current assignee: Guiyang Yuwan Science & Technology Co Ltd
Priority date: 2018-11-15
Filing date: 2018-11-15
Publication date: 2019-05-03

Abstract

本发明提供了一种基于OpenGL ES的实时涂鸦方法及装置。该技术方案在完成本地绘制的同时将轨迹坐标上传至服务器，服务器将轨迹点的坐标、ID、颜色、粗细等数据转发至其他客户端；在其他客户端中，根据ID信息区分轨迹来源，并依据坐标数据绘制图像。在绘制环节，首先判断坐标点个数是否为5的倍数，如果不是5的倍数则用最后一个点坐标补足绘制点坐标数组，再进行绘制。绘制过程中，每五个点绘制一条线段，并保证后一条线段的前两个点与前一条线段的后两个点重合，从而保证了轨迹的连续性和线条的平滑性。应用本发明，可实现多人实时编辑自己绘制的轨迹，且绘制时间不受限制，在多用户同屏绘制的过程中，可实现充分的交流互动，提升了使用体验。

Description

一种基于OpenGL ES的实时涂鸦方法及装置

技术领域

本发明涉及软件工程技术领域，尤其涉及的是一种基于OpenGL ES的实时涂鸦方法及装置。

背景技术

涂鸦是一种视觉字体设计艺术，随着智能移动终端和互联网通信不断发展，各类APP成为了涂鸦活动的新载体。现在APP中涂鸦技术应用广泛，如很多美图和聊天类应用的图片编辑功能，其中大部分都具有图片涂鸦功能；然而目前此类功能均属于个人的本地绘制，难以在多用户之间形成互动效应。如果能在多个终端分别绘制，并实时、有序的呈现在其他用户手机上，则有望带来更好的交互性体验，进而衍生出趣味活动形式。“你画我猜”类游戏就是此类活动之一，然而目前“你画我猜”类游戏在功能实现方面具有一定的局限性，用户的绘制时间被严格限制，难以在一定时间内绘制复杂的点线图形。因此，现有技术存在缺陷，有必要对涂鸦功能的实现方式加以改进。

发明内容

本发明所要解决的技术问题是，现有技术中基于软件的涂鸦功能难以实现多地用户绘制内容的同屏显示以及实时互动。

本发明的技术方案如下：

一种基于OpenGL ES的实时涂鸦方法，包括：

响应用户操作，本地客户端记录在一定时间内触摸轨迹中各点的坐标数据；

所述本地客户端将所述坐标数据发送至服务器；

所述本地客户端保存所述坐标数据，并根据所述坐标数据在界面绘制图像；

所述服务器接收所述坐标数据，并转发至其他客户端；

所述其他客户端保存所述坐标数据，并根据所述坐标数据在界面绘制图像；

其中，所述绘制图像包括以下步骤：判断轨迹中点的个数，当轨迹中点的个数不是预定数的倍数时，用该轨迹最后一个点坐标补足预定数的倍数，而后再次判断轨迹中点的个数；当轨迹中点的个数为预定数的倍数时，以轨迹中每预定数个相邻的点为一组绘制线段，其中，前一组的后2个点与后一组的前2个点相重合。

作为优选，每个客户端均具有频道标签，所述本地客户端和所述其他客户端的频道标签相同。

作为优选，所述坐标数据中还包括点颜色，点直径，点ID信息。

作为优选，所述预定数是5或7或9。

作为优选，所述绘制线段，包括：绑定顶点缓存；为顶点缓存配置数据；启用顶点缓存；启用着色器；执行绘制。

同时，本发明进一步提供了一种基于OpenGL ES的实时涂鸦装置，包括

坐标获取单元，用于响应用户操作，本地客户端记录在一定时间内触摸轨迹中各点的坐标数据；

坐标上传单元，用于由所述本地客户端将所述坐标数据发送至服务器；

本地绘制单元，用于由所述本地客户端保存所述坐标数据，并根据所述坐标数据在界面绘制图像；

坐标转发单元，用于由所述服务器接收所述坐标数据，并转发至其他客户端；

他人绘制单元，用于由所述其他客户端保存所述坐标数据，并根据所述坐标数据在界面绘制图像；

作为优选，所述预定数是5或7或9。

本发明提供了一种基于OpenGL ES的实时涂鸦方法及装置。该技术方案在完成本地绘制的同时将滑动轨迹坐标上传至服务器，服务器将轨迹点的坐标、ID、颜色、粗细等数据转发至其他客户端；在其他用户的客户端中，根据ID信息区分轨迹来源，并依据坐标数据绘制图像。本发明的图像绘制是依托于OpenGL ES实现的，首先判断坐标点个数是否为5的倍数，如果不是5的倍数则用最后一个点坐标补足绘制点坐标数组，再进行绘制。在绘制过程中，每五个点绘制一条线段，并保证后一条线段的前两个点与前一条线段的后两个点重合，从而保证了轨迹的连续性和线条的平滑性。

在本发明中，为每个轨迹设定了唯一的标识ID，从而对轨迹来源加以区分，当客户端发现服务器回传的点是同一个ID时就进行统一的处理和本地保存，用于以后的撤销和清除。自己在本地绘制的点保存本地，用户根据自己保存本地的数据进行撤销操作，同时也保证了不影响别人的绘制和编辑。

在本发明中，服务器设计有频道的概念，多个用户可以选择连接到服务器的同一个频道，当服务器的频道接受到用户上传的轨迹坐标数据时，将坐标数据转发给同频道的其他用户。

应用本发明，可实现多人实时编辑自己绘制的轨迹，当多人绘制的点线重合时能按绘制时间顺序进行遮挡，并且在绘制复杂图像时依然能保证流程有序。本发明的绘制时间不受限制，在多用户同屏绘制的过程中，可实现充分的交流互动，增进了趣味性和使用体验。

附图说明

图1是本发明方法的整体流程图；

图2是本发明中客户端总体的工作模式图；

图3是本发明中本地客户端具体的工作模式图；

图4是本发明中本地客户端在绘制图像前，对坐标数据处理的工作模式图；

图5是本发明所绘制轨迹的结构示意图；图中：P1～P5连线为绘制的第一条线段，P1’～P5’连线为绘制的第二条线段，P1”～P5”连线为绘制的第三条线段；

图6是本发明中其他客户端具体的工作模式图。

具体实施方式

以下结合具体实施例，对本发明进行详细说明。

实施例1

一种基于OpenGL ES的实时涂鸦方法，如图1所示，包括：

1、客户端初始化

客户端需要做的工作分为本地屏幕触摸点的获取和上传服务器、远端其他用户触摸点数据的服务器回传以及对这些点的统一计算与绘制，如图2所示。

其具体流程如下：记录绘制所有的线，按顺序存储，用于用户的撤销和清除；记录接收点；发送点数组；需要更新的线；配置画笔的纹理；绑定顶点缓存；启用着色器；创建着色器。

2、发送实现

如图3所示，本地客户端记录在一定时间内触摸轨迹中各点的坐标数据；而后将坐标数据发送至服务器；同时保存坐标数据，并根据坐标数据在界面绘制图像。客户端监听界面的触摸事件，当用户在手机上滑动时，记录下轨迹坐标。客户端存在一个定时器，每间隔100毫秒将该时间段产生的点坐标、点颜色、点粗细、点ID数据发送到服务器，数据格式大致如下：点坐标：[(0,0),(100,100),(150,200),(230,450),….]；点颜色：color；点粗细：Float；点ID：uint64_t。如图4所示，在获取屏幕滑动最后一个点时判断这100ms内获取本地touch点是否是5的倍数，当是5的倍数时直接绘制，不足时用最后一个点坐标补足绘制点坐标数组。判断是不是5的倍数是因为在使用OpenGLES绘制时是每五个点进行一次绘制，并取五个点的后两个点作为下一个五个点的前两个点再进行绘制，这样优点有两处，一个是保证线段的连续性，在使用贝塞尔曲线优化的时候让线段更加平滑；另外一个好处是因为在接收点的时候并不知道这个点是不是这段线的开始和结尾，当对点数组补全后就不必在意这段线是否为某段线的一部分，而是每五个点组成的一段线进行单独绘制。

本发明所绘制的轨迹如图5所示，每五个点绘制一段线段，线段L1包含点P1、P2、P3、P4、P5；在绘制下一条线段L2时为了让线段更加平滑，采用L1线段的后两个点作为L2线段的前两个点进行绘制，以此类推。当最后一个线段(图上L3)不满足五的倍数时，用这个线段的最后一个点(图上P4”)补全后再进行绘制。

3、接收实现

3.1接收服务器轨迹

如图6所示，客户端在连接上服务器后，会接收到服务器转发的其他用户上传的滑动轨迹坐标、ID、颜色、粗细属性。

其具体流程如下：接收服务器轨迹坐标接口；对接收服务器轨迹坐标进行转化；对接收点数组进行补全，满足五的倍数。

3.2轨迹坐标数据保存

客户端会把服务器和本地自己绘制的线统一保存，方便以后的撤销和清除操作。

3.3坐标点绘制

通过创建着色器和纹理等操作完成绘制前的配置；然后对点进行渲染，通过纹理来清除绘制线段时的边缘锯齿。

其具体流程如下：绑定顶点缓存；为顶点缓存配置数据；启用顶点缓存(都可以单独的使用保存在当前OpenGL ES上下文中的设置来开启或关闭)；启用着色器；开始绘制。

3.4定时器

定时器每隔100毫秒从轨迹坐标缓存读取坐标信息，然后把点信息按ID进行分类，把点数据保存到点数组并补全，然后把处理后的点传递给OpenGLES方法中进行渲染显示。

其具体流程如下：定时器每隔100毫秒调用接口；刷新界面；清除点，用于保存接下来100ms的点；处理点并把数据抛到OpenGLES方法中进行渲染显示。

实施例2

一种基于OpenGL ES的实时涂鸦方法，如图1所示，包括：

S110：响应用户操作，本地客户端记录在一定时间内触摸轨迹中各点的坐标数据；

S120：所述本地客户端将所述坐标数据发送至服务器；

S130：所述本地客户端保存所述坐标数据，并根据所述坐标数据在界面绘制图像；

S140：所述服务器接收所述坐标数据，并转发至其他客户端；

S150：所述其他客户端保存所述坐标数据，并根据所述坐标数据在界面绘制图像；

其中，每个客户端均具有频道标签，所述本地客户端和所述其他客户端的频道标签相同。所述坐标数据中还包括点颜色，点直径，点ID信息。所述预定数是9。所述绘制线段，包括：绑定顶点缓存；为顶点缓存配置数据；启用顶点缓存；启用着色器；执行绘制。

一种基于OpenGL ES的实时涂鸦装置，包括

实施例3

一种基于OpenGL ES的实时涂鸦方法，如图1所示，包括：

S120：所述本地客户端将所述坐标数据发送至服务器；

S140：所述服务器接收所述坐标数据，并转发至其他客户端；

一种基于OpenGL ES的实时涂鸦装置，包括

应当理解的是，对本领域普通技术人员来说，可以根据上述说明加以改进或变换，而所有这些改进和变换都应属于本发明所附权利要求的保护范围。

Claims

1.一种基于OpenGL ES的实时涂鸦方法，其特征在于，包括：

所述本地客户端将所述坐标数据发送至服务器；

所述服务器接收所述坐标数据，并转发至其他客户端；

2.根据权利要求1所述的一种基于OpenGL ES的实时涂鸦方法，其特征在于，每个客户端均具有频道标签，所述本地客户端和所述其他客户端的频道标签相同。

3.根据权利要求1所述的一种基于OpenGL ES的实时涂鸦方法，其特征在于，所述坐标数据中还包括点颜色，点直径，点ID信息。

4.根据权利要求1所述的一种基于OpenGL ES的实时涂鸦方法，其特征在于，所述预定数是5或7或9。

5.根据权利要求1所述的一种基于OpenGL ES的实时涂鸦方法，其特征在于，所述绘制线段，包括：绑定顶点缓存；为顶点缓存配置数据；启用顶点缓存；启用着色器；执行绘制。

6.一种基于OpenGL ES的实时涂鸦装置，其特征在于，包括

7.根据权利要求6所述的一种基于OpenGL ES的实时涂鸦装置，其特征在于，每个客户端均具有频道标签，所述本地客户端和所述其他客户端的频道标签相同。

8.根据权利要求6所述的一种基于OpenGL ES的实时涂鸦装置，其特征在于，所述坐标数据中还包括点颜色，点直径，点ID信息。

9.根据权利要求6所述的一种基于OpenGL ES的实时涂鸦装置，其特征在于，所述预定数是5或7或9。

10.根据权利要求6所述的一种基于OpenGL ES的实时涂鸦装置，其特征在于，所述绘制线段，包括：绑定顶点缓存；为顶点缓存配置数据；启用顶点缓存；启用着色器；执行绘制。