《一种白板同步的方法.pdf》由会员分享，可在线阅读，更多相关《一种白板同步的方法.pdf（8页珍藏版）》请在专利查询网上搜索。
1、(10)申请公布号 CN 102314466 A (43)申请公布日 2012.01.11 CN 102314466 A *CN102314466A* (21)申请号 201110059936.8 (22)申请日 2011.03.14 201010293261.9 2010.09.27 CN G06F 17/30(2006.01) G06F 3/041(2006.01) G06T 11/80(2006.01) (71)申请人 苏州阔地网络科技有限公司 地址 215121 江苏省苏州市工业园区葑亭大 道 666 号唯亭智能产业园 8 楼 (72)发明人 胡加明 (54) 发明名称 一种白板同步的。
2、方法 (57) 摘要 本发明属于网络技术领域， 尤其涉及一种白 板同步的方法， 包括以下步骤 ： 用户打开网页， 加载 flash， 给 flash 增加一个容器， 用作白板， 白板加载图片到其内部， 图片加载完毕后， 触发 complete 事件， flash 程序将图片居中显示在白 板上。控制端用户， 在白板上画出图形后， flash 同时将构成图形的所有坐标数据和当前居中的图 片坐标发送给所有的客户端。客户端根据本地的 图片坐标、 消息中的图片坐标、 图形坐标重新计算 出本地的图形坐标， 并根据新的图形坐标画出图 形。 该方法能实现在任意的分辨率下， 所有用户白 板的标注都完全同步。 (。
3、66)本国优先权数据 (51)Int.Cl. (19)中华人民共和国国家知识产权局 (12)发明专利申请 权利要求书 2 页 说明书 4 页 附图 1 页 CN 102314470 A1/2 页 2 1. 一种白板同步的方法， 其特征在于， 包括以下步骤， 1) 用户打开网页， 加载 flash， 设置 flash 缩放模式为不缩放， 设置对齐方式为左上对 齐 ； 2)flash 加载需要演示的图片， 根据图片的尺寸和 flash 的尺寸设置图片在白板居中 显示 ； 3) 控制端用户， 在白板上画图形后， 发送图形的坐标和图片的坐标到所有的客户端 ； 4) 客户端用户收到消息后， 获取消息中的。
4、图形坐标和图片坐标 ； 5) 客户端根据本地的图片坐标、 消息中的图片坐标、 图形坐标重新计算出本地的图形 坐标， 并根据新的图形坐标画出图形。 2. 如权利要求 1 所述的方法， 其特征在于， 其中步骤 1) 包含如下过程 ： 1a) 用 户 打 开 网 页，加 载 一 个 flash，设 置 flash 的 stage.scaleMode 为 StageScaleMode.NO_SCALE ； 1b) 设置 flash 的 stage.align 属性为 StageAlign.TOP_LEFT， 使舞台左上对齐 ； 1c)flash 连接通讯系统。 3. 如权利要求 1 所述的方法， 其特。
5、征在于， 其中步骤 2) 包含如下过程 ： 2a) 增加一个容器作为白板， flash 加载图片到白板， 并增加图片的 complete 事件监 听 ； 2b) 图片加载完成后， 触发 complete 事件， flash 根据舞台的尺寸和图片的实 际尺寸计算出图片居中的坐标， 舞台的尺寸设置宽度为 ： stageWidth， 设置高度为 ： stageHeight， 图片的实际尺寸设置宽度为 ： imageWidth， 设置高度为 ： imageHeight， 居 中 坐 标 计 算 公 式 为 ： x 横 坐 标 px (stageWidth-imageWidth)/2， y 纵 坐 标 。
6、py (stageHeight-imageHeight)/2 ； 2c) 设置图片的 x 属性为 Math.max(0， px)， 设置图片的 y 属性为 Math.max(0， py)， 此 处的 Math.max 可以确保图片始终在可见区内显示。 4. 如权利要求 1 所述的方法， 其特征在于， 其中步骤 3) 包含如下过程 ： 3a) 控制端用户， 在白板上画出图形 ； 3b)flash 同时将构成图形的所有坐标数据和当前居中的图片坐标通过通讯系统发送 给所有的客户端。 5. 如权利要求 1 所述的方法， 其特征在于， 其中步骤 4) 包含如下过程 ： 4a) 客户端用户从通讯系统中收到。
7、消息后， 解析消息数据 ； 4b) 获取消息中的图形坐标和图片坐标， 设置图形 x、 y 坐标分别为 drawX 和 drawY， 设 置图片 x、 y 坐标分别为 imageX 和 imageY， 设置本地的图片 x、 y 坐标分别为 myImageX 和 myImageY。 6. 如权利要求 1 所述的方法， 其特征在于， 其中步骤 5) 包含如下过程 ： 5a) 获取消息中的图形坐标和图片坐标， 设置图形 x、 y 坐标分别为 drawX 和 drawY， 设 置本地的图片 x、 y 坐标分别为 myImageX 和 myImageY ； 5b) 客户端将消息中的图形坐标换算成本地的坐标。
8、， 换算公式为 ： 横坐标 localX drawX+myImageX-imageX， 纵坐标 localY drawY+myImageY-imageY ； 5c) 调用 flash 方法创建图形， 设置图形的 x 属性为 localX， 设置图形的 y 属性为 权 利 要 求 书 CN 102314466 A CN 102314470 A2/2 页 3 localY。 7. 如权利要求 1 所述的方法， 其特征在于 ： 控制端的白板图片居中对齐后， 将图片的坐 标、 图形的坐标都发送给客户端， 客户端在收到这些坐标数据后， 将图形坐标换算成客户端 本地的坐标后在白板上显示出来。 8. 一种白。
9、板同步的方法， 其特征在于 ： 控制端用户的白板图片居中对齐后， 将图片、 图 形坐标发送给所有客户端并由所述客户端结合本地的图片坐标， 计算出本地的图形坐标， 并根据新的图形坐标画出图形。 9. 根据权利要求 8 所述的方法， 其特征在于 ： 用户打开网页， 加载 flash， 设置所述 flash 缩放模式为不缩放， 设置对齐方式为左上对齐 ； 所述 flash 加载需要演示的图片， 根 据图片的尺寸和所述 flash 的尺寸设置图片在白板居中显示。 权 利 要 求 书 CN 102314466 A CN 102314470 A1/4 页 4 一种白板同步的方法 技术领域 0001 本发明。
10、属于网络技术领域， 尤其涉及一种白板同步的方法。 背景技术 0002 随着互联网技术的发展， 人们的生活也随之发生改变， 逐渐由传统的生活方式转 变为信息化生活方式。借助于互联网， 人们便可以在线看电视、 读书、 交朋友、 打电话、 发邮 件、 看新闻， 信息化生活已经成为我们生活不可缺少的一部分。 当然， 人们必须借助键盘、 鼠 标、 显示器、 耳麦、 摄像头等硬件设备才能充分感受到互联网的便利与信息化生活的丰富多 彩。 0003 显示器是上述硬件中占用空间最大且最重要的设备， 其显示区域大小将直接影响 人们对互联网的体验， 比如， 使用低分辨率显示器阅读篇幅稍长的一段文字就需要不停地 拉动。
11、滚动条， 这使原本简单轻松的阅读变得非常繁杂。另外， 由于显示器品牌众多， 企业内 部普遍存在使用不同分辨率显示器的情况， 这将导致使用同一套系统、 进行同一个操作带 来不同的视觉效果。 0004 随着网络会议普及， 其中一些很重要的功能如文档同步演示逐渐受到人们的青 睐。在进行网络会议时， 主讲人在演示文档上标注区块内容， 如果分辨率不同， 参会人员的 显示器将不会显示同一区块， 无法实现精确定位画笔痕迹， 这些都是现行网络视频会议、 远 程教育、 书籍阅读等应用系统中普遍存在的问题。 发明内容 0005 本发明提供了一种白板同步的方法， 实现了不同分辨率用户之间做到白板同步。 0006 为。
12、达到上述目的， 本发明的技术方案为 ： 0007 一种网页上实现的不同分辨率下图片居中后白板同步的方法， 包括以下步骤 ： 0008 1) 用户打开网页， 加载 flash， 设置 flash 缩放模式为不缩放， 设置对齐方式为左 上对齐 ； 0009 2)flash 加载需要演示的图片， 根据图片的尺寸和 flash 的尺寸设置图片在白板 居中显示 ； 0010 3) 控制端用户， 在白板上画图形后， 发送图形的坐标和图片的坐标到所有的客户 端 ； 0011 4) 客户端用户收到消息后， 获取消息中的图形坐标和图片坐标 ； 0012 5) 客户端根据本地的图片坐标、 消息中的图片坐标、 图形。
13、坐标重新计算出本地的 图形坐标， 并根据新的图形坐标画出图形。 0013 上述技术方案中， 步骤 1) 包含如下过程 ： 0014 1a) 用 户 打 开 网 页，加 载 一 个 flash，设 置 flash 的 stage.scaleMode 为 StageScaleMode.NO_SCALE ； 0015 1b) 设置 flash 的 stage.align 属性为 StageAlign.TOP_LEFT， 使舞台左上对齐 ； 说 明 书 CN 102314466 A CN 102314470 A2/4 页 5 0016 1c)flash 连接通讯系统。 0017 上述技术方案中， 步骤。
14、 2) 包含如下过程 ： 0018 2a)增加一个容器作为白板， flash加载图片到白板， 并增加图片的complete事件 监听 ； 0019 2b) 图片加载完成后， 触发 complete 事件， flash 根据舞台的尺寸和图片的 实际尺寸计算出图片居中的坐标， 舞台的尺寸设置宽度为 ： stageWidth， 设置高度为 ： stageHeight， 图片的实际尺寸设置宽度为 ： imageWidth， 设置高度为 ： imageHeight。 居 中 坐 标 计 算 公 式 为 ： x 横 坐 标 px (stageWidth-imageWidth)/2， y 纵 坐 标 py 。
15、(stageHeight-imageHeight)/2 ； 0020 2c)设置图片的x属性为Math.max(0， px)， 设置图片的y属性为Math.max(0， py)， 此处的 Math.max 可以确保图片始终在可见区内显示。 0021 上述技术方案中， 步骤 3) 包含如下过程 ： 0022 3a) 控制端用户， 在白板上画出图形 ； 0023 3b)flash 同时将构成图形的所有坐标数据和当前居中的图片坐标通过通讯系统 发送给所有的客户端。 0024 上述技术方案中， 步骤 4) 包含如下过程 ： 0025 4a) 客户端用户从通讯系统中收到消息后， 解析消息数据 ； 002。
16、6 4b) 获取消息中的图形坐标和图片坐标， 设置图形 x、 y 坐标分别为 drawX 和 drawY， 设置图片 x、 y 坐标分别为 imageX 和 imageY， 设置本地的图片 x、 y 坐标分别为 myImageX 和 myImageY。 0027 上述技术方案中， 步骤 5) 包含如下过程 ： 0028 5a) 获取消息中的图形坐标和图片坐标， 设置图形 x、 y 坐标分别为 drawX 和 drawY， 设置本地的图片 x、 y 坐标分别为 myImageX 和 myImageY ； 0029 5b) 客户端将消息中的图形坐标换算成本地的坐标， 换算公式为 ： 横坐标 loc。
17、alX drawX+myImageX-imageX， 纵坐标 localY drawY+myImageY-imageY ； 0030 5c) 调用 flash 方法创建图形， 设置图形的 x 属性为 localX， 设置图形的 y 属性为 localY。上述技术方案中， 步骤 1) 中所述通讯系统是指可以从一个用户发送到 1 个或多个 用户的即时通讯系统。 0031 本发明与现有技术相比具有以下优点 ： 0032 (1) 可以在不同分辨率下， 实现画笔所画的图形的位置的完全统一， 没有偏差， 用 户体验好。 0033 (2) 同步及时， 平缓， 不会出现停顿的现象。 0034 (3) 由于在每。
18、个客户端独自计算图形的位置， 对于服务器端的运算压力小。 0035 (4) 完全基于网页进行实现， 不需要下载任何插件。 0036 (5) 可以很方便地运用于其它互联网系统。 附图说明 0037 此处所说明的附图用来提供对本发明的进一步理解， 构成本申请的一部分， 本发 明的示意性实施例及其说明用于解释本发明， 并不构成对本发明的不当限定。在附图中 ： 说 明 书 CN 102314466 A CN 102314470 A3/4 页 6 0038 图 1 是本发明的详细流程图。 具体实施方式 0039 以下将参考附图并结合实施例来详细说明本发明。需要说明的是， 在不冲突的情 况下， 本申请中的。
19、实施例及实施例中的特征可以相互组合。 0040 一种网页上实现的不同分辨率下图片居中后白板同步的方法， 包括以下步骤 ： 0041 1) 用户打开网页， 加载 flash， 设置 flash 缩放模式为不缩放， 设置对齐方式为左 上对齐 ； 0042 2)flash 加载需要演示的图片， 根据图片的尺寸和 flash 的尺寸设置图片在白板 居中显示 ； 0043 3) 控制端用户， 在白板上画图形后， 发送图形的坐标和图片的坐标到所有的客户 端 ； 0044 4) 客户端用户收到消息后， 获取消息中的图形坐标和图片坐标 ； 0045 5) 客户端根据本地的图片坐标、 消息中的图片坐标、 图形坐。
20、标重新计算出本地的 图形坐标， 并根据新的图形坐标画出图形。 0046 下面进一步详细说明本发明所述的方法 ： 0047 参见说明书附图， 用户打开网页， 加载 flash， 设置 flash 的 scaleMode 为 NO_ SCALE， 设置 stage.align 为 StageAlign.TOP_LEFT。并给 flash 增加一个容器， 用作白板， 白板加载图片到其内部， 图片加载完毕后， 触发 complete 事件， flash 程序根据舞台的尺寸 和图片的容器的尺寸计算出可让图片居中的 x、 y 坐标值， 设置图片在容器中的坐标位置为 Math.max(0， x)、 Math。
21、.max(0， y)。控制端用户， 在白板上画出图形， flash 同时将构成图形 的所有坐标数据和当前居中的图片坐标发送给所有的客户端。客户端根据本地的图片坐 标、 消息中的图片坐标、 图形坐标重新计算出本地的图形坐标， 并根据新的图形坐标画出图 形。 0048 图 1 是本发明的详细流程图， 详细步骤如下 ： 0049 步骤 101 ： 用户打开网页 ； 0050 步骤 102 ： 加载 flash， 显示图片到 flash 白板上 ； 0051 步骤 103 ： 设置白板为不缩放模式， 设置对齐方式为左上对齐 ； 0052 步骤 104 ： 根据图片的尺寸， 设置图片在白板中居中显示 ；。
22、 0053 步骤 105 ： 控制端用户， 在图片上画图形后， 发送图形的坐标和图片的坐标到所有 的客户端 ； 0054 步骤 106 ： 客户端用户收到消息后， 获取消息中的图形坐标和图片坐标 ； 0055 步骤 107 ： 客户端根据本地的图片坐标、 消息中的图片坐标、 图形坐标重新计算出 本地的图形坐标， 并根据新的图形坐标画出图形 ； 0056 步骤 108 ： 结束。 0057 显然， 本领域的技术人员应该明白， 上述的本发明各步骤可以用通用的计算装置 来实现， 它们可以集中在单个的计算装置上， 或者分布在多个计算装置所组成的网络上， 可 选地， 它们可以用计算装置可执行的程序代码来。
23、实现， 从而， 可以将它们存储在存储装置中 由计算装置来执行， 并且在某些情况下， 可以以不同于此处的顺序执行所示出或描述的步 说 明 书 CN 102314466 A CN 102314470 A4/4 页 7 骤， 或者将它们分别制作成各个集成电路模块， 或者将它们中的多个模块或步骤制作成单 个集成电路模块来实现。这样， 本发明不限制于任何特定的硬件和软件结合。 0058 以上所述仅为本发明的优选实施例而已， 并不用于限制本发明， 对于本领域的技 术人员来说， 本发明可以有各种更改和变化。 凡在本发明的精神和原则之内， 所作的任何修 改、 等同替换、 改进等， 均应包含在本发明的保护范围之内。 说 明 书 CN 102314466 A CN 102314470 A1/1 页 8 图 1 说 明 书 附 图 CN 102314466 A 。