一种网页上实现的不同分辨率下图片居中后白板同步的方法.pdf

1、10申请公布号CN101963980A43申请公布日20110202CN101963980ACN101963980A21申请号201010293261922申请日20100927G06F17/30200601G06F9/4420060171申请人苏州阔地网络科技有限公司地址215121江苏省苏州市工业园区葑亭大道666号唯亭智能产业园8楼72发明人胡加明54发明名称一种网页上实现的不同分辨率下图片居中后白板同步的方法57摘要本发明属于网络技术领域，具体涉及一种网页上实现的不同分辨率下图片居中后白板同步的方法，包括以下步骤用户打开网页，加载FLASH，给FLASH增加一个容器，用作白板，白板加载

2、图片到其内部，图片加载完毕后，触发COMPLETE事件，FLASH程序将图片居中显示在白板上。控制端用户，在白板上画出图形后，FLASH同时将构成图形的所有坐标数据和当前居中的图片坐标发送给所有的客户端。客户端根据本地的图片坐标、消息中的图片坐标、图形坐标重新计算出本地的图形坐标，并根据新的图形坐标画出图形。该方法能实现在任意的分辨率下，所有用户白板的标注都完全同步。51INTCL19中华人民共和国国家知识产权局12发明专利申请权利要求书2页说明书3页附图1页CN101963981A1/2页21一种网页上实现的不同分辨率下图片居中后白板同步的方法，其特征在于，包括以下步骤，1用户打开网页，加载

3、FLASH，设置FLASH缩放模式为不缩放，设置对齐方式为左上对齐；2FLASH加载需要演示的图片，根据图片的尺寸和FLASH的尺寸设置图片在白板居中显示；3控制端用户，在白板上画图形后，发送图形的坐标和图片的坐标到所有的客户端；4客户端用户收到消息后，获取消息中的图形坐标和图片坐标；5客户端根据本地的图片坐标、消息中的图片坐标、图形坐标重新计算出本地的图形坐标，并根据新的图形坐标画出图形。2如权利要求1所述的一种网页上实现的不同分辨率下图片居中后白板同步的方法，其特征在于，其中步骤1包含如下过程1A用户打开网页，加载一个FLASH，设置FLASH的STAGESCALEMODE为STAGESC

4、ALEMODENO_SCALE；1B设置FLASH的STAGEALIGN属性为STAGEALIGNTOP_LEFT，使舞台左上对齐；1CFLASH连接通讯系统。3如权利要求1所述的一种网页上实现的不同分辨率下图片居中后白板同步的方法，其特征在于，其中步骤1中所述通讯系统是指可以从1个用户发送到1个或多个用户的即时通讯系统。4如权利要求1所述的一种网页上实现的不同分辨率下图片居中后白板同步的方法，其特征在于，其中步骤2包含如下过程2A增加一个容器作为白板，FLASH加载图片到白板，并增加图片的COMPLETE事件监听；2B图片加载完成后，触发COMPLETE事件，FLASH根据舞台的尺寸和图片的

5、实际尺寸计算出图片居中的坐标，舞台的尺寸设置宽度为STAGEWIDTH，设置高度为STAGEHEIGHT，图片的实际尺寸设置宽度为IMAGEWIDTH，设置高度为IMAGEHEIGHT，居中坐标计算公式为X横坐标PXSTAGEWIDTHIMAGEWIDTH/2，Y纵坐标PYSTAGEHEIGHTIMAGEHEIGHT/2；2C设置图片的X属性为MATHMAX0，PX，设置图片的Y属性为MATHMAX0，PY，此处的MATHMAX可以确保图片始终在可见区内显示。5如权利要求1所述的一种网页上实现的不同分辨率下图片居中后白板同步的方法，其特征在于，其中步骤3包含如下过程3A控制端用户，在白板上画出

6、图形；3BFLASH同时将构成图形的所有坐标数据和当前居中的图片坐标通过通讯系统发送给所有的客户端。6如权利要求1所述的一种网页上实现的不同分辨率下图片居中后白板同步的方法，其特征在于，其中步骤4包含如下过程4A客户端用户从通讯系统中收到消息后，解析消息数据；4B获取消息中的图形坐标和图片坐标，设置图形X、Y坐标分别为DRAWX和DRAWY，设权利要求书CN101963980ACN101963981A2/2页3置图片X、Y坐标分别为IMAGEX和IMAGEY，设置本地的图片X、Y坐标分别为MYIMAGEX和MYIMAGEY。7如权利要求1所述的一种网页上实现的不同分辨率下图片居中后白板同步的方

