《图片显示方法、装置及电子设备.pdf》由会员分享,可在线阅读,更多相关《图片显示方法、装置及电子设备.pdf(28页珍藏版)》请在专利查询网上搜索。
1、(10)申请公布号 CN 103631493 A (43)申请公布日 2014.03.12 CN 103631493 A (21)申请号 201310533217.4 (22)申请日 2013.10.31 G06F 3/0484(2013.01) G06F 3/14(2006.01) (71)申请人 小米科技有限责任公司 地址 100085 北京市海淀区清河中街 68 号 华润五彩城购物中心二期 13 层 (72)发明人 任远 漆昱恒 姚丽梅 (74)专利代理机构 北京三高永信知识产权代理 有限责任公司 11138 代理人 张耀光 (54) 发明名称 图片显示方法、 装置及电子设备 (57) 。
2、摘要 本公开是关于一种图片显示方法、 装置及电 子设备, 属于计算机领域。所述方法包括 : 接收对 显示焦点的移动操作 ; 若所述移动操作的起始点 处于所述显示框内, 则根据所述图片的尺寸、 所述 显示框的尺寸以及所述显示焦点的位移矢量移动 所述图片 ; 显示移动后的所述图片处于所述显示 框内的部分。本公开通过在检测出对显示焦点的 移动操作的起始点处于被显示的图片所属的显示 框内时, 根据该图片的尺寸、 显示框的尺寸以及显 示焦点与该显示焦点的位移矢量移动该图片, 并 显示该图片处于该显示框内的部分, 解决了需要 服务器对各个原始图片进行缩放的问题以及查看 原始图片时需要重新加载的问题, 达到。
3、节约处理 资源和网络带宽资源的目的。 (51)Int.Cl. 权利要求书 3 页 说明书 19 页 附图 5 页 (19)中华人民共和国国家知识产权局 (12)发明专利申请 权利要求书3页 说明书19页 附图5页 (10)申请公布号 CN 103631493 A CN 103631493 A 1/3 页 2 1. 一种图片显示方法, 其特征在于, 所述方法包括 : 接收对显示焦点的移动操作 ; 检测所述移动操作的起始点是否处于被显示的图片所属的显示框内 ; 若检测结果为所述移动操作的起始点处于所述显示框内, 则根据所述图片的尺寸、 所 述显示框的尺寸以及所述显示焦点的位移矢量移动所述图片 ; 。
4、显示移动后的所述图片处于所述显示框内的部分。 2. 根据权利要求 1 所述的方法, 其特征在于, 所述显示焦点的位移矢量包括水平方向 位移矢量和垂直方向位移矢量 ; 所述根据所述图片的尺寸、 所述显示框的尺寸以及所述显示焦点的位移矢量移动所述 图片, 包括 : 若所述图片的宽度大于所述显示框的宽度, 且所述图片的高度不大于所述显示框的高 度, 则根据所述水平方向位移矢量移动所述图片 ; 若所述图片的宽度不大于所述显示框的宽度, 且所述图片的高度大于所述显示框的高 度, 则根据所述垂直方向位移矢量移动所述图片 ; 若所述图片的宽度大于所述显示框的宽度, 且所述图片的高度大于所述显示框的高 度, 。
5、则根据所述水平方向位移矢量和所述垂直方向位移矢量移动所述图片。 3. 根据权利要求 2 所述的方法, 其特征在于, 所述若所述图片的宽度大于所述显示框 的宽度, 所述图片的高度不大于所述显示框的高度, 则根据所述水平方向位移矢量移动所 述图片, 包括 : 设所述图片是宽度为 2x, 高度为 2y 的图片, 所述显示框是宽度为 2X, 高度为 2Y 的矩形 显示框, 所述水平方向位移矢量对应的移动距离为 a, 其中, a 0, x、 y、 X、 Y 均为正数 ; 若 x X, y Y, 则将所述图片沿与所述水平方向位移矢量相同或相反的方向移动 Sx, 4. 根据权利要求 2 所述的方法, 其特征。
6、在于, 所述若所述图片的宽度不大于所述显示 框的宽度, 所述图片的高度大于所述显示框的高度, 则根据所述垂直方向位移矢量移动所 述图片, 包括 : 设所述图片是宽度为 2x, 高度为 2y 的图片, 所述显示框是宽度为 2X, 高度为 2Y 的矩形 显示框, 所述垂直方向位移矢量对应的移动距离为 b, b 0, x、 y、 X、 Y 均为正数 ; 若 x X, y Y, 则将所述图片沿与所述垂直方向位移矢量相同或相反的方向移动 Sy, 5. 根据权利要求 2 所述的方法, 其特征在于, 所述若所述图片的宽度大于所述显示框 的宽度, 所述图片的高度大于所述显示框的高度, 则根据所述水平方向位移矢。
7、量和所述垂 直方向位移矢量移动所述图片, 包括 : 设所述图片是宽度为 2x, 高度为 2y 的图片, 所述显示框是宽度为 2X, 高度为 2Y 的矩形 权 利 要 求 书 CN 103631493 A 2 2/3 页 3 显示框, 所述水平方向位移矢量对应的移动距离为 a, 所述垂直方向位移矢量对应的移动距 离为 b, a 0, b 0, x、 y、 X、 Y 均为正数 ; 若 x X, y Y, 则将所述图片沿与所述水平方向位移矢量相同的方向移动 Sx, 同时将 所述图片沿与所述垂直方向位移矢量相同的方向移动 Sx; 或者, 若 x X, y Y, 则将所述图片沿与所述水平方向位移矢量相反。
8、的方向移动 Sx, 同时将 所述图片沿与所述垂直方向位移矢量相反的方向移动 Sx; 6. 根据权利要求 2 所述的方法, 其特征在于, 若所述图片的宽度小于所述显示框的宽度, 所述图片的高度小于所述显示框的高度, 则保持所述图片在所述显示框内的位置不变。 7. 根据权利要求 1 所述的方法, 其特征在于, 所述方法还包括 : 在初始时刻时, 将所述图片居中显示于所述显示框内。 8. 一种图片显示装置, 其特征在于, 所述装置包括 : 操作接收模块, 用于接收对显示焦点的移动操作 ; 检测模块, 用于检测所述移动操作的起始点是否处于被显示的图片所属的显示框内 ; 图片移动模块, 用于若所述检测模。
9、块的检测结果为所述移动操作的起始点处于所述显 示框内, 则根据所述图片的尺寸、 所述显示框的尺寸以及所述显示焦点的位移矢量移动所 述图片 ; 第一显示模块, 用于显示移动后的所述图片处于所述显示框内的部分。 9. 根据权利要求 8 所述的装置, 其特征在于, 所述图片移动模块, 包括 : 第一移动单元, 用于当所述图片的宽度大于所述显示框的宽度, 所述图片的高度不大 于所述显示框的高度时, 根据水平方向位移矢量移动所述图片 ; 第二移动单元, 用于当所述图片的宽度不大于所述显示框的宽度, 所述图片的高度大 于所述显示框的高度时, 根据垂直方向位移矢量移动所述图片 ; 第三移动单元, 用于当所述。
10、图片的宽度大于所述显示框的宽度, 所述图片的高度大于 所述显示框的高度时, 根据水平方向位移矢量和垂直方向位移矢量移动所述图片 ; 其中, 所述显示焦点的位移矢量包括水平方向位移矢量和垂直方向位移矢量。 10. 根据权利要求 9 所述的装置, 其特征在于, 所述图片移动模块还包括 : 位置保持单元, 用于当所述图片的宽度小于所述显示框的宽度, 所述图片的高度小于 所述显示框的高度时, 保持所述图片在所述显示框内的位置不变。 11. 根据权利要求 8 所述的装置, 其特征在于, 所述装置还包括 : 第二显示模块, 用于在初始时刻时, 将所述图片居中显示于所述显示框内。 12. 一种电子设备, 其。
11、特征在于, 所述电子设备包括 : 一个或多个处理器 ; 存储器 ; 和 一个或多个模块, 所述一个或多个模块存储于所述存储器中并被配置成由所述一个或 权 利 要 求 书 CN 103631493 A 3 3/3 页 4 多个处理器执行, 所述一个或多个模块具有如下功能 : 接收对显示焦点的移动操作 ; 检测所述移动操作的起始点是否处于被显示的图片所属的显示框内 ; 若检测结果为所述移动操作的起始点处于所述显示框内, 则根据所述图片的尺寸、 所 述显示框的尺寸以及所述显示焦点的位移矢量移动所述图片 ; 显示移动后的所述图片处于所述显示框内的部分。 权 利 要 求 书 CN 103631493 A。
12、 4 1/19 页 5 图片显示方法、 装置及电子设备 技术领域 0001 本公开涉及计算机领域, 特别涉及一种图片显示方法、 装置及电子设备。 背景技术 0002 随着互联网领域的不断发展, 越来越多的以图片展示为核心的页面应用出现在人 们的日常生活中, 比如网络相册、 购物网站的商品展示页面以及图片搜索页面等。 0003 当页面中图片较多且图片尺寸较大时, 为了便于用户浏览, 通常将原始图片进行 缩放后显示。比如, 服务器保持原始图片的宽高比不变, 对各个原始图片进行缩放, 获得高 度或者宽度固定的缩略图。当终端显示页面时, 可以从服务器加载并显示页面中各个原始 图片对应的缩略图。用户想要。
13、查看某一缩略图对应的原始图片时, 只需将鼠标指向该缩略 图, 终端即可以从服务器加载并显示该原始图片。 0004 在实现本公开的过程中, 发现相关技术至少存在以下缺点 : 首先, 原始图片大多为 用户上传的图片, 没有统一的宽高比和尺寸, 需要服务器对各个原始图片进行缩放, 浪费服 务器处理资源 ; 其次, 终端中显示的是原始图片的缩略图, 当用户想要查看原始图片时需要 重新加载, 浪费网络带宽资源。 发明内容 0005 为了解决相关技术中需要服务器对各个原始图片进行缩放, 浪费服务器处理资源 的问题, 以及当用户想要查看原始图片时需要重新加载, 浪费网络带宽资源的问题, 本公开 提供了一种图。
14、片显示方法、 装置及电子设备。所述技术方案如下 : 0006 一方面, 提供了一种图片显示方法, 所述方法包括 : 0007 接收对显示焦点的移动操作 ; 0008 检测所述移动操作的起始点是否处于被显示的图片所属的显示框内 ; 0009 若检测结果为所述移动操作的起始点处于所述显示框内, 则根据所述图片的尺 寸、 所述显示框的尺寸以及所述显示焦点的位移矢量移动所述图片 ; 0010 显示移动后的所述图片处于所述显示框内的部分。 0011 可选的, 所述显示焦点的位移矢量包括水平方向位移矢量和垂直方向位移矢量 ; 0012 所述根据所述图片的尺寸、 所述显示框的尺寸以及所述显示焦点的位移矢量移。
15、动 所述图片, 包括 : 0013 若所述图片的宽度大于所述显示框的宽度, 所述图片的高度不大于所述显示框的 高度, 则根据所述水平方向位移矢量移动所述图片 ; 0014 若所述图片的宽度不大于所述显示框的宽度, 所述图片的高度大于所述显示框的 高度, 则根据所述垂直方向位移矢量移动所述图片 ; 0015 若所述图片的宽度大于所述显示框的宽度, 所述图片的高度大于所述显示框的高 度, 则根据所述水平方向位移矢量和所述垂直方向位移矢量移动所述图片。 0016 可选的, 所述若所述图片的宽度大于所述显示框的宽度, 所述图片的高度不大于 说 明 书 CN 103631493 A 5 2/19 页 6。
16、 所述显示框的高度, 则根据所述水平方向位移矢量移动所述图片, 包括 : 0017 设所述图片是宽度为 2x, 高度为 2y 的图片, 所述显示框是宽度为 2X, 高度为 2Y 的 矩形显示框, 所述水平方向位移矢量对应的移动距离为 a, a 0, x、 y、 X、 Y 均为正数 ; 0018 若 x X, y Y, 则将所述图片沿与所述水平方向位移矢量相同或相反的方向移 动 Sx, 0019 0020 可选的, 所述若所述图片的宽度不大于所述显示框的宽度, 所述图片的高度大于 所述显示框的高度, 则根据所述垂直方向位移矢量移动所述图片, 包括 : 0021 设所述图片是宽度为 2x, 高度为。
17、 2y 的图片, 所述显示框是宽度为 2X, 高度为 2Y 的 矩形显示框, 所述垂直方向位移矢量对应的移动距离为 b, b 0, x、 y、 X、 Y 均为正数 ; 0022 若 x X, y Y, 则将所述图片沿与所述垂直方向位移矢量相同或相反的方向移 动 Sy, 0023 0024 可选的, 所述若所述图片的宽度大于所述显示框的宽度, 所述图片的高度大于所 述显示框的高度, 则根据所述水平方向位移矢量和所述垂直方向位移矢量移动所述图片, 包括 : 0025 设所述图片是宽度为 2x, 高度为 2y 的图片, 所述显示框是宽度为 2X, 高度为 2Y 的 矩形显示框, 所述水平方向位移矢量。
18、对应的移动距离为 a, 所述垂直方向位移矢量对应的移 动距离为 b, a 0, b 0, x、 y、 X、 Y 均为正数 ; 0026 若 x X, y Y, 则将所述图片沿与所述水平方向位移矢量相同的方向移动 Sx, 同 时将所述图片沿与所述垂直方向位移矢量相同的方向移动 Sx; 0027 或者, 0028 若 x X, y Y, 则将所述图片沿与所述水平方向位移矢量相反的方向移动 Sx, 同 时将所述图片沿与所述垂直方向位移矢量相反的方向移动 Sx; 0029 0030 可选的, 所述方法还包括 : 0031 若所述图片的宽度小于所述显示框的宽度, 所述图片的高度小于所述显示框的高 度, 。
19、则保持所述图片在所述显示框内的位置不变。 0032 可选的, 所述方法还包括 : 0033 在初始时刻时, 将所述图片居中显示于所述显示框内。 0034 另一方面, 提供了一种图片显示装置, 所述装置包括 : 0035 操作接收模块, 用于接收对显示焦点的移动操作 ; 说 明 书 CN 103631493 A 6 3/19 页 7 0036 检测模块, 用于检测所述移动操作的起始点是否处于被显示的图片所属的显示框 内 ; 0037 图片移动模块, 用于若所述检测模块的检测结果为所述移动操作的起始点处于所 述显示框内, 则根据所述图片的尺寸、 所述显示框的尺寸以及所述显示焦点的位移矢量移 动所述。
20、图片 ; 0038 第一显示模块, 用于显示移动后的所述图片处于所述显示框内的部分。 0039 可选的, 所述图片移动模块, 包括 : 0040 第一移动单元, 用于当所述图片的宽度大于所述显示框的宽度, 所述图片的高度 不大于所述显示框的高度时, 根据水平方向位移矢量移动所述图片 ; 0041 第二移动单元, 用于当所述图片的宽度不大于所述显示框的宽度, 所述图片的高 度大于所述显示框的高度时, 根据垂直方向位移矢量移动所述图片 ; 0042 第三移动单元, 用于当所述图片的宽度大于所述显示框的宽度, 所述图片的高度 大于所述显示框的高度时, 根据水平方向位移矢量和垂直方向位移矢量移动所述图。
21、片 ; 0043 其中, 述显示焦点的位移矢量包括水平方向位移矢量和垂直方向位移矢量。 0044 可选的, 所述图片移动模块还包括 : 0045 位置保持单元, 用于当所述图片的宽度小于所述显示框的宽度, 所述图片的高度 小于所述显示框的高度时, 保持所述图片在所述显示框内的位置不变。 0046 可选的, 所述装置还包括 : 0047 第二显示模块, 用于在初始时刻时, 将所述图片居中显示于所述显示框内。 0048 再一方面, 提供了一种电子设备, 所述电子设备包括 : 0049 一个或多个处理器 ; 0050 存储器 ; 和 0051 一个或多个模块, 所述一个或多个模块存储于所述存储器中并。
22、被配置成由所述一 个或多个处理器执行, 所述一个或多个模块具有如下功能 : 0052 接收对显示焦点的移动操作 ; 0053 检测所述移动操作的起始点是否处于被显示的图片所属的显示框内 ; 0054 若检测结果为所述移动操作的起始点处于所述显示框内, 则根据所述图片的尺 寸、 所述显示框的尺寸以及所述显示焦点的位移矢量移动所述图片 ; 0055 显示移动后的所述图片处于所述显示框内的部分。 0056 本公开的一些有益效果可以包括 : 0057 通过在检测出对显示焦点的移动操作的起始点处于被显示的图片所属的显示框 内时, 根据该图片的尺寸、 显示框的尺寸以及显示焦点与该显示焦点的位移矢量移动该图。
23、 片, 并显示该图片处于该显示框内的部分, 服务器不需要对图片进行缩放, 且用户可以通过 移动显示焦点来显示图片的不同部分内容, 解决了相关技术中需要服务器对各个原始图片 进行缩放的问题以及用户想要查看原始图片时需要重新加载的问题, 达到节约处理资源和 网络带宽资源的目的。 0058 应当理解的是, 以上的一般描述和后文的细节描述仅是示例性的, 并不限制本公 开。 说 明 书 CN 103631493 A 7 4/19 页 8 附图说明 0059 为了更清楚地说明本公开实施例中的技术方案, 下面将对实施例描述中所需要使 用的附图作简单地介绍, 显而易见地, 下面描述中的附图仅仅是本公开的一些实。
24、施例, 对于 本领域普通技术人员来讲, 在不付出创造性劳动的前提下, 还可以根据这些附图获得其他 的附图。 0060 图 1 是本公开一个实施例提供的图片显示方法的示例性流程图 ; 0061 图 2 是本公开另一实施例提供的图片显示方法的示例性流程图 ; 0062 图 3 是本公开另一实施例提供的图片显示的一个示例性示意图 ; 0063 图 4 是本公开另一实施例提供的图片显示的另一个示例性示意图 ; 0064 图 5 是本公开另一实施例提供的图片显示的又一个示例性示意图 ; 0065 图 6 是本公开又一实施例提供的图片显示方法的示例性流程图。 0066 图 7 是本公开又一实施例提供的图片。
25、显示的示例性示意图 ; 0067 图 8 是本公开一个实施例提供的图片显示装置的示例性结构图 ; 0068 图 9 是本公开另一实施例提供的图片显示装置的示例性结构图 ; 0069 图 10 是本公开一个实施例提供的电子设备的示例性构成图。 0070 通过上述附图, 已示出本公开明确的实施例, 后文中将有更详细的描述。 这些附图 和文字描述并不是为了通过任何方式限制本公开构思的范围, 而是通过参考特定实施例为 本领域技术人员说明本公开的概念。 具体实施方式 0071 为使本公开的目的、 技术方案和优点更加清楚, 下面将结合附图对本公开作进一 步地详细说明。 在此, 本公开的示意性实施方式以及说。
26、明用于解释本公开, 但并不作为对本 公开的限定。 0072 请参考图1, 其示出了本公开一个实施例提供图片显示方法的示例性流程图。 该图 片显示方法可以应用在个人电脑、 智能手机、 平板电脑或者电子书阅读器等电子设备中对 图片进行显示。该图片显示方法可以包括 : 0073 在步骤 101 中, 接收对显示焦点的移动操作 ; 0074 其中, 显示焦点可以是光标点击位置、 手指点击触摸位置或者触摸笔点击触摸位 置等。对显示焦点的移动操作可以包括光标点击移动操作、 手指触摸滑动操作或者触摸笔 触摸滑动操作等。 0075 在步骤 102 中, 检测该移动操作的起始点是否处于被显示的图片所属的显示框 。
27、内 ; 0076 在步骤 103 中, 若检测结果为该移动操作的起始点处于该显示框内, 则根据该图 片的尺寸、 该显示框的尺寸以及该显示焦点的位移矢量移动该图片 ; 0077 在步骤 104 中, 显示移动后的图片处于该显示框内的部分。 0078 综上所述, 本公开实施例提供的图片显示方法, 通过在检测出对显示焦点的移动 操作的起始点处于被显示的图片所属的显示框内时, 根据该图片的尺寸、 显示框的尺寸以 及显示焦点与该显示焦点的位移矢量移动该图片, 并显示该图片处于该显示框内的部分, 服务器不需要对图片进行缩放, 且用户可以通过移动显示焦点来显示图片的不同部分内 说 明 书 CN 103631。
28、493 A 8 5/19 页 9 容, 解决了相关技术中需要服务器对各个原始图片进行缩放的问题以及用户想要查看原始 图片时需要重新加载的问题, 达到节约处理资源和网络带宽资源的目的。 0079 请参见图2, 其示出了本公开另一实施例提供的图片显示方法的示例性流程图。 该 图片显示方法可以应用在个人电脑、 智能手机、 平板电脑或者电子书阅读器等电子设备中 对图片进行显示。 以显示焦点为光标点击位置, 显示图片的显示框为矩形显示框为例, 该图 片显示方法可以包括 : 0080 在步骤 201 中, 接收对光标的点击移动操作 ; 0081 以该光标为鼠标对应的光标为例, 在包含有鼠标的电子设备, 比。
29、如个人电脑中, 用 户可以通过鼠标控制光标的移动和选择操作。当用户按住鼠标左键并拖动鼠标时, 电子设 备即可以接收对光标的点击移动操作。 0082 在步骤 202 中, 检测对该光标的点击移动操作的起始点是否处于被显示的图片所 属的显示框内 ; 0083 其中, 该点击移动操作的起始点可以是用户按下鼠标左键时光标所处的位置。电 子设备可以检测用户按下鼠标左键时光标所处的位置是否处于被显示的图片所属的显示 框内。 0084 在步骤 203 中, 若检测结果为对该光标的点击移动操作的起始点处于该显示框 内, 则根据该图片的尺寸、 该显示框的尺寸以及该显示焦点的位移矢量移动该图片 ; 0085 其中。
30、, 该显示焦点的位移矢量可以包括水平方向位移矢量和垂直方向位移矢量 ; 若该图片的宽度大于该显示框的宽度, 该图片的高度不大于该显示框的高度, 则根据该水 平方向位移矢量移动该图片 ; 若该图片的宽度不大于该显示框的宽度, 该图片的高度大于 该显示框的高度, 则根据该垂直方向位移矢量移动该图片 ; 若该图片的宽度大于该显示框 的宽度, 该图片的高度大于该显示框的高度, 则根据该水平方向位移矢量和该垂直方向位 移矢量移动该图片。 0086 将用户按下鼠标左键后光标的位移矢量进行水平方向和垂直方向的分解, 可以将 光标的位移矢量分为水平方向位移矢量和垂直方向位移矢量。设该图片是宽度为 2x, 高度。
31、 为 2y 的图片, 该显示框是宽度为 2X, 高度为 2Y 的矩形显示框, 该水平方向位移矢量对应的 移动距离为 a, 该垂直方向位移矢量对应的移动距离为 b, a 0, b 0, x、 y、 X、 Y 均为正 数 ; 0087 若 x X, y Y, 则将图片沿与该水平方向位移矢量相同或相反的方向移动 Sx, 0088 0089 当 x X, y Y 时, 表明图片的宽度大于显示框的宽度, 而图片的高度不大于显 示框的宽度。如图 3 所示, 其示出了本公开另一实施例提供的图片显示的一个示例性示意 图, 其中, 图片的宽度大于显示框的宽度, 而图片的高度不大于显示框的宽度, 初始时刻时, 图。
32、片的中心点保持与显示框的中心点处于同一水平线。以图片移动方向与水平方向位移 矢量相同为例, 在用户按下鼠标左键后, 当光标在水平方向上向左移动时, 图片也随之向左 移动, 当光标在水平方向上向右移动时, 图片也随之向右移动。并且, 光标在水平方向上的 移动距离与图片在水平方向上的移动距离成正比例关系, 当光标由显示框的中间位置移动 说 明 书 CN 103631493 A 9 6/19 页 10 至显示框的左边缘时, 图片的右边缘部分应当正好能够在显示框中显示, 同理, 当光标由显 示框的中间位置移动至显示框的右边缘时, 图片的左边缘部分应当正好能够在显示框中显 示。 0090 比如, 假设图。
33、 3 中图片宽度为 600 像素, 高度为 200 像素, 显示框宽度为 200 像素, 高度为 200 像素。当光标处于显示框内时, 若用户按下鼠标左键并拖动鼠标, 以控制光标向 左移动, 则图片在垂直方向上保持静止, 同时根据光标在水平方向上的移动距离, 相对于显 示框向左移动, 根据上述公式可以计算出, 图片移动距离为光标在水平方向上的移动距离 的两倍, 即光标在水平方向上移动 1 个距离单位, 图片则向左移动 2 个距离单位 ; 若初始时 刻图片中心点与显示框中心点重合, 则当光标由显示框中心点移动至显示框左边缘时, 图 片右边缘正好与显示框右边缘重合, 当图片右边缘与显示框右边缘重合。
34、后, 图片可以不再 随光标向左移动。 同理, 当用户按下鼠标左键并控制光标向右移动时, 图片也随之水平向右 移动, 且图片移动距离为光标在水平方向上移动距离的两倍。 0091 若 x X, y Y, 则将该图片沿与垂直方向位移矢量相同或相反的方向移动 Sy, 0092 0093 当 x X, y Y 时, 表明图片的宽度不大于显示框的宽度, 而图片的高度大于显示 框的宽度。如图 4 所示, 其示出了本公开另一实施例提供的图片显示的另一个示例性示意 图, 其中, 图片的宽度不大于显示框的宽度, 而图片的高度大于显示框的宽度, 初始时刻时, 图片的中心点保持与显示框的中心点处于同一垂直线。以图片移。
35、动方向与垂直方向位移 矢量相同为例, 在用户按下鼠标左键后, 当光标在垂直方向上向上移动时, 图片也随之向上 移动, 当光标在垂直方向上向下移动时, 图片也随之向下移动。并且, 光标在垂直方向上的 移动距离与图片在垂直方向上的移动距离成正比例关系, 当光标由显示框的中间位置移动 至显示框的上边缘时, 图片的下边缘部分应当正好能够在显示框中显示, 同理, 当光标由显 示框的中间位置移动至显示框的下边缘时, 图片的上边缘部分应当正好能够在显示框中显 示。 0094 比如, 假设图 4 中图片宽度为 200 像素, 高度为 600 像素, 显示框宽度为 200 像素, 高度为 200 像素。当光标处。
36、于显示框内时, 若用户按下鼠标左键并拖动鼠标, 以控制光标向 上移动, 则图片在水平方向上保持静止, 同时根据光标在垂直方向上的移动距离, 相对于显 示框向上移动, 根据上述公式可以计算出, 图片移动距离为光标在垂直方向上的移动距离 的两倍, 即光标在垂直方向上移动 1 个距离单位, 图片则向上移动 2 个距离单位 ; 若初始时 刻图片中心点与显示框中心点重合, 则当光标由显示框中心点移动至显示框上边缘时, 图 片下边缘应当正好与显示框下边缘重合, 当图片下边缘与显示框下边缘重合后, 图片可以 不再随光标向上移动。 同理, 当用户按下鼠标左键并控制光标向下移动时, 图片也随之垂直 向下移动, 。
37、且图片移动距离为光标在垂直方向上移动距离的两倍。 0095 若 x X, y Y, 则将该图片沿与该水平方向位移矢量相同的方向移动 Sx, 同时将 该图片沿与该垂直方向位移矢量相同的方向移动 Sx; 或者, 若 x X, y Y, 则将该图片沿 与该水平方向位移矢量相反的方向移动 Sx, 同时将该图片沿与该垂直方向位移矢量相反的 方向移动 Sx; 说 明 书 CN 103631493 A 10 7/19 页 11 0096 0097 当 x X, y Y 时, 表明图片的宽度大于显示框的宽度, 且图片的高度大于显示框 的宽度。如图 5 所示, 其示出了本公开另一实施例提供的图片显示的又一个示例。
38、性示意图, 其中, 图片的宽度大于显示框的宽度, 且图片的高度大于显示框的宽度, 初始时刻时, 图片 的中心点保持与显示框的中心点重叠。以图片移动方向与光标的位移矢量方向相同为例, 用户按下鼠标左键后, 当光标发生位移时, 图片向与光标位移方向相同或相反的方向移动, 且移动距离与光标的位移举例成正比例关系, 当光标由显示框的中心点移动至显示框的左 上角时, 图片的右下角部分应当正好能够在显示框中显示, 当光标由显示框的中心点移动 至显示框的右上角时, 图片的左下角部分应当正好能够在显示框中显示, 当光标由显示框 的中心点移动至显示框的左下角时, 图片的右上角部分应当正好能够在显示框中显示, 当。
39、 光标由显示框的中心点移动至显示框的右下角时, 图片的左上角部分应当正好能够在显示 框中显示。 0098 比如, 假设图 5 中图片宽度为 600 像素, 高度为 600 像素, 显示框宽度为 200 像素, 高度为 200 像素。当光标处于显示框内时, 若用户按下鼠标左键并拖动鼠标, 以控制光标向 左上方移动, 则图片也随之向左上方移动, 且图片移动方向与水平方向之间的角度和光标 移动方向与水平方向之间的角度相同。 同时, 根据上述公式可以计算出, 图片移动距离为光 标移动距离的两倍, 即光标向左上方移动1个距离单位, 图片随之向左上方移动2个距离单 位 ; 若初始时刻图片中心点与显示框中心。
40、点重合, 则当光标由显示框中心点移动至显示框 左上角时, 图片右下角应当正好与显示框右下角重合, 当图片右边缘与显示框右边缘重合 后, 图片可以停止水平方向上的移动, 或者, 当图片下边缘与显示框下边缘重合后, 图片可 以停止垂直方向上的移动。 同理, 当用户按下鼠标左键并控制光标向其它方向移动时, 图片 也按照与光标相同的方向移动, 且图片移动距离为光标在垂直方向上移动距离的两倍。 0099 需要说明的时, 本公开实施例上述列举的图片或者显示框的高度和宽度仅用于举 例说明, 实际应用中, 图片的高度和宽度右图片自身属性决定, 显示框的高度和宽度可由开 发人员根据需要自行设定, 本公开实施例对。
41、此不做限定。 0100 在步骤 204 中, 显示移动后的图片处于该显示框内的部分。 0101 如图 3 至图 5 所示, 其中, 在移动图片位置之后, 向用户显示该图片处于显示框中 的部分, 而其余部分则隐藏。 0102 综上所述, 本公开实施例提供的图片显示方法, 通过在检测出对显示焦点的移动 操作的起始点处于被显示的图片所属的显示框内时, 根据该图片的尺寸、 显示框的尺寸以 及显示焦点与该显示焦点的位移矢量移动该图片, 并显示该图片处于该显示框内的部分, 服务器不需要对图片进行缩放, 且用户可以通过移动显示焦点来显示图片的不同部分内 容, 解决了相关技术中需要服务器对各个原始图片进行缩放。
42、的问题以及用户想要查看原始 图片时需要重新加载的问题, 达到节约处理资源和网络带宽资源的目的。 0103 请参见图6, 其示出了本公开又一实施例提供的图片显示方法的示例性流程图。 该 图片显示方法可以应用在个人电脑、 智能手机、 平板电脑或者电子书阅读器等电子设备中 对图片进行显示。以显示图片的显示框为矩形显示框为例, 该图片显示方法可以包括 : 说 明 书 CN 103631493 A 11 8/19 页 12 0104 在步骤 301 中, 在初始时刻时, 将图片居中显示于所属显示框内 ; 0105 如图 7 所示, 其示出了本公开又一实施例提供的图片显示的示例性示意图, 其中, 图片的宽。
43、度大于显示框的宽度, 且图片的高度大于显示框的宽度, 初始时刻时, 图片居中显 示于显示框中, 图片的中心点与显示框的中心点重合。 0106 在步骤 302 中, 接收对显示焦点的移动操作 ; 0107 其中, 显示焦点可以是光标点击位置、 手指点击触摸位置或者触摸笔点击触摸位 置等。对显示焦点的移动操作可以包括光标点击移动操作、 手指触摸滑动操作或者触摸笔 触摸滑动操作等。 0108 在步骤 303 中, 检测该移动操作的起始点是否处于被显示的图片所属的显示框 内 ; 0109 其中, 当该图片显示方法用于包含有鼠标的电子设备, 比如个人电脑中时, 该点击 移动操作的起始点可以是用户按下鼠标。
44、左键时光标所处的位置。或者, 当该图片显示方法 用于包含有触摸屏的电子设备, 比如智能手机或者平板电脑中时, 该点击移动操作的起始 点可以是用户手指或者触摸笔的起始触摸位置。 0110 在步骤 304 中, 若检测结果为该移动操作的起始点处于该显示框内, 则根据该图 片的尺寸、 该显示框的尺寸以及该显示焦点的位移矢量移动该图片 ; 0111 其中, 该显示焦点的位移矢量可以包括水平方向位移矢量和垂直方向位移矢量 ; 若该图片的宽度大于该显示框的宽度, 该图片的高度不大于该显示框的高度, 则根据该水 平方向位移矢量移动该图片 ; 若该图片的宽度不大于该显示框的宽度, 该图片的高度大于 该显示框的。
45、高度, 则根据该垂直方向位移矢量移动该图片 ; 若该图片的宽度大于该显示框 的宽度, 该图片的高度大于该显示框的高度, 则根据该水平方向位移矢量和该垂直方向位 移矢量移动该图片 ; 若该图片的宽度小于该显示框的宽度, 该图片的高度小于该显示框的 高度, 则保持该图片在该显示框内的位置不变。 0112 将对显示焦点的移动操作的位移矢量进行水平方向和垂直方向的分解, 可以将该 移动操作的位移矢量分为水平方向位移矢量和垂直方向位移矢量。设该图片是宽度为 2x, 高度为 2y 的图片, 该显示框是宽度为 2X, 高度为 2Y 的矩形显示框, 该水平方向位移矢量对 应的移动距离为 a, 该垂直方向位移矢。
46、量对应的移动距离为 b, a 0, b 0 ; 0113 若 x X, y Y, 则将所述图片沿与该水平方向位移矢量相同或相反的方向移动 Sx, 0114 0115 当 x X, y Y 时, 表明图片的宽度大于显示框的宽度, 而图片的高度不大于显示 框的宽度。如图 3 所示, 其示出了本公开另一实施例提供的图片显示的一个示例性示意图, 其中, 图片的宽度大于显示框的宽度, 而图片的高度不大于显示框的宽度, 初始时刻时, 图 片的中心点保持与显示框的中心点处于同一水平线。以显示焦点为光标点击位置, 图片移 动方向与水平方向位移矢量相同为例, 在用户按下鼠标左键后, 当光标在水平方向上向左 移动。
47、时, 图片也随之向左移动, 当光标在水平方向上向右移动时, 图片也随之向右移动。并 且, 光标在水平方向上的移动距离与图片在水平方向上的移动距离成正比例关系, 当光标 说 明 书 CN 103631493 A 12 9/19 页 13 由显示框的中间位置移动至显示框的左边缘时, 图片的右边缘部分应当正好能够在显示框 中显示, 同理, 当光标由显示框的中间位置移动至显示框的右边缘时, 图片的左边缘部分应 当正好能够在显示框中显示。 0116 比如, 假设图 3 中图片宽度为 600 像素, 高度为 200 像素, 显示框宽度为 200 像素, 高度为 200 像素。当光标处于显示框内时, 若用户。
48、按下鼠标左键并拖动鼠标, 以控制光标向 左移动, 则图片在垂直方向上保持静止, 同时根据光标在水平方向上的移动距离, 相对于显 示框向左移动, 根据上述公式可以计算出, 图片移动距离为光标在水平方向上的移动距离 的两倍, 即光标在水平方向上移动 1 个距离单位, 图片则向左移动 2 个距离单位 ; 若初始时 刻图片中心点与显示框中心点重合, 则当光标由显示框中心点移动至显示框左边缘时, 图 片右边缘正好与显示框右边缘重合, 当图片右边缘与显示框右边缘重合后, 图片可以不再 随光标向左移动。 同理, 当用户按下鼠标左键并控制光标向右移动时, 图片也随之水平向右 移动, 且图片移动距离为光标在水平方向上移动距离的两倍。 0117 若 x X, y Y, 则将该图片沿与所述垂直方向位移矢量相同或相反的方向移动 Sy, 0118 0119 当 x X, y Y 时, 表明图片的宽度不大于显示框的宽度, 而图片的高度大于显示 框的宽度。如图 4 所示, 其示出了本公开另一实施例提供的图片显示的另一个示例性示意 图, 其中, 图片的宽度不大于显示框的宽度, 而图片的高度大于显示框的宽度, 初始时刻时, 图片的中心点保持与显示框的中心点处于同一垂直线。以显示焦点为光标点击位置, 图片 移动方向与垂直方向位移矢量相同为例,。