[发明专利]一种白板同步的方法

说明书

技术领域

本发明属于网络技术领域，尤其涉及一种白板同步的方法。

背景技术

随着互联网技术的发展，人们的生活也随之发生改变，逐渐由传统的生活方式转变为信息化生活方式。借助于互联网，人们便可以在线看电视、读书、交朋友、打电话、发邮件、看新闻，信息化生活已经成为我们生活不可缺少的一部分。当然，人们必须借助键盘、鼠标、显示器、耳麦、摄像头等硬件设备才能充分感受到互联网的便利与信息化生活的丰富多彩。

显示器是上述硬件中占用空间最大且最重要的设备，其显示区域大小将直接影响人们对互联网的体验，比如，使用低分辨率显示器阅读篇幅稍长的一段文字就需要不停地拉动滚动条，这使原本简单轻松的阅读变得非常繁杂。另外，由于显示器品牌众多，企业内部普遍存在使用不同分辨率显示器的情况，这将导致使用同一套系统、进行同一个操作带来不同的视觉效果。

随着网络会议普及，其中一些很重要的功能如文档同步演示逐渐受到人们的青睐。在进行网络会议时，主讲人在演示文档上标注区块内容，如果分辨率不同，参会人员的显示器将不会显示同一区块，无法实现精确定位画笔痕迹，这些都是现行网络视频会议、远程教育、书籍阅读等应用系统中普遍存在的问题。

发明内容

本发明提供了一种白板同步的方法，实现了不同分辨率用户之间做到白板同步。

为达到上述目的，本发明的技术方案为：

一种网页上实现的不同分辨率下图片居中后白板同步的方法，包括以下步骤：

1)用户打开网页，加载flash，设置flash缩放模式为不缩放，设置对齐方式为左上对齐；

2)flash加载需要演示的图片，根据图片的尺寸和flash的尺寸设置图片在白板居中显示；

3)控制端用户，在白板上画图形后，发送图形的坐标和图片的坐标到所有的客户端；

4)客户端用户收到消息后，获取消息中的图形坐标和图片坐标；

5)客户端根据本地的图片坐标、消息中的图片坐标、图形坐标重新计算出本地的图形坐标，并根据新的图形坐标画出图形。

上述技术方案中，步骤1)包含如下过程：

1a)用户打开网页，加载一个flash，设置flash的stage.scaleMode为StageScaleMode.NO_SCALE；

1b)设置flash的stage.align属性为StageAlign.TOP_LEFT，使舞台左上对齐；

1c)flash连接通讯系统。

上述技术方案中，步骤2)包含如下过程：

2a)增加一个容器作为白板，flash加载图片到白板，并增加图片的complete事件监听；

2b)图片加载完成后，触发complete事件，flash根据舞台的尺寸和图片的实际尺寸计算出图片居中的坐标，舞台的尺寸设置宽度为：stageWidth，设置高度为：stageHeight，图片的实际尺寸设置宽度为：imageWidth，设置高度为：imageHeight。居中坐标计算公式为：x横坐标px＝(stageWidth-imageWidth)/2，y纵坐标py＝(stageHeight-imageHeight)/2；

2c)设置图片的x属性为Math.max(0，px)，设置图片的y属性为Math.max(0，py)，此处的Math.max可以确保图片始终在可见区内显示。

上述技术方案中，步骤3)包含如下过程：

3a)控制端用户，在白板上画出图形；

3b)flash同时将构成图形的所有坐标数据和当前居中的图片坐标通过通讯系统发送给所有的客户端。

上述技术方案中，步骤4)包含如下过程：

4a)客户端用户从通讯系统中收到消息后，解析消息数据；

4b)获取消息中的图形坐标和图片坐标，设置图形x、y坐标分别为drawX和drawY，设置图片x、y坐标分别为imageX和imageY，设置本地的图片x、y坐标分别为myImageX和myImageY。

上述技术方案中，步骤5)包含如下过程：

5a)获取消息中的图形坐标和图片坐标，设置图形x、y坐标分别为drawX和drawY，设置本地的图片x、y坐标分别为myImageX和myImageY；

5b)客户端将消息中的图形坐标换算成本地的坐标，换算公式为：横坐标localX＝drawX+myImageX-imageX，纵坐标localY＝drawY+myImageY-imageY；