7、法，其特征在于，其中步骤5包含如下过程5A获取消息中的图形坐标和图片坐标，设置图形X、Y坐标分别为DRAWX和DRAWY，设置本地的图片X、Y坐标分别为MYIMAGEX和MYIMAGEY；5B客户端将消息中的图形坐标换算成本地的坐标，换算公式为横坐标LOCALXDRAWXMYIMAGEXIMAGEX，纵坐标LOCALYDRAWYMYIMAGEYIMAGEY；5C调用FLASH方法创建图形，设置图形的X属性为LOCALX，设置图形的Y属性为LOCALY。8如权利要求1所述的一种网页上实现的不同分辨率下图片居中后白板同步的方法，其特征在于控制端的白板图片居中对齐后，将图片的坐标、图形的坐标都发送给

8、客户端，客户端在收到这些坐标数据后，将图形坐标换算成客户端本地的坐标后在白板上显示出来。权利要求书CN101963980ACN101963981A1/3页4一种网页上实现的不同分辨率下图片居中后白板同步的方法技术领域0001本发明属于网络技术领域，具体涉及一种网页上实现的不同分辨率下图片居中后白板同步的方法。背景技术0002随着互联网技术的发展，人们的生活也随之发生改变，逐渐由传统的生活方式转变为信息化生活方式。借助于互联网，人们便可以在线看电视、读书、交朋友、打电话、发邮件、看新闻，信息化生活已经成为我们生活不可缺少的一部分。当然，人们必须借助键盘、鼠标、显示器、耳麦、摄像头等硬件设备才能充

9、分感受到互联网的便利与信息化生活的丰富多彩。显示器是上述硬件中占用空间最大且最重要的设备，其显示区域大小将直接影响人们对互联网的体验，比如，使用低分辨率显示器阅读篇幅稍长的一段文字就需要不停地拉动滚动条，这使原本简单轻松的阅读变得非常繁杂。另外，由于显示器品牌众多，企业内部普遍存在使用不同分辨率显示器的情况，这将导致使用同一套系统、进行同一个操作带来不同的视觉效果。随着网络会议普及，其中一些很重要的功能如文档同步演示逐渐受到人们的青睐。在进行网络会议时，主讲人在演示文档上标注区块内容，如果分辨率不同，参会人员的显示器将不会显示同一区块，无法实现精确定位画笔痕迹。这些都是现行网络视频会议、远程教

10、育、书籍阅读等应用系统中普遍存在的问题。0003本发明提出的一种方法旨在解决在不同分辨率下白板显示标注错位的问题，可以在不同分辨率用户之间做到完美同步白板的标注，彻底摆脱分辨率对功能体验的束缚，使图片显示、标记等其它操作能够及时且不错位地进行同步显示，而且是完全基于网页实现，无需下载任何插件，是一种真正意义上能够普及大众的互联网技术。发明内容0004本发明的目的是一种网页上实现的不同分辨率下图片居中后白板同步的方法。0005为达到上述目的，本发明的技术方案为一种网页上实现的不同分辨率下图片居中后白板同步的方法，包括以下步骤00061用户打开网页，加载FLASH，设置FLASH缩放模式为不缩放，

11、设置对齐方式为左上对齐；00072FLASH加载需要演示的图片，根据图片的尺寸和FLASH的尺寸设置图片在白板居中显示；00083控制端用户，在白板上画图形后，发送图形的坐标和图片的坐标到所有的客户端；00094客户端用户收到消息后，获取消息中的图形坐标和图片坐标；00105客户端根据本地的图片坐标、消息中的图片坐标、图形坐标重新计算出本地的图形坐标，并根据新的图形坐标画出图形。说明书CN101963980ACN101963981A2/3页50011上述技术方案中，步骤1包含如下过程00121A用户打开网页，加载一个FLASH，设置FLASH的STAGESCALEMODE为STAGESCALE

