一种白板同步的方法技术

本发明专利技术属于网络技术领域，尤其涉及一种白板同步的方法，包括以下步骤：用户打开网页，加载flash，给flash增加一个容器，用作白板，白板加载图片到其内部，图片加载完毕后，触发complete事件，flash程序将图片居中显示在白板上。控制端用户，在白板上画出图形后，flash同时将构成图形的所有坐标数据和当前居中的图片坐标发送给所有的客户端。客户端根据本地的图片坐标、消息中的图片坐标、图形坐标重新计算出本地的图形坐标，并根据新的图形坐标画出图形。该方法能实现在任意的分辨率下，所有用户白板的标注都完全同步。

【技术实现步骤摘要】

本专利技术属于网络
，尤其涉及。
技术介绍
随着互联网技术的发展，人们的生活也随之发生改变，逐渐由传统的生活方式转变为信息化生活方式。借助于互联网，人们便可以在线看电视、读书、交朋友、打电话、发邮件、看新闻，信息化生活已经成为我们生活不可缺少的一部分。当然，人们必须借助键盘、鼠标、显示器、耳麦、摄像头等硬件设备才能充分感受到互联网的便利与信息化生活的丰富多彩。显示器是上述硬件中占用空间最大且最重要的设备，其显示区域大小将直接影响人们对互联网的体验，比如，使用低分辨率显示器阅读篇幅稍长的一段文字就需要不停地拉动滚动条，这使原本简单轻松的阅读变得非常繁杂。另外，由于显示器品牌众多，企业内部普遍存在使用不同分辨率显示器的情况，这将导致使用同一套系统、进行同一个操作带来不同的视觉效果。随着网络会议普及，其中一些很重要的功能如文档同步演示逐渐受到人们的青睐。在进行网络会议时，主讲人在演示文档上标注区块内容，如果分辨率不同，参会人员的显示器将不会显示同一区块，无法实现精确定位画笔痕迹，这些都是现行网络视频会议、远程教育、书籍阅读等应用系统中普遍存在的问题。
技术实现思路
本专利技术提供了，实现了不同分辨率用户之间做到白板同步。为达到上述目的，本专利技术的技术方案为—种网页上实现的不同分辨率下图片居中后白板同步的方法，包括以下步骤1)用户打开网页，加载flash，设置flash缩放模式为不缩放，设置对齐方式为左上对齐；2)flash加载需要演示的图片，根据图片的尺寸和flash的尺寸设置图片在白板居中显示；3)控制端用户，在白板上画图形后，发送图形的坐标和图片的坐标到所有的客户端；4)客户端用户收到消息后，获取消息中的图形坐标和图片坐标；5)客户端根据本地的图片坐标、消息中的图片坐标、图形坐标重新计算出本地的图形坐标，并根据新的图形坐标画出图形。上述技术方案中，步骤1)包含如下过程la)用户打开网页，加载一个flash，设置flash的stage. scaleMode为 StageScaleMode. N0_SCALE ；lb)设置 flash 的 stage, align 属性为 MageAlign. T0P_LEFT,使舞台左上对齐；lc) flash连接通讯系统。上述技术方案中，步骤幻包含如下过程2a)增加一个容器作为白板，flash加载图片到白板，并增加图片的complete事件监听；2b)图片加载完成后，触发complete事件，flash根据舞台的尺寸和图片的实际尺寸计算出图片居中的坐标，舞台的尺寸设置宽度为=StageWidth，设置高度为 stageHeight,图片的实际尺寸设置宽度为dmageWidth，设置高度为imageHeight。 居中坐标计算公式为x横坐标px = (stageWidth-imageWidth) /2，y纵坐标py = (stageHeight-imageHeight)/2 ；2c)设置图片的χ属性为Math, max (0，px)，设置图片的y属性为Math, max (0，py)， 此处的Math, max可以确保图片始终在可见区内显示。上述技术方案中，步骤幻包含如下过程3a)控制端用户，在白板上画出图形；3b) flash同时将构成图形的所有坐标数据和当前居中的图片坐标通过通讯系统发送给所有的客户端。上述技术方案中，步骤4)包含如下过程4a)客户端用户从通讯系统中收到消息后，解析消息数据；4b)获取消息中的图形坐标和图片坐标，设置图形χ、y坐标分别为drawX和 drawY,设置图片x、y坐标分别为imageX和imageY，设置本地的图片x、y坐标分别为 myImageX 禾口 mylmageYo上述技术方案中，步骤幻包含如下过程5a)获取消息中的图形坐标和图片坐标，设置图形χ、y坐标分别为drawX和 drawY,设置本地的图片x、y坐标分别为mylmageX和myhageY ；5b)客户端将消息中的图形坐标换算成本地的坐标，换算公式为横坐标IocalX =drawX+mylmageX-imageX,纵坐标 IocalY = drawY+mylmageY-imageY ；5c)调用flash方法创建图形，设置图形的χ属性为localX，设置图形的y属性为 localY。上述技术方案中，步骤1)中所述通讯系统是指可以从一个用户发送到1个或多个用户的即时通讯系统。本专利技术与现有技术相比具有以下优点(1)可以在不同分辨率下，实现画笔所画的图形的位置的完全统一，没有偏差，用户体验好。(2)同步及时，平缓，不会出现停顿的现象。(3)由于在每个客户端独自计算图形的位置，对于服务器端的运算压力小。(4)完全基于网页进行实现，不需要下载任何插件。(5)可以很方便地运用于其它互联网系统。附图说明 此处所说明的附图用来提供对本专利技术的进一步理解，构成本申请的一部分，本专利技术的示意性实施例及其说明用于解释本专利技术，并不构成对本专利技术的不当限定。在附图中图1是本专利技术的详细流程图。 具体实施例方式以下将参考附图并结合实施例来详细说明本专利技术。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。一种网页上实现的不同分辨率下图片居中后白板同步的方法，包括以下步骤1)用户打开网页，加载flash，设置flash缩放模式为不缩放，设置对齐方式为左上对齐；2)flash加载需要演示的图片，根据图片的尺寸和flash的尺寸设置图片在白板居中显示；3)控制端用户，在白板上画图形后，发送图形的坐标和图片的坐标到所有的客户端；4)客户端用户收到消息后，获取消息中的图形坐标和图片坐标；5)客户端根据本地的图片坐标、消息中的图片坐标、图形坐标重新计算出本地的图形坐标，并根据新的图形坐标画出图形。下面进一步详细说明本专利技术所述的方法参见说明书附图，用户打开网页，加载flash，设置flash的scaleMode为N0_ SCALE，设置 stage, align 为 MageAlign. T0P_LEFT。并给 flash 增加一个容器，用作白板， 白板加载图片到其内部，图片加载完毕后，触发complete事件，flash程序根据舞台的尺寸和图片的容器的尺寸计算出可让图片居中的x、y坐标值，设置图片在容器中的坐标位置为 Math, max (0, χ), Math, max (0, y) 0控制端用户，在白板上画出图形，flash同时将构成图形的所有坐标数据和当前居中的图片坐标发送给所有的客户端。客户端根据本地的图片坐标、消息中的图片坐标、图形坐标重新计算出本地的图形坐标，并根据新的图形坐标画出图形。图1是本专利技术的详细流程图，详细步骤如下步骤101 用户打开网页；步骤102 加载flash，显示图片到flash白板上；步骤103 设置白板为不缩放模式，设置对齐方式为左上对齐；步骤104 根据图片的尺寸，设置图片在白板中居中显示；步骤105 控制端用户，在图片上画图形后，发送图形的坐标和图片的坐标到所有的客户端；步骤106 客户端用户收到消息后，获取消息中的图形坐标和图片坐标；步骤107 客户端根据本地的图片坐标、消息中的图片坐标、图形坐标重新计算出本地的图形坐标，并根据新的图形坐标画出图形本文档来自技高网...

