教育直播系统中不可或缺的功能部件：电子白板

大家好，今天我们介绍下在Ubuntu环境中用Qt-Creator设计网络电子白板，所谓的电子白板就是指在网络上通过客户端与服务器进行图元的绘画，然后由服务端广播出去发送到多个客户端上，从而实现图元绘画的同步性。这种电子白板也经常用于教育直播系统中，这里我们只简单介绍下客户端与服务端，供大家学习进步。

对于客户端的实现分为连接处理，登陆界面，绘画界面，响应事件的处理，连接我们用了TCP协议，界面我们使用了Qt的图形视图框架，不太了解的同学可以先学习下，对于服务端基本就是连接客户端，接受客户端的消息处理后再返回给客户端，对于接受发送消息，我们都用的是json保存，下面我们来看下已做好的小程序。

本人也处于刚入手阶段，在登陆界面目前有用户姓名以及join按钮框，用户姓名可以修改，加入之后可以在服务端看到加入者的一些消息，在加入之前确保已运行服务端，并同时确定需要加入客户端的个数，让多个客户端处于以下状态之一即可。

下图中黑色框是已运行的服务端，在黑色框下面是两个客户端，若有需要你可以运行多个客户端。左一客户端是姓名为liang暂未登陆的用户，右一的客户端是姓名为Mary并已成功登陆的用户，成功登陆的用户会跳转到绘图界面并同时在服务器中打印出它登陆的消息（注意：在成功登陆后不可进行图元的绘制，必须等所有用户均加入后方可绘制图元，否则其余用户会加入失败，若不小心进行了误操作，那不好意思，麻烦你先重启服务端后再加入客户端进行操作）。

下面我们介绍绘图界面，对于绘图界面从左到右的图元依次为 直线、矩形、椭圆、三角形、随意绘画、删除上个图元、清除所有图元，默认开始选择的图元是绘画直线。如下图现在两个客户端均已登陆成功进入绘图界面，服务器显示两个客户端消息，消息显示的是加入者的姓名，加入者的id，主机地址，port,右一为Mary，左一为liang。

现在我们进行图元的绘制，如下图，首先我们在右一用户为Mary（id为1）的界面下绘制直线，此时可以看到服务端的消息打印，creator 为1，type 为”add“，图元type为“line”，通过json接受Mary的消息进行处理后广播到其他的客户端，此时我们能明显看到liang的客户端也打印出一样的直线。

如下图现在我们在liang（id为2）的客户端中绘制椭圆，选中椭圆的图元后绘制，此时能看到服务端的消息，ceator为2，type为"add" ，图元"type"为"oval"，同样的在Mary（id为1）的客户端中显示了椭圆图元。

后面添加矩形，三角形，随意绘画步骤基本一致，现在看下删除上一个图元的过程，首先我们把五个类型图元都添加进绘图框中，服务端打印出的消息有点多，因为对于随意绘画的这个图元，我们需要记录鼠标按下抬起时所有点的坐标。

这里我们加入图元的顺序是直线、椭圆、矩形、三角形、随意绘画，当我们删除上个图元时首先删除的自然是随意绘画的一部分，接着我们继续点击删除按钮，就继续按顺序往上删除，直至所有图元被删除，回到起始状态，这里演示下删除随意绘画出的“亮”这个子的最后一笔，其他图元删除大家可下载后自己玩一玩额，嘻嘻，对了，每个客户端的删除按钮都可以删除上个图元，这里我虽然是在liang（id为2）的客户端绘制的最后的一个图元，但删除我是在Mary（id为1）的客户端进行的。服务端的消息是type为“delete” ，global_id为12，这里的global_id指的是删除第几个图元，“亮”这个字我在随意绘制时绘制了八笔（有点尴尬，亮实际是九笔额，不好意思啊！）即八个图元，加上之前的四个图元，刚好十二个图元，而我们删除的刚好是最后一个，后面若是继续点击删除就是第十一个、第十个…

现在我们看下最后一个按钮，即清除所有图元，这个没有什么好说的，就是初始化到最初为NULL的状态（注意：若要退出整个程序需要清理所有的图元，否则会造成部分内存问题（程序错误），若你想再此运行客户端连接服务端就会出现连接异常，那这时候就不好意思了，你得重启服务端后再来连接客户端了）。在你退出整个程序前，我这里会有一个提示。如下图所示，若你未清理所有图元，麻烦你点击返回清理所有图元后再退出，之后你就可以重新开启更多或更少客户端来继续运行程序而不必重启服务器。