12、MODENO_SCALE；00131B设置FLASH的STAGEALIGN属性为STAGEALIGNTOP_LEFT，使舞台左上对齐；00141CFLASH连接通讯系统。0015上述技术方案中，步骤2包含如下过程00162A增加一个容器作为白板，FLASH加载图片到白板，并增加图片的COMPLETE事件监听；00172B图片加载完成后，触发COMPLETE事件，FLASH根据舞台的尺寸和图片的实际尺寸计算出图片居中的坐标，舞台的尺寸设置宽度为STAGEWIDTH，设置高度为STAGEHEIGHT，图片的实际尺寸设置宽度为IMAGEWIDTH，设置高度为IMAGEHEIGHT。居中坐标计算公式为

13、X横坐标PXSTAGEWIDTHIMAGEWIDTH/2，Y纵坐标PYSTAGEHEIGHTIMAGEHEIGHT/2；00182C设置图片的X属性为MATHMAX0，PX，设置图片的Y属性为MATHMAX0，PY，此处的MATHMAX可以确保图片始终在可见区内显示。0019上述技术方案中，步骤3包含如下过程00203A控制端用户，在白板上画出图形；00213BFLASH同时将构成图形的所有坐标数据和当前居中的图片坐标通过通讯系统发送给所有的客户端。0022上述技术方案中，步骤4包含如下过程00234A客户端用户从通讯系统中收到消息后，解析消息数据；00244B获取消息中的图形坐标和图片坐标，

14、设置图形X、Y坐标分别为DRAWX和DRAWY，设置图片X、Y坐标分别为IMAGEX和IMAGEY，设置本地的图片X、Y坐标分别为MYIMAGEX和MYIMAGEY。0025上述技术方案中，步骤5包含如下过程00265A获取消息中的图形坐标和图片坐标，设置图形X、Y坐标分别为DRAWX和DRAWY，设置本地的图片X、Y坐标分别为MYIMAGEX和MYIMAGEY；00275B客户端将消息中的图形坐标换算成本地的坐标，换算公式为横坐标LOCALXDRAWXMYIMAGEXIMAGEX，纵坐标LOCALYDRAWYMYIMAGEYIMAGEY；00285C调用FLASH方法创建图形，设置图形的X属

15、性为LOCALX，设置图形的Y属性为LOCALY。0029上述技术方案中，步骤1中所述通讯系统是指可以从一个用户发送到1个或多个用户的即时通讯系统。0030本发明与现有技术相比具有以下优点00311可以在不同分辨率下，实现画笔所画的图形的位置的完全统一，没有偏差，用户体验好。00322同步及时，平缓，不会出现停顿的现象00333由于在每个客户端独自计算图形的位置，对于服务器端的运算压力小。00344完全基于网页进行实现，不需要下载任何插件。说明书CN101963980ACN101963981A3/3页600355可以很方便地运用于其它互联网系统。附图说明0036说明书附图是本发明的详细流程图。

16、具体实施方式0037一种网页上实现的不同分辨率下图片居中后白板同步的方法，包括以下步骤00381用户打开网页，加载FLASH，设置FLASH缩放模式为不缩放，设置对齐方式为左上对齐；00392FLASH加载需要演示的图片，根据图片的尺寸和FLASH的尺寸设置图片在白板居中显示；00403控制端用户，在白板上画图形后，发送图形的坐标和图片的坐标到所有的客户端；00414客户端用户收到消息后，获取消息中的图形坐标和图片坐标；00425客户端根据本地的图片坐标、消息中的图片坐标、图形坐标重新计算出本地的图形坐标，并根据新的图形坐标画出图形。0043下面进一步详细说明本发明所述的方法0044参见说明书

17、附图，用户打开网页，加载FLASH，设置FLASH的SCALEMODE为NO_SCALE，设置STAGEALIGN为STAGEALIGNTOP_LEFT。并给FLASH增加一个容器，用作白板，白板加载图片到其内部，图片加载完毕后，触发COMPLETE事件，FLASH程序根据舞台的尺寸和图片的容器的尺寸计算出可让图片居中的X、Y坐标值，设置图片在容器中的坐标位置为MATHMAX0，X、MATHMAX0，Y。控制端用户，在白板上画出图形，FLASH同时将构成图形的所有坐标数据和当前居中的图片坐标发送给所有的客户端。客户端根据本地的图片坐标、消息中的图片坐标、图形坐标重新计算出本地的图形坐标，并根据新的图形坐标画出图形。说明书CN101963980ACN101963981A1/1页7说明书附图CN101963980A