【技术保护点】
１．一种白板同步的方法，其特征在于，包括以下步骤，１）用户打开网页，加载ｆｌａｓｈ，设置ｆｌａｓｈ缩放模式为不缩放，设置对齐方式为左上对齐；２）ｆｌａｓｈ加载需要演示的图片，根据图片的尺寸和ｆｌａｓｈ的尺寸设置图片在白板居中显示；３）控制端用户，在白板上画图形后，发送图形的坐标和图片的坐标到所有的客户端；４）客户端用户收到消息后，获取消息中的图形坐标和图片坐标；５）客户端根据本地的图片坐标、消息中的图片坐标、图形坐标重新计算出本地的图形坐标，并根据新的图形坐标画出图形。

【技术特征摘要】
2010.09.27 CN 201010293261.91.一种白板同步的方法，其特征在于，包括以下步骤，1)用户打开网页，加载flash，设置flash缩放模式为不缩放，设置对齐方式为左上对齐；2)flash加载需要演示的图片，根据图片的尺寸和flash的尺寸设置图片在白板居中显不；3)控制端用户，在白板上画图形后，发送图形的坐标和图片的坐标到所有的客户端；4)客户端用户收到消息后，获取消息中的图形坐标和图片坐标；5)客户端根据本地的图片坐标、消息中的图片坐标、图形坐标重新计算出本地的图形坐标，并根据新的图形坐标画出图形。2.如权利要求1所述的方法，其特征在于，其中步骤1)包含如下过程la)用户打开网页，加载一个flash，设置flash的stage. scaleMode为 StageScaleMode. N0_SCALE ；lb)设置flash的stage, align属性为MageAlign. T0P_LEFT，使舞台左上对齐； lc) flash连接通讯系统。3.如权利要求1所述的方法，其特征在于，其中步骤2)包含如下过程2a)增加一个容器作为白板，flash加载图片到白板，并增加图片的complete事件监听；2b)图片加载完成后，触发complete事件，flash根据舞台的尺寸和图片的实际尺寸计算出图片居中的坐标，舞台的尺寸设置宽度为=StageWidth，设置高度为 stageHeight,图片的实际尺寸设置宽度为dmageWidth，设置高度为dmageHeight， 居中坐标计算公式为x横坐标px = (stageWidth-imageWidth) /2，y纵坐标py = (stageHeight-imageHeight)/2 ；2c)设置图片的χ属性为Math, max (0，px)，设置图片的y属性为Math, max (0，py)，此处的Math, max可...

【专利技术属性】
技术研发人员：胡加明，
申请(专利权)人：苏州阔地网络科技有限公司，
类型：发明
国别省市：32