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