CN103631493A - 图片显示方法、装置及电子设备 - Google Patents

Abstract

本公开是关于一种图片显示方法、装置及电子设备，属于计算机领域。所述方法包括：接收对显示焦点的移动操作；若所述移动操作的起始点处于所述显示框内，则根据所述图片的尺寸、所述显示框的尺寸以及所述显示焦点的位移矢量移动所述图片；显示移动后的所述图片处于所述显示框内的部分。本公开通过在检测出对显示焦点的移动操作的起始点处于被显示的图片所属的显示框内时，根据该图片的尺寸、显示框的尺寸以及显示焦点与该显示焦点的位移矢量移动该图片，并显示该图片处于该显示框内的部分，解决了需要服务器对各个原始图片进行缩放的问题以及查看原始图片时需要重新加载的问题，达到节约处理资源和网络带宽资源的目的。

Description

图片显示方法、装置及电子设备

技术领域

本公开涉及计算机领域，特别涉及一种图片显示方法、装置及电子设备。

背景技术

随着互联网领域的不断发展，越来越多的以图片展示为核心的页面应用出现在人们的日常生活中，比如网络相册、购物网站的商品展示页面以及图片搜索页面等。

当页面中图片较多且图片尺寸较大时，为了便于用户浏览，通常将原始图片进行缩放后显示。比如，服务器保持原始图片的宽高比不变，对各个原始图片进行缩放，获得高度或者宽度固定的缩略图。当终端显示页面时，可以从服务器加载并显示页面中各个原始图片对应的缩略图。用户想要查看某一缩略图对应的原始图片时，只需将鼠标指向该缩略图，终端即可以从服务器加载并显示该原始图片。

在实现本公开的过程中，发现相关技术至少存在以下缺点：首先，原始图片大多为用户上传的图片，没有统一的宽高比和尺寸，需要服务器对各个原始图片进行缩放，浪费服务器处理资源；其次，终端中显示的是原始图片的缩略图，当用户想要查看原始图片时需要重新加载，浪费网络带宽资源。

发明内容

为了解决相关技术中需要服务器对各个原始图片进行缩放，浪费服务器处理资源的问题，以及当用户想要查看原始图片时需要重新加载，浪费网络带宽资源的问题，本公开提供了一种图片显示方法、装置及电子设备。所述技术方案如下：

一方面，提供了一种图片显示方法，所述方法包括：

接收对显示焦点的移动操作；

检测所述移动操作的起始点是否处于被显示的图片所属的显示框内；

若检测结果为所述移动操作的起始点处于所述显示框内，则根据所述图片的尺寸、所述显示框的尺寸以及所述显示焦点的位移矢量移动所述图片；

显示移动后的所述图片处于所述显示框内的部分。

可选的，所述显示焦点的位移矢量包括水平方向位移矢量和垂直方向位移矢量；

所述根据所述图片的尺寸、所述显示框的尺寸以及所述显示焦点的位移矢量移动所述图片，包括：

若所述图片的宽度大于所述显示框的宽度，所述图片的高度不大于所述显示框的高度，则根据所述水平方向位移矢量移动所述图片；

若所述图片的宽度不大于所述显示框的宽度，所述图片的高度大于所述显示框的高度，则根据所述垂直方向位移矢量移动所述图片；

若所述图片的宽度大于所述显示框的宽度，所述图片的高度大于所述显示框的高度，则根据所述水平方向位移矢量和所述垂直方向位移矢量移动所述图片。

可选的，所述若所述图片的宽度大于所述显示框的宽度，所述图片的高度不大于所述显示框的高度，则根据所述水平方向位移矢量移动所述图片，包括：

设所述图片是宽度为2x，高度为2y的图片，所述显示框是宽度为2X，高度为2Y的矩形显示框，所述水平方向位移矢量对应的移动距离为a，a≥0，x、y、X、Y均为正数；

若x＞X，y≤Y，则将所述图片沿与所述水平方向位移矢量相同或相反的方向移动S_x，

$S_x=\left\{\begin{array}{cc}\frac{a(x-X)}{X}& (0\≤a\≤X)\\ x-X& (a>X)\end{array}\right..$

可选的，所述若所述图片的宽度不大于所述显示框的宽度，所述图片的高度大于所述显示框的高度，则根据所述垂直方向位移矢量移动所述图片，包括：

设所述图片是宽度为2x，高度为2y的图片，所述显示框是宽度为2X，高度为2Y的矩形显示框，所述垂直方向位移矢量对应的移动距离为b，b≥0，x、y、X、Y均为正数；

若x≤X，y＞Y，则将所述图片沿与所述垂直方向位移矢量相同或相反的方向移动S_y，

$S_y=\left\{\begin{array}{cc}\frac{(y-Y)}{Y}& (0\≤b\≤Y)\\ y-Y& (b>Y)\end{array}\right..$

可选的，所述若所述图片的宽度大于所述显示框的宽度，所述图片的高度大于所述显示框的高度，则根据所述水平方向位移矢量和所述垂直方向位移矢量移动所述图片，包括：

设所述图片是宽度为2x，高度为2y的图片，所述显示框是宽度为2X，高度为2Y的矩形显示框，所述水平方向位移矢量对应的移动距离为a，所述垂直方向位移矢量对应的移动距离为b，a≥0，b≥0，x、y、X、Y均为正数；

若x＞X，y＞Y，则将所述图片沿与所述水平方向位移矢量相同的方向移动S_x，同时将所述图片沿与所述垂直方向位移矢量相同的方向移动S_x；

或者，

若x＞X，y＞Y，则将所述图片沿与所述水平方向位移矢量相反的方向移动S_x，同时将所述图片沿与所述垂直方向位移矢量相反的方向移动S_x；

$S_x=\left\{\begin{array}{cc}\frac{a(x-X)}{X}& (0\≤a\≤X)\\ x-X& (a>X)\end{array}\right.,S_y=\left\{\begin{array}{cc}\frac{(y-Y)}{Y}& (0\≤b\≤Y)\\ y-Y& (b>Y)\end{array}\right..$

可选的，所述方法还包括：

若所述图片的宽度小于所述显示框的宽度，所述图片的高度小于所述显示框的高度，则保持所述图片在所述显示框内的位置不变。

可选的，所述方法还包括：

在初始时刻时，将所述图片居中显示于所述显示框内。

另一方面，提供了一种图片显示装置，所述装置包括：

操作接收模块，用于接收对显示焦点的移动操作；

检测模块，用于检测所述移动操作的起始点是否处于被显示的图片所属的显示框内；

图片移动模块，用于若所述检测模块的检测结果为所述移动操作的起始点处于所述显示框内，则根据所述图片的尺寸、所述显示框的尺寸以及所述显示焦点的位移矢量移动所述图片；

第一显示模块，用于显示移动后的所述图片处于所述显示框内的部分。

可选的，所述图片移动模块，包括：

第一移动单元，用于当所述图片的宽度大于所述显示框的宽度，所述图片的高度不大于所述显示框的高度时，根据水平方向位移矢量移动所述图片；

第二移动单元，用于当所述图片的宽度不大于所述显示框的宽度，所述图片的高度大于所述显示框的高度时，根据垂直方向位移矢量移动所述图片；

第三移动单元，用于当所述图片的宽度大于所述显示框的宽度，所述图片的高度大于所述显示框的高度时，根据水平方向位移矢量和垂直方向位移矢量移动所述图片；

其中，述显示焦点的位移矢量包括水平方向位移矢量和垂直方向位移矢量。

可选的，所述图片移动模块还包括：

位置保持单元，用于当所述图片的宽度小于所述显示框的宽度，所述图片的高度小于所述显示框的高度时，保持所述图片在所述显示框内的位置不变。

可选的，所述装置还包括：

第二显示模块，用于在初始时刻时，将所述图片居中显示于所述显示框内。

再一方面，提供了一种电子设备，所述电子设备包括：

一个或多个处理器；

存储器；和

一个或多个模块，所述一个或多个模块存储于所述存储器中并被配置成由所述一个或多个处理器执行，所述一个或多个模块具有如下功能：

接收对显示焦点的移动操作；

检测所述移动操作的起始点是否处于被显示的图片所属的显示框内；

若检测结果为所述移动操作的起始点处于所述显示框内，则根据所述图片的尺寸、所述显示框的尺寸以及所述显示焦点的位移矢量移动所述图片；

显示移动后的所述图片处于所述显示框内的部分。

本公开的一些有益效果可以包括：

通过在检测出对显示焦点的移动操作的起始点处于被显示的图片所属的显示框内时，根据该图片的尺寸、显示框的尺寸以及显示焦点与该显示焦点的位移矢量移动该图片，并显示该图片处于该显示框内的部分，服务器不需要对图片进行缩放，且用户可以通过移动显示焦点来显示图片的不同部分内容，解决了相关技术中需要服务器对各个原始图片进行缩放的问题以及用户想要查看原始图片时需要重新加载的问题，达到节约处理资源和网络带宽资源的目的。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性的，并不限制本公开。

附图说明

为了更清楚地说明本公开实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本公开的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本公开一个实施例提供的图片显示方法的示例性流程图；

图2是本公开另一实施例提供的图片显示方法的示例性流程图；

图3是本公开另一实施例提供的图片显示的一个示例性示意图；

图4是本公开另一实施例提供的图片显示的另一个示例性示意图；

图5是本公开另一实施例提供的图片显示的又一个示例性示意图；

图6是本公开又一实施例提供的图片显示方法的示例性流程图。

图7是本公开又一实施例提供的图片显示的示例性示意图；

图8是本公开一个实施例提供的图片显示装置的示例性结构图；

图9是本公开另一实施例提供的图片显示装置的示例性结构图；

图10是本公开一个实施例提供的电子设备的示例性构成图。

通过上述附图，已示出本公开明确的实施例，后文中将有更详细的描述。这些附图和文字描述并不是为了通过任何方式限制本公开构思的范围，而是通过参考特定实施例为本领域技术人员说明本公开的概念。

具体实施方式

为使本公开的目的、技术方案和优点更加清楚，下面将结合附图对本公开作进一步地详细说明。在此，本公开的示意性实施方式以及说明用于解释本公开，但并不作为对本公开的限定。

请参考图1，其示出了本公开一个实施例提供图片显示方法的示例性流程图。该图片显示方法可以应用在个人电脑、智能手机、平板电脑或者电子书阅读器等电子设备中对图片进行显示。该图片显示方法可以包括：

在步骤101中，接收对显示焦点的移动操作；

其中，显示焦点可以是光标点击位置、手指点击触摸位置或者触摸笔点击触摸位置等。对显示焦点的移动操作可以包括光标点击移动操作、手指触摸滑动操作或者触摸笔触摸滑动操作等。

在步骤102中，检测该移动操作的起始点是否处于被显示的图片所属的显示框内；

在步骤103中，若检测结果为该移动操作的起始点处于该显示框内，则根据该图片的尺寸、该显示框的尺寸以及该显示焦点的位移矢量移动该图片；

在步骤104中，显示移动后的图片处于该显示框内的部分。

综上所述，本公开实施例提供的图片显示方法，通过在检测出对显示焦点的移动操作的起始点处于被显示的图片所属的显示框内时，根据该图片的尺寸、显示框的尺寸以及显示焦点与该显示焦点的位移矢量移动该图片，并显示该图片处于该显示框内的部分，服务器不需要对图片进行缩放，且用户可以通过移动显示焦点来显示图片的不同部分内容，解决了相关技术中需要服务器对各个原始图片进行缩放的问题以及用户想要查看原始图片时需要重新加载的问题，达到节约处理资源和网络带宽资源的目的。

请参见图2，其示出了本公开另一实施例提供的图片显示方法的示例性流程图。该图片显示方法可以应用在个人电脑、智能手机、平板电脑或者电子书阅读器等电子设备中对图片进行显示。以显示焦点为光标点击位置，显示图片的显示框为矩形显示框为例，该图片显示方法可以包括：

在步骤201中，接收对光标的点击移动操作；

以该光标为鼠标对应的光标为例，在包含有鼠标的电子设备，比如个人电脑中，用户可以通过鼠标控制光标的移动和选择操作。当用户按住鼠标左键并拖动鼠标时，电子设备即可以接收对光标的点击移动操作。

在步骤202中，检测对该光标的点击移动操作的起始点是否处于被显示的图片所属的显示框内；

其中，该点击移动操作的起始点可以是用户按下鼠标左键时光标所处的位置。电子设备可以检测用户按下鼠标左键时光标所处的位置是否处于被显示的图片所属的显示框内。

在步骤203中，若检测结果为对该光标的点击移动操作的起始点处于该显示框内，则根据该图片的尺寸、该显示框的尺寸以及该显示焦点的位移矢量移动该图片；

其中，该显示焦点的位移矢量可以包括水平方向位移矢量和垂直方向位移矢量；若该图片的宽度大于该显示框的宽度，该图片的高度不大于该显示框的高度，则根据该水平方向位移矢量移动该图片；若该图片的宽度不大于该显示框的宽度，该图片的高度大于该显示框的高度，则根据该垂直方向位移矢量移动该图片；若该图片的宽度大于该显示框的宽度，该图片的高度大于该显示框的高度，则根据该水平方向位移矢量和该垂直方向位移矢量移动该图片。

将用户按下鼠标左键后光标的位移矢量进行水平方向和垂直方向的分解，可以将光标的位移矢量分为水平方向位移矢量和垂直方向位移矢量。设该图片是宽度为2x，高度为2y的图片，该显示框是宽度为2X，高度为2Y的矩形显示框，该水平方向位移矢量对应的移动距离为a，该垂直方向位移矢量对应的移动距离为b，a≥0，b≥0，x、y、X、Y均为正数；

若x＞X，y≤Y，则将图片沿与该水平方向位移矢量相同或相反的方向移动S_x，

$S_x=\left\{\begin{array}{cc}\frac{a(x-X)}{X}& (0\≤a\≤X)\\ x-X& (a>X)\end{array}\right..$

当x＞X，y≤Y时，表明图片的宽度大于显示框的宽度，而图片的高度不大于显示框的宽度。如图3所示，其示出了本公开另一实施例提供的图片显示的一个示例性示意图，其中，图片的宽度大于显示框的宽度，而图片的高度不大于显示框的宽度，初始时刻时，图片的中心点保持与显示框的中心点处于同一水平线。以图片移动方向与水平方向位移矢量相同为例，在用户按下鼠标左键后，当光标在水平方向上向左移动时，图片也随之向左移动，当光标在水平方向上向右移动时，图片也随之向右移动。并且，光标在水平方向上的移动距离与图片在水平方向上的移动距离成正比例关系，当光标由显示框的中间位置移动至显示框的左边缘时，图片的右边缘部分应当正好能够在显示框中显示，同理，当光标由显示框的中间位置移动至显示框的右边缘时，图片的左边缘部分应当正好能够在显示框中显示。

比如，假设图3中图片宽度为600像素，高度为200像素，显示框宽度为200像素，高度为200像素。当光标处于显示框内时，若用户按下鼠标左键并拖动鼠标，以控制光标向左移动，则图片在垂直方向上保持静止，同时根据光标在水平方向上的移动距离，相对于显示框向左移动，根据上述公式可以计算出，图片移动距离为光标在水平方向上的移动距离的两倍，即光标在水平方向上移动1个距离单位，图片则向左移动2个距离单位；若初始时刻图片中心点与显示框中心点重合，则当光标由显示框中心点移动至显示框左边缘时，图片右边缘正好与显示框右边缘重合，当图片右边缘与显示框右边缘重合后，图片可以不再随光标向左移动。同理，当用户按下鼠标左键并控制光标向右移动时，图片也随之水平向右移动，且图片移动距离为光标在水平方向上移动距离的两倍。

若x≤X，y＞Y，则将该图片沿与垂直方向位移矢量相同或相反的方向移动S_y，

$S_y=\left\{\begin{array}{cc}\frac{(y-Y)}{Y}& (0\≤b\≤Y)\\ y-Y& (b>Y)\end{array}\right..$

当x≤X，y＞Y时，表明图片的宽度不大于显示框的宽度，而图片的高度大于显示框的宽度。如图4所示，其示出了本公开另一实施例提供的图片显示的另一个示例性示意图，其中，图片的宽度不大于显示框的宽度，而图片的高度大于显示框的宽度，初始时刻时，图片的中心点保持与显示框的中心点处于同一垂直线。以图片移动方向与垂直方向位移矢量相同为例，在用户按下鼠标左键后，当光标在垂直方向上向上移动时，图片也随之向上移动，当光标在垂直方向上向下移动时，图片也随之向下移动。并且，光标在垂直方向上的移动距离与图片在垂直方向上的移动距离成正比例关系，当光标由显示框的中间位置移动至显示框的上边缘时，图片的下边缘部分应当正好能够在显示框中显示，同理，当光标由显示框的中间位置移动至显示框的下边缘时，图片的上边缘部分应当正好能够在显示框中显示。

比如，假设图4中图片宽度为200像素，高度为600像素，显示框宽度为200像素，高度为200像素。当光标处于显示框内时，若用户按下鼠标左键并拖动鼠标，以控制光标向上移动，则图片在水平方向上保持静止，同时根据光标在垂直方向上的移动距离，相对于显示框向上移动，根据上述公式可以计算出，图片移动距离为光标在垂直方向上的移动距离的两倍，即光标在垂直方向上移动1个距离单位，图片则向上移动2个距离单位；若初始时刻图片中心点与显示框中心点重合，则当光标由显示框中心点移动至显示框上边缘时，图片下边缘应当正好与显示框下边缘重合，当图片下边缘与显示框下边缘重合后，图片可以不再随光标向上移动。同理，当用户按下鼠标左键并控制光标向下移动时，图片也随之垂直向下移动，且图片移动距离为光标在垂直方向上移动距离的两倍。

若x＞X，y＞Y，则将该图片沿与该水平方向位移矢量相同的方向移动S_x，同时将该图片沿与该垂直方向位移矢量相同的方向移动S_x；或者，若x＞X，y＞Y，则将该图片沿与该水平方向位移矢量相反的方向移动S_x，同时将该图片沿与该垂直方向位移矢量相反的方向移动S_x；

$S_x=\left\{\begin{array}{cc}\frac{a(x-X)}{X}& (0\≤a\≤X)\\ x-X& (a>X)\end{array}\right.,S_y=\left\{\begin{array}{cc}\frac{(y-Y)}{Y}& (0\≤b\≤Y)\\ y-Y& (b>Y)\end{array}\right..$

当x＞X，y＞Y时，表明图片的宽度大于显示框的宽度，且图片的高度大于显示框的宽度。如图5所示，其示出了本公开另一实施例提供的图片显示的又一个示例性示意图，其中，图片的宽度大于显示框的宽度，且图片的高度大于显示框的宽度，初始时刻时，图片的中心点保持与显示框的中心点重叠。以图片移动方向与光标的位移矢量方向相同为例，用户按下鼠标左键后，当光标发生位移时，图片向与光标位移方向相同或相反的方向移动，且移动距离与光标的位移举例成正比例关系，当光标由显示框的中心点移动至显示框的左上角时，图片的右下角部分应当正好能够在显示框中显示，当光标由显示框的中心点移动至显示框的右上角时，图片的左下角部分应当正好能够在显示框中显示，当光标由显示框的中心点移动至显示框的左下角时，图片的右上角部分应当正好能够在显示框中显示，当光标由显示框的中心点移动至显示框的右下角时，图片的左上角部分应当正好能够在显示框中显示。

比如，假设图5中图片宽度为600像素，高度为600像素，显示框宽度为200像素，高度为200像素。当光标处于显示框内时，若用户按下鼠标左键并拖动鼠标，以控制光标向左上方移动，则图片也随之向左上方移动，且图片移动方向与水平方向之间的角度和光标移动方向与水平方向之间的角度相同。同时，根据上述公式可以计算出，图片移动距离为光标移动距离的两倍，即光标向左上方移动1个距离单位，图片随之向左上方移动2个距离单位；若初始时刻图片中心点与显示框中心点重合，则当光标由显示框中心点移动至显示框左上角时，图片右下角应当正好与显示框右下角重合，当图片右边缘与显示框右边缘重合后，图片可以停止水平方向上的移动，或者，当图片下边缘与显示框下边缘重合后，图片可以停止垂直方向上的移动。同理，当用户按下鼠标左键并控制光标向其它方向移动时，图片也按照与光标相同的方向移动，且图片移动距离为光标在垂直方向上移动距离的两倍。

需要说明的时，本公开实施例上述列举的图片或者显示框的高度和宽度仅用于举例说明，实际应用中，图片的高度和宽度右图片自身属性决定，显示框的高度和宽度可由开发人员根据需要自行设定，本公开实施例对此不做限定。

在步骤204中，显示移动后的图片处于该显示框内的部分。

如图3至图5所示，其中，在移动图片位置之后，向用户显示该图片处于显示框中的部分，而其余部分则隐藏。

综上所述，本公开实施例提供的图片显示方法，通过在检测出对显示焦点的移动操作的起始点处于被显示的图片所属的显示框内时，根据该图片的尺寸、显示框的尺寸以及显示焦点与该显示焦点的位移矢量移动该图片，并显示该图片处于该显示框内的部分，服务器不需要对图片进行缩放，且用户可以通过移动显示焦点来显示图片的不同部分内容，解决了相关技术中需要服务器对各个原始图片进行缩放的问题以及用户想要查看原始图片时需要重新加载的问题，达到节约处理资源和网络带宽资源的目的。

请参见图6，其示出了本公开又一实施例提供的图片显示方法的示例性流程图。该图片显示方法可以应用在个人电脑、智能手机、平板电脑或者电子书阅读器等电子设备中对图片进行显示。以显示图片的显示框为矩形显示框为例，该图片显示方法可以包括：

在步骤301中，在初始时刻时，将图片居中显示于所属显示框内；

如图7所示，其示出了本公开又一实施例提供的图片显示的示例性示意图，其中，图片的宽度大于显示框的宽度，且图片的高度大于显示框的宽度，初始时刻时，图片居中显示于显示框中，图片的中心点与显示框的中心点重合。

在步骤302中，接收对显示焦点的移动操作；

其中，显示焦点可以是光标点击位置、手指点击触摸位置或者触摸笔点击触摸位置等。对显示焦点的移动操作可以包括光标点击移动操作、手指触摸滑动操作或者触摸笔触摸滑动操作等。

在步骤303中，检测该移动操作的起始点是否处于被显示的图片所属的显示框内；

其中，当该图片显示方法用于包含有鼠标的电子设备，比如个人电脑中时，该点击移动操作的起始点可以是用户按下鼠标左键时光标所处的位置。或者，当该图片显示方法用于包含有触摸屏的电子设备，比如智能手机或者平板电脑中时，该点击移动操作的起始点可以是用户手指或者触摸笔的起始触摸位置。

在步骤304中，若检测结果为该移动操作的起始点处于该显示框内，则根据该图片的尺寸、该显示框的尺寸以及该显示焦点的位移矢量移动该图片；

其中，该显示焦点的位移矢量可以包括水平方向位移矢量和垂直方向位移矢量；若该图片的宽度大于该显示框的宽度，该图片的高度不大于该显示框的高度，则根据该水平方向位移矢量移动该图片；若该图片的宽度不大于该显示框的宽度，该图片的高度大于该显示框的高度，则根据该垂直方向位移矢量移动该图片；若该图片的宽度大于该显示框的宽度，该图片的高度大于该显示框的高度，则根据该水平方向位移矢量和该垂直方向位移矢量移动该图片；若该图片的宽度小于该显示框的宽度，该图片的高度小于该显示框的高度，则保持该图片在该显示框内的位置不变。

将对显示焦点的移动操作的位移矢量进行水平方向和垂直方向的分解，可以将该移动操作的位移矢量分为水平方向位移矢量和垂直方向位移矢量。设该图片是宽度为2x，高度为2y的图片，该显示框是宽度为2X，高度为2Y的矩形显示框，该水平方向位移矢量对应的移动距离为a，该垂直方向位移矢量对应的移动距离为b，a≥0，b≥0；

若x＞X，y≤Y，则将所述图片沿与该水平方向位移矢量相同或相反的方向移动S_x，

$S_x=\left\{\begin{array}{cc}\frac{a(x-X)}{X}& (0\≤a\≤X)\\ x-X& (a>X)\end{array}\right..$

当x＞X，y≤Y时，表明图片的宽度大于显示框的宽度，而图片的高度不大于显示框的宽度。如图3所示，其示出了本公开另一实施例提供的图片显示的一个示例性示意图，其中，图片的宽度大于显示框的宽度，而图片的高度不大于显示框的宽度，初始时刻时，图片的中心点保持与显示框的中心点处于同一水平线。以显示焦点为光标点击位置，图片移动方向与水平方向位移矢量相同为例，在用户按下鼠标左键后，当光标在水平方向上向左移动时，图片也随之向左移动，当光标在水平方向上向右移动时，图片也随之向右移动。并且，光标在水平方向上的移动距离与图片在水平方向上的移动距离成正比例关系，当光标由显示框的中间位置移动至显示框的左边缘时，图片的右边缘部分应当正好能够在显示框中显示，同理，当光标由显示框的中间位置移动至显示框的右边缘时，图片的左边缘部分应当正好能够在显示框中显示。

比如，假设图3中图片宽度为600像素，高度为200像素，显示框宽度为200像素，高度为200像素。当光标处于显示框内时，若用户按下鼠标左键并拖动鼠标，以控制光标向左移动，则图片在垂直方向上保持静止，同时根据光标在水平方向上的移动距离，相对于显示框向左移动，根据上述公式可以计算出，图片移动距离为光标在水平方向上的移动距离的两倍，即光标在水平方向上移动1个距离单位，图片则向左移动2个距离单位；若初始时刻图片中心点与显示框中心点重合，则当光标由显示框中心点移动至显示框左边缘时，图片右边缘正好与显示框右边缘重合，当图片右边缘与显示框右边缘重合后，图片可以不再随光标向左移动。同理，当用户按下鼠标左键并控制光标向右移动时，图片也随之水平向右移动，且图片移动距离为光标在水平方向上移动距离的两倍。

若x≤X，y＞Y，则将该图片沿与所述垂直方向位移矢量相同或相反的方向移动S_y，

$S_y=\left\{\begin{array}{cc}\frac{(y-Y)}{Y}& (0\≤b\≤Y)\\ y-Y& (b>Y)\end{array}\right..$

当x≤X，y＞Y时，表明图片的宽度不大于显示框的宽度，而图片的高度大于显示框的宽度。如图4所示，其示出了本公开另一实施例提供的图片显示的另一个示例性示意图，其中，图片的宽度不大于显示框的宽度，而图片的高度大于显示框的宽度，初始时刻时，图片的中心点保持与显示框的中心点处于同一垂直线。以显示焦点为光标点击位置，图片移动方向与垂直方向位移矢量相同为例，在用户按下鼠标左键后，当光标在垂直方向上向上移动时，图片也随之向上移动，当光标在垂直方向上向下移动时，图片也随之向下移动。并且，光标在垂直方向上的移动距离与图片在垂直方向上的移动距离成正比例关系，当光标由显示框的中间位置移动至显示框的上边缘时，图片的下边缘部分应当正好能够在显示框中显示，同理，当光标由显示框的中间位置移动至显示框的下边缘时，图片的上边缘部分应当正好能够在显示框中显示。

比如，假设图4中图片宽度为200像素，高度为600像素，显示框宽度为200像素，高度为200像素。当光标处于显示框内时，若用户按下鼠标左键并拖动鼠标，以控制光标向上移动，则图片在水平方向上保持静止，同时根据光标在垂直方向上的移动距离，相对于显示框向上移动，根据上述公式可以计算出，图片移动距离为光标在垂直方向上的移动距离的两倍，即光标在垂直方向上移动1个距离单位，图片则向上移动2个距离单位；若初始时刻图片中心点与显示框中心点重合，则当光标由显示框中心点移动至显示框上边缘时，图片下边缘应当正好与显示框下边缘重合，当图片下边缘与显示框下边缘重合后，图片可以不再随光标向上移动。同理，当用户按下鼠标左键并控制光标向下移动时，图片也随之垂直向下移动，且图片移动距离为光标在垂直方向上移动距离的两倍。

若x＞X，y＞Y，则将该图片沿与该水平方向位移矢量相同的方向移动S_x，同时将该图片沿与该垂直方向位移矢量相同的方向移动S_x；或者，若x＞X，y＞Y，则将该图片沿与该水平方向位移矢量相反的方向移动S_x，同时将该图片沿与该垂直方向位移矢量相反的方向移动S_x；

$S_x=\left\{\begin{array}{cc}\frac{a(x-X)}{X}& (0\≤a\≤X)\\ x-X& (a>X)\end{array}\right.,S_y=\left\{\begin{array}{cc}\frac{(y-Y)}{Y}& (0\≤b\≤Y)\\ y-Y& (b>Y)\end{array}\right..$

当x＞X，y＞Y时，表明图片的宽度大于显示框的宽度，且图片的高度大于显示框的宽度。如图5所示，其示出了本公开另一实施例提供的图片显示的又一个示例性示意图，其中，图片的宽度大于显示框的宽度，且图片的高度大于显示框的宽度，初始时刻时，图片的中心点保持与显示框的中心点重叠。以显示焦点为光标点击位置，图片移动方向与光标的位移矢量方向相同为例，用户按下鼠标左键后，当光标发生位移时，图片向与光标位移方向相同或相反的方向移动，且移动距离与光标的位移举例成正比例关系，当光标由显示框的中心点移动至显示框的左上角时，图片的右下角部分应当正好能够在显示框中显示，当光标由显示框的中心点移动至显示框的右上角时，图片的左下角部分应当正好能够在显示框中显示，当光标由显示框的中心点移动至显示框的左下角时，图片的右上角部分应当正好能够在显示框中显示，当光标由显示框的中心点移动至显示框的右下角时，图片的左上角部分应当正好能够在显示框中显示。

比如，假设图3中图片宽度为600像素，高度为200像素，显示框宽度为200像素，高度为200像素。当光标处于显示框内时，若用户按下鼠标左键并拖动鼠标，以控制光标向左移动，则图片在垂直方向上保持静止，同时根据光标在水平方向上的移动距离，相对于显示框向左移动，根据上述公式可以计算出，图片移动距离为光标在水平方向上的移动距离的两倍，即光标在水平方向上移动1个距离单位，图片则向左移动2个距离单位；若初始时刻图片中心点与显示框中心点重合，则当光标由显示框中心点移动至显示框左边缘时，图片右边缘正好与显示框右边缘重合，当图片右边缘与显示框右边缘重合后，图片可以停止水平方向上的移动，或者，当图片下边缘与显示框下边缘重合后，图片可以停止垂直方向上的移动。同理，当用户按下鼠标左键并控制光标向右移动时，图片也随之水平向右移动，且图片移动距离为光标在水平方向上移动距离的两倍。

若x＜X，y＜Y，则保持将该图片在显示框中的位置不变。

比如，假设图片宽度为150像素，高度为150像素，显示框宽度为200像素，高度为200像素，则图片居中显示于显示框中，当用户按下鼠标左键并移动光标时，图片不随光标移动。

需要说明的时，本公开实施例上述列举的图片或者显示框的高度和宽度仅用于举例说明，实际应用中，图片的高度和宽度右图片自身属性决定，显示框的高度和宽度可由开发人员根据需要自行设定，本公开实施例对此不做限定。

在步骤305中，显示移动后的图片处于该显示框内的部分。

如图3至图5以及图7所示，其中，在初始显示图片或者移动图片后，向用户显示该图片处于显示框中的部分，而其余部分则隐藏。当用户想要查看该图片隐藏部分的内容时，只需要对显示焦点进行移动操作的位置，比如，当用户在包含有鼠标的个人电脑中浏览图片时，可以通过按下鼠标左键并拖动鼠标在显示框中的位置来查看显示框所显示的图片的不同部分内容。

综上所述，本公开实施例提供的图片显示方法，通过在检测出对显示焦点的移动操作的起始点处于被显示的图片所属的显示框内时，根据该图片的尺寸、显示框的尺寸以及显示焦点与该显示焦点的位移矢量移动该图片，并显示该图片处于该显示框内的部分，服务器不需要对图片进行缩放，且用户可以通过移动显示焦点来显示图片的不同部分内容，解决了相关技术中需要服务器对各个原始图片进行缩放的问题以及用户想要查看原始图片时需要重新加载的问题，达到节约处理资源和网络带宽资源的目的。

请参见图8，其示出了本公开一个实施例提供的图片显示装置的示例性结构图。该图片显示装置可以是一个独立的装置，也可以实现为个人电脑、智能手机、平板电脑或者电子书阅读器等电子设备中的一部分。该图片显示装置可以包括：

操作接收模块401，用于接收对显示焦点的移动操作；

检测模块402，用于检测所述移动操作的起始点是否处于被显示的图片所属的显示框内；

图片移动模块403，用于若所述检测模块402的检测结果为所述移动操作的起始点处于所述显示框内，则根据所述图片的尺寸、所述显示框的尺寸以及所述显示焦点的位移矢量移动所述图片；

第一显示模块404，用于显示移动后的所述图片处于所述显示框内的部分。

综上所述，本公开实施例提供的图片显示装置，通过在检测出对显示焦点的移动操作的起始点处于被显示的图片所属的显示框内时，根据该图片的尺寸、显示框的尺寸以及显示焦点与该显示焦点的位移矢量移动该图片，并显示该图片处于该显示框内的部分，服务器不需要对图片进行缩放，且用户可以通过移动显示焦点来显示图片的不同部分内容，解决了相关技术中需要服务器对各个原始图片进行缩放的问题以及用户想要查看原始图片时需要重新加载的问题，达到节约处理资源和网络带宽资源的目的。

请参见图9，其示出了本公开另一实施例提供的图片显示装置的示例性结构图。该图片显示装置可以是一个独立的装置，也可以实现为个人电脑、智能手机、平板电脑或者电子书阅读器等电子设备中的一部分。该图片显示装置500可以包括：

操作接收模块501，用于接收对显示焦点的移动操作；

检测模块502，用于检测所述移动操作的起始点是否处于被显示的图片所属的显示框内；

图片移动模块503，用于若所述检测模块502的检测结果为所述移动操作的起始点处于所述显示框内，则根据所述图片的尺寸、所述显示框的尺寸以及所述显示焦点的位移矢量移动所述图片；

第一显示模块504，用于显示移动后的所述图片处于所述显示框内的部分。

所述图片移动模块503，包括：

第一移动单元503a，用于当所述图片的宽度大于所述显示框的宽度，所述图片的高度不大于所述显示框的高度时，根据水平方向位移矢量移动所述图片；

第二移动单元503b，用于当所述图片的宽度不大于所述显示框的宽度，所述图片的高度大于所述显示框的高度时，根据垂直方向位移矢量移动所述图片；

第三移动单元503c，用于当所述图片的宽度大于所述显示框的宽度，所述图片的高度大于所述显示框的高度时，根据水平方向位移矢量和垂直方向位移矢量移动所述图片；

其中，所述显示焦点的位移矢量包括水平方向位移矢量和垂直方向位移矢量。

所述第一移动单元503a，用于当x＞X，y≤Y时，将所述图片沿与所述水平方向位移矢量相同或相反的方向移动S_x；

$S_x=\left\{\begin{array}{cc}\frac{a(x-X)}{X}& (0\≤a\≤X)\\ x-X& (a>X)\end{array}\right.;$

其中，所述图片是宽度为2x，高度为2y的图片，所述显示框是宽度为2X，高度为2Y的矩形显示框，所述水平方向位移矢量对应的移动距离为a，a≥0，x、y、X、Y均为正数。

所述第二移动单元503b，用于当x≤X，y＞Y时，将所述图片沿与所述垂直方向位移矢量相同或相反的方向移动S_y；

$S_y=\left\{\begin{array}{cc}\frac{(y-Y)}{Y}& (0\≤b\≤Y)\\ y-Y& (b>Y)\end{array}\right.;$

其中，所述图片是宽度为2x，高度为2y的图片，所述显示框是宽度为2X，高度为2Y的矩形显示框，所述垂直方向位移矢量对应的移动距离为b，b≥0。

所述第三移动单元503c，用于当x＞X，y＞Y时，将所述图片将所述图片沿与所述水平方向位移矢量相同的方向移动S_x，同时将所述图片沿与所述垂直方向位移矢量相同的方向移动S_x；或者，所述第三移动单元503c，用于当x＞X，y＞Y时，则将所述图片沿与所述水平方向位移矢量相反的方向移动S_x，同时将所述图片沿与所述垂直方向位移矢量相反的方向移动S_x；

$S_x=\left\{\begin{array}{cc}\frac{a(x-X)}{X}& (0\≤a\≤X)\\ x-X& (a>X)\end{array}\right.,S_y=\left\{\begin{array}{cc}\frac{(y-Y)}{Y}& (0\≤b\≤Y)\\ y-Y& (b>Y)\end{array}\right.;$

其中，所述图片是宽度为2x，高度为2y的图片，所述显示框是宽度为2X，高度为2Y的矩形显示框，所述水平方向位移矢量对应的移动距离为a，所述垂直方向位移矢量对应的移动距离为b，a≥0，b≥0，x、y、X、Y均为正数。

所述图片移动模块503还包括：

位置保持单元503d，用于当所述图片的宽度小于所述显示框的宽度，所述图片的高度小于所述显示框的高度时，保持所述图片在所述显示框内的位置不变。

所述装置还包括：

第二显示模块505，用于在初始时刻时，将所述图片居中显示于所述显示框内。

综上所述，本公开实施例提供的图片显示装置，通过在检测出对显示焦点的移动操作的起始点处于被显示的图片所属的显示框内时，根据该图片的尺寸、显示框的尺寸以及显示焦点与该显示焦点的位移矢量移动该图片，并显示该图片处于该显示框内的部分，服务器不需要对图片进行缩放，且用户可以通过移动显示焦点来显示图片的不同部分内容，解决了相关技术中需要服务器对各个原始图片进行缩放的问题以及用户想要查看原始图片时需要重新加载的问题，达到节约处理资源和网络带宽资源的目的。

请参见图10，其示出了本公开一个实施例提供的电子设备的示例性构成图。该电子设备可以用于实施上述实施例中提供的图片显示方法。优选的：

电子设备600可以包括通信单元610、包括有一个或一个以上计算机可读存储介质的存储器620、输入单元630、显示单元640、传感器650、音频电路660、WIFI（Wireless Fidelity，无线保真）模块670、包括有一个或者一个以上处理核心的处理器680、以及电源690等部件。本领域技术人员可以理解，图中示出的电子设备结构并不构成对电子设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。其中：

通信单元610可用于收发信息或通话过程中，信号的接收和发送，该通信单元610可以为RF（Radio Frequency，射频）电路、路由器、调制解调器、等网络通信设备。特别地，当通信单元610为RF电路时，将基站的下行信息接收后，交由一个或者一个以上处理器680处理；另外，将涉及上行的数据发送给基站。通常，作为通信单元的RF电路包括但不限于天线、至少一个放大器、调谐器、一个或多个振荡器、用户身份模块（SIM）卡、收发信机、耦合器、LNA（Low Noise Amplifier，低噪声放大器）、双工器等。此外，通信单元610还可以通过无线通信与网络和其他设备通信。所述无线通信可以使用任一通信标准或协议，包括但不限于GSM（Global System of Mobile communication，全球移动通讯系统）、GPRS（General Packet Radio Service，通用分组无线服务）、CDMA（Code Division Multiple Access，码分多址）、WCDMA（Wideband Code DivisionMultiple Access，宽带码分多址）、LTE（Long Term Evolution，长期演进）、电子邮件、SMS（Short Messaging Service，短消息服务）等。存储器620可用于存储软件程序以及模块，处理器680通过运行存储在存储器620的软件程序以及模块，从而执行各种功能应用以及数据处理。存储器620可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序（比如声音播放功能、图像播放功能等）等；存储数据区可存储根据电子设备600的使用所创建的数据（比如音频数据、电话本等）等。此外，存储器620可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。相应地，存储器620还可以包括存储器控制器，以提供处理器680和输入单元630对存储器620的访问。

输入单元630可用于接收输入的数字或字符信息，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。优选地，输入单元630可包括触敏表面631以及其他输入设备632。触敏表面631，也称为触摸显示屏或者触控板，可收集用户在其上或附近的触摸操作（比如用户使用手指、触笔等任何适合的物体或附件在触敏表面631上或在触敏表面631附近的操作），并根据预先设定的程式驱动相应的连接装置。可选的，触敏表面631可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器680，并能接收处理器680发来的命令并加以执行。此外，可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触敏表面631。除了触敏表面631，输入单元630还可以包括其他输入设备632。优选地，其他输入设备632可以包括但不限于物理键盘、功能键（比如音量控制按键、开关按键等）、轨迹球、鼠标、操作杆等中的一种或多种。

显示单元640可用于显示由用户输入的信息或提供给用户的信息以及电子设备600的各种图形用户接口，这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。显示单元640可包括显示面板641，可选的，可以采用LCD（Liquid Crystal Display，液晶显示器）、OLED（Organic Light-EmittingDiode，有机发光二极管）等形式来配置显示面板641。进一步的，触敏表面631可覆盖显示面板641，当触敏表面631检测到在其上或附近的触摸操作后，传送给处理器680以确定触摸事件的类型，随后处理器680根据触摸事件的类型在显示面板641上提供相应的视觉输出。虽然在图10中，触敏表面631与显示面板641是作为两个独立的部件来实现输入和输入功能，但是在某些实施例中，可以将触敏表面631与显示面板641集成而实现输入和输出功能。

电子设备600还可包括至少一种传感器650，比如光传感器、运动传感器以及其他传感器。光传感器可包括环境光传感器及接近传感器，其中，环境光传感器可根据环境光线的明暗来调节显示面板641的亮度，接近传感器可在电子设备600移动到耳边时，关闭显示面板641和/或背光。作为运动传感器的一种，重力加速度传感器可检测各个方向上（一般为三轴）加速度的大小，静止时可检测出重力的大小及方向，可用于识别手机姿态的应用（比如横竖屏切换、相关游戏、磁力计姿态校准）、振动识别相关功能（比如计步器、敲击）等；至于电子设备600还可配置的陀螺仪、气压计、湿度计、温度计、红外线传感器等其他传感器，在此不再赘述。

音频电路660、扬声器661，传声器662可提供用户与电子设备600之间的音频接口。音频电路660可将接收到的音频数据转换后的电信号，传输到扬声器661，由扬声器661转换为声音信号输出；另一方面，传声器662将收集的声音信号转换为电信号，由音频电路660接收后转换为音频数据，再将音频数据输出处理器680处理后，经RF电路610以发送给比如另一电子设备，或者将音频数据输出至存储器620以便进一步处理。音频电路660还可能包括耳塞插孔，以提供外设耳机与电子设备600的通信。

为了实现无线通信，该电子设备上可以配置有无线通信单元670，该无线通信单元670可以为WIFI模块。WIFI属于短距离无线传输技术，电子设备600通过无线通信单元670可以帮助用户收发电子邮件、浏览网页和访问流式媒体等，它为用户提供了无线的宽带互联网访问。虽然图中示出了无线通信单元670，但是可以理解的是，其并不属于电子设备600的必须构成，完全可以根据需要在不改变本公开的本质的范围内而省略。

处理器680是电子设备600的控制中心，利用各种接口和线路连接整个手机的各个部分，通过运行或执行存储在存储器620内的软件程序和/或模块，以及调用存储在存储器620内的数据，执行电子设备600的各种功能和处理数据，从而对手机进行整体监控。可选的，处理器680可包括一个或多个处理核心；优选的，处理器680可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器680中。

电子设备600还包括给各个部件供电的电源690（比如电池），优选的，电源可以通过电源管理系统与处理器680逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源690还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。

尽管未示出，电子设备600还可以包括摄像头、蓝牙模块等，在此不再赘述。在本实施例中，电子设备还包括有存储器和一个或多个模块，所述一个或多个模块存储于所述存储器中并被配置成由所述一个或多个处理器执行，所述一个或多个模块具有如下功能：

接收对显示焦点的移动操作；

检测所述移动操作的起始点是否处于被显示的图片所属的显示框内；

若检测结果为所述移动操作的起始点处于所述显示框内，则根据所述图片的尺寸、所述显示框的尺寸以及所述显示焦点的位移矢量移动所述图片；

显示移动后的所述图片处于所述显示框内的部分。

所述显示焦点的位移矢量包括水平方向位移矢量和垂直方向位移矢量；

所述根据所述图片的尺寸、所述显示框的尺寸以及所述显示焦点的位移矢量移动所述图片，包括：

若所述图片的宽度大于所述显示框的宽度，所述图片的高度不大于所述显示框的高度，则根据所述水平方向位移矢量移动所述图片；

若所述图片的宽度不大于所述显示框的宽度，所述图片的高度大于所述显示框的高度，则根据所述垂直方向位移矢量移动所述图片；

若所述图片的宽度大于所述显示框的宽度，所述图片的高度大于所述显示框的高度，则根据所述水平方向位移矢量和所述垂直方向位移矢量移动所述图片。

所述若所述图片的宽度大于所述显示框的宽度，所述图片的高度不大于所述显示框的高度，则根据所述水平方向位移矢量移动所述图片，包括：

设所述图片是宽度为2x，高度为2y的图片，所述显示框是宽度为2X，高度为2Y的矩形显示框，所述水平方向位移矢量对应的移动距离为a，a≥0；

若x＞X，y≤Y，则将所述图片沿与所述水平方向位移矢量相同或相反的方向移动S_x，

$S_x=\left\{\begin{array}{cc}\frac{a(x-X)}{X}& (0\≤a\≤X)\\ x-X& (a>X)\end{array}\right..$

所述若所述图片的宽度不大于所述显示框的宽度，所述图片的高度大于所述显示框的高度，则根据所述垂直方向位移矢量移动所述图片，包括：

设所述图片是宽度为2x，高度为2y的图片，所述显示框是宽度为2X，高度为2Y的矩形显示框，所述垂直方向位移矢量对应的移动距离为b，b≥0；

若x≤X，y＞Y，则将所述图片沿与所述垂直方向位移矢量相同或相反的方向移动S_y，

$S_y=\left\{\begin{array}{cc}\frac{(y-Y)}{Y}& (0\≤b\≤Y)\\ y-Y& (b>Y)\end{array}\right..$

所述若所述图片的宽度大于所述显示框的宽度，所述图片的高度大于所述显示框的高度，则根据所述水平方向位移矢量和所述垂直方向位移矢量移动所述图片，包括：

设所述图片是宽度为2x，高度为2y的图片，所述显示框是宽度为2X，高度为2Y的矩形显示框，所述水平方向位移矢量对应的移动距离为a，所述垂直方向位移矢量对应的移动距离为b，a≥0，b≥0；

若x＞X，y＞Y，则将所述图片沿与所述水平方向位移矢量相同的方向移动S_x，同时将所述图片沿与所述垂直方向位移矢量相同的方向移动S_x；

或者，

若x＞X，y＞Y，则将所述图片沿与所述水平方向位移矢量相反的方向移动S_x，同时将所述图片沿与所述垂直方向位移矢量相反的方向移动S_x；

$S_x=\left\{\begin{array}{cc}\frac{a(x-X)}{X}& (0\≤a\≤X)\\ x-X& (a>X)\end{array}\right.,S_y=\left\{\begin{array}{cc}\frac{(y-Y)}{Y}& (0\≤b\≤Y)\\ y-Y& (b>Y)\end{array}\right..$

所述功能还包括：

若所述图片的宽度小于所述显示框的宽度，所述图片的高度小于所述显示框的高度，则保持所述图片在所述显示框内的位置不变。

所述功能还包括：

在初始时刻时，将所述图片居中显示于所述显示框内。

综上所述，本公开实施例提供的电子设备，通过在检测出对显示焦点的移动操作的起始点处于被显示的图片所属的显示框内时，根据该图片的尺寸、显示框的尺寸以及显示焦点与该显示焦点的位移矢量移动该图片，并显示该图片处于该显示框内的部分，服务器不需要对图片进行缩放，且用户可以通过移动显示焦点来显示图片的不同部分内容，解决了相关技术中需要服务器对各个原始图片进行缩放的问题以及用户想要查看原始图片时需要重新加载的问题，达到节约处理资源和网络带宽资源的目的。

本公开的实施例还提供一种非易失性可读存储介质，该存储介质中存储有一个或多个模块（programs），该一个或多个模块被应用在手持设备中时，可以使得该手持设备执行如下步骤的指令（instructions）：

接收对显示焦点的移动操作；

检测所述移动操作的起始点是否处于被显示的图片所属的显示框内；

若检测结果为所述移动操作的起始点处于所述显示框内，则根据所述图片的尺寸、所述显示框的尺寸以及所述显示焦点的位移矢量移动所述图片；

显示移动后的所述图片处于所述显示框内的部分。

所述显示焦点的位移矢量包括水平方向位移矢量和垂直方向位移矢量；

所述根据所述图片的尺寸、所述显示框的尺寸以及所述显示焦点的位移矢量移动所述图片，包括：

若所述图片的宽度大于所述显示框的宽度，所述图片的高度不大于所述显示框的高度，则根据所述水平方向位移矢量移动所述图片；

若所述图片的宽度不大于所述显示框的宽度，所述图片的高度大于所述显示框的高度，则根据所述垂直方向位移矢量移动所述图片；

若所述图片的宽度大于所述显示框的宽度，所述图片的高度大于所述显示框的高度，则根据所述水平方向位移矢量和所述垂直方向位移矢量移动所述图片。

所述若所述图片的宽度大于所述显示框的宽度，所述图片的高度不大于所述显示框的高度，则根据所述水平方向位移矢量移动所述图片，包括：

设所述图片是宽度为2x，高度为2y的图片，所述显示框是宽度为2X，高度为2Y的矩形显示框，所述水平方向位移矢量对应的移动距离为a，a≥0；

若x＞X，y≤Y，则将所述图片沿与所述水平方向位移矢量相同或相反的方向移动S_x，

$S_x=\left\{\begin{array}{cc}\frac{a(x-X)}{X}& (0\≤a\≤X)\\ x-X& (a>X)\end{array}\right..$

所述若所述图片的宽度不大于所述显示框的宽度，所述图片的高度大于所述显示框的高度，则根据所述垂直方向位移矢量移动所述图片，包括：

设所述图片是宽度为2x，高度为2y的图片，所述显示框是宽度为2X，高度为2Y的矩形显示框，所述垂直方向位移矢量对应的移动距离为b，b≥0；

若x≤X，y＞Y，则将所述图片沿与所述垂直方向位移矢量相同或相反的方向移动S_y，

$S_y=\left\{\begin{array}{cc}\frac{(y-Y)}{Y}& (0\≤b\≤Y)\\ y-Y& (b>Y)\end{array}\right..$

所述若所述图片的宽度大于所述显示框的宽度，所述图片的高度大于所述显示框的高度，则根据所述水平方向位移矢量和所述垂直方向位移矢量移动所述图片，包括：

设所述图片是宽度为2x，高度为2y的图片，所述显示框是宽度为2X，高度为2Y的矩形显示框，所述水平方向位移矢量对应的移动距离为a，所述垂直方向位移矢量对应的移动距离为b，a≥0，b≥0；

若x＞X，y＞Y，则将所述图片沿与所述水平方向位移矢量相同的方向移动S_x，同时将所述图片沿与所述垂直方向位移矢量相同的方向移动S_x；

或者，

若x＞X，y＞Y，则将所述图片沿与所述水平方向位移矢量相反的方向移动S_x，同时将所述图片沿与所述垂直方向位移矢量相反的方向移动S_x；

$S_x=\left\{\begin{array}{cc}\frac{a(x-X)}{X}& (0\≤a\≤X)\\ x-X& (a>X)\end{array}\right.,S_y=\left\{\begin{array}{cc}\frac{(y-Y)}{Y}& (0\≤b\≤Y)\\ y-Y& (b>Y)\end{array}\right..$

所述步骤还包括：

若所述图片的宽度小于所述显示框的宽度，所述图片的高度小于所述显示框的高度，则保持所述图片在所述显示框内的位置不变。

所述步骤还包括：

在初始时刻时，将所述图片居中显示于所述显示框内。

此外，根据本公开的方法还可以被实现为由CPU执行的计算机程序。在该计算机程序被CPU执行时，执行本公开的方法中限定的上述功能。

此外，上述方法步骤以及系统单元也可以利用控制器以及用于存储使得控制器实现上述步骤或单元功能的计算机程序的计算机可读存储设备实现。

此外，应该明白的是，本文所述的计算机可读存储设备(例如，存储器)可以是易失性存储器或非易失性存储器，或者可以包括易失性存储器和非易失性存储器两者。作为例子而非限制性的，非易失性存储器可以包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦写可编程ROM(EEPROM)或快闪存储器。易失性存储器可以包括随机存取存储器(RAM)，该RAM可以充当外部高速缓存存储器。作为例子而非限制性的，RAM可以以多种形式获得，比如同步RAM(DRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据速率SDRAM(DDR SDRAM)、增强SDRAM(ESDRAM)、同步链路DRAM(SLDRAM)以及直接RambusRAM(DRRAM)。所公开的方面的存储设备意在包括但不限于这些和其它合适类型的存储器。

本领域技术人员还将明白的是，结合这里的公开所描述的各种示例性逻辑块、模块、电路和算法步骤可以被实现为电子硬件、计算机软件或两者的组合。为了清楚地说明硬件和软件的这种可互换性，已经就各种示意性组件、方块、模块、电路和步骤的功能对其进行了一般性的描述。这种功能是被实现为软件还是被实现为硬件取决于具体应用以及施加给整个系统的设计约束。本领域技术人员可以针对每种具体应用以各种方式来实现所述的功能，但是这种实现决定不应被解释为导致脱离本公开的范围。

结合这里的公开所描述的各种示例性逻辑块、模块和电路可以利用被设计成用于执行这里所述功能的下列部件来实现或执行：通用处理器、数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)或其它可编程逻辑器件、分立门或晶体管逻辑、分立的硬件组件或者这些部件的任何组合。通用处理器可以是微处理器，但是可替换地，处理器可以是任何传统处理器、控制器、微控制器或状态机。处理器也可以被实现为计算设备的组合，例如，DSP和微处理器的组合、多个微处理器、一个或多个微处理器结合DSP核、或任何其它这种配置。

结合这里的公开所描述的方法或算法的步骤可以直接包含在硬件中、由处理器执行的软件模块中或这两者的组合中。软件模块可以驻留在RAM存储器、快闪存储器、ROM存储器、EPROM存储器、EEPROM存储器、寄存器、硬盘、可移动盘、CD-ROM、或本领域已知的任何其它形式的存储介质中。示例性的存储介质被耦合到处理器，使得处理器能够从该存储介质中读取信息或向该存储介质写入信息。在一个替换方案中，所述存储介质可以与处理器集成在一起。处理器和存储介质可以驻留在ASIC中。ASIC可以驻留在用户终端中。在一个替换方案中，处理器和存储介质可以作为分立组件驻留在用户终端中。

在一个或多个示例性设计中，所述功能可以在硬件、软件、固件或其任意组合中实现。如果在软件中实现，则可以将所述功能作为一个或多个指令或代码存储在计算机可读介质上或通过计算机可读介质来传送。计算机可读介质包括计算机存储介质和通信介质，该通信介质包括有助于将计算机程序从一个位置传送到另一个位置的任何介质。存储介质可以是能够被通用或专用计算机访问的任何可用介质。作为例子而非限制性的，该计算机可读介质可以包括RAM、ROM、EEPROM、CD-ROM或其它光盘存储设备、磁盘存储设备或其它磁性存储设备，或者是可以用于携带或存储形式为指令或数据结构的所需程序代码并且能够被通用或专用计算机或者通用或专用处理器访问的任何其它介质。此外，任何连接都可以适当地称为计算机可读介质。例如，如果使用同轴线缆、光纤线缆、双绞线、数字用户线路(DSL)或诸如红外线、无线电和微波的无线技术来从网站、服务器或其它远程源发送软件，则上述同轴线缆、光纤线缆、双绞线、DSL或诸如红外先、无线电和微波的无线技术均包括在介质的定义。如这里所使用的，磁盘和光盘包括压缩盘(CD)、激光盘、光盘、数字多功能盘(DVD)、软盘、蓝光盘，其中磁盘通常磁性地再现数据，而光盘利用激光光学地再现数据。上述内容的组合也应当包括在计算机可读介质的范围内。

尽管前面公开的内容示出了本公开的示例性实施例，但是应当注意，在不背离权利要求限定的本公开的范围的前提下，可以进行多种改变和修改。根据这里描述的公开实施例的方法权利要求的功能、步骤和/或动作不需以任何特定顺序执行。此外，尽管本公开的元素可以以个体形式描述或要求，但是也可以设想多个，除非明确限制为单数。

以上所述的具体实施方式，对本公开的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本公开的具体实施方式而已，并不用于限定本公开的保护范围，凡在本公开的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本公开的保护范围之内。

Claims (12)

1.一种图片显示方法，其特征在于，所述方法包括：

接收对显示焦点的移动操作；

检测所述移动操作的起始点是否处于被显示的图片所属的显示框内；

若检测结果为所述移动操作的起始点处于所述显示框内，则根据所述图片的尺寸、所述显示框的尺寸以及所述显示焦点的位移矢量移动所述图片；

显示移动后的所述图片处于所述显示框内的部分。

2.根据权利要求1所述的方法，其特征在于，所述显示焦点的位移矢量包括水平方向位移矢量和垂直方向位移矢量；

所述根据所述图片的尺寸、所述显示框的尺寸以及所述显示焦点的位移矢量移动所述图片，包括：

若所述图片的宽度大于所述显示框的宽度，且所述图片的高度不大于所述显示框的高度，则根据所述水平方向位移矢量移动所述图片；

若所述图片的宽度不大于所述显示框的宽度，且所述图片的高度大于所述显示框的高度，则根据所述垂直方向位移矢量移动所述图片；

若所述图片的宽度大于所述显示框的宽度，且所述图片的高度大于所述显示框的高度，则根据所述水平方向位移矢量和所述垂直方向位移矢量移动所述图片。

3.根据权利要求2所述的方法，其特征在于，所述若所述图片的宽度大于所述显示框的宽度，所述图片的高度不大于所述显示框的高度，则根据所述水平方向位移矢量移动所述图片，包括：

设所述图片是宽度为2x，高度为2y的图片，所述显示框是宽度为2X，高度为2Y的矩形显示框，所述水平方向位移矢量对应的移动距离为a，其中，a≥0，x、y、X、Y均为正数；

若x＞X，y≤Y，则将所述图片沿与所述水平方向位移矢量相同或相反的方向移动S_x，

$S_x=\left\{\begin{array}{cc}\frac{a(x-X)}{X}& (0\≤a\≤X)\\ x-X& (a>X)\end{array}\right..$

4.根据权利要求2所述的方法，其特征在于，所述若所述图片的宽度不大于所述显示框的宽度，所述图片的高度大于所述显示框的高度，则根据所述垂直方向位移矢量移动所述图片，包括：

设所述图片是宽度为2x，高度为2y的图片，所述显示框是宽度为2X，高度为2Y的矩形显示框，所述垂直方向位移矢量对应的移动距离为b，b≥0，x、y、X、Y均为正数；

若x≤X，y＞Y，则将所述图片沿与所述垂直方向位移矢量相同或相反的方向移动S_y，

$S_y=\left\{\begin{array}{cc}\frac{(y-Y)}{Y}& (0\≤b\≤Y)\\ y-Y& (b>Y)\end{array}\right..$

5.根据权利要求2所述的方法，其特征在于，所述若所述图片的宽度大于所述显示框的宽度，所述图片的高度大于所述显示框的高度，则根据所述水平方向位移矢量和所述垂直方向位移矢量移动所述图片，包括：

设所述图片是宽度为2x，高度为2y的图片，所述显示框是宽度为2X，高度为2Y的矩形显示框，所述水平方向位移矢量对应的移动距离为a，所述垂直方向位移矢量对应的移动距离为b，a≥0，b≥0，x、y、X、Y均为正数；

若x＞X，y＞Y，则将所述图片沿与所述水平方向位移矢量相同的方向移动S_x，同时将所述图片沿与所述垂直方向位移矢量相同的方向移动S_x；

或者，

若x＞X，y＞Y，则将所述图片沿与所述水平方向位移矢量相反的方向移动S_x，同时将所述图片沿与所述垂直方向位移矢量相反的方向移动S_x；

$S_x=\left\{\begin{array}{cc}\frac{a(x-X)}{X}& (0\≤a\≤X)\\ x-X& (a>X)\end{array}\right.,S_y=\left\{\begin{array}{cc}\frac{(y-Y)}{Y}& (0\≤b\≤Y)\\ y-Y& (b>Y)\end{array}\right..$

6.根据权利要求2所述的方法，其特征在于，

若所述图片的宽度小于所述显示框的宽度，所述图片的高度小于所述显示框的高度，则保持所述图片在所述显示框内的位置不变。

7.根据权利要求1所述的方法，其特征在于，所述方法还包括：

在初始时刻时，将所述图片居中显示于所述显示框内。

8.一种图片显示装置，其特征在于，所述装置包括：

操作接收模块，用于接收对显示焦点的移动操作；

检测模块，用于检测所述移动操作的起始点是否处于被显示的图片所属的显示框内；

图片移动模块，用于若所述检测模块的检测结果为所述移动操作的起始点处于所述显示框内，则根据所述图片的尺寸、所述显示框的尺寸以及所述显示焦点的位移矢量移动所述图片；

第一显示模块，用于显示移动后的所述图片处于所述显示框内的部分。

9.根据权利要求8所述的装置，其特征在于，所述图片移动模块，包括：

第一移动单元，用于当所述图片的宽度大于所述显示框的宽度，所述图片的高度不大于所述显示框的高度时，根据水平方向位移矢量移动所述图片；

第二移动单元，用于当所述图片的宽度不大于所述显示框的宽度，所述图片的高度大于所述显示框的高度时，根据垂直方向位移矢量移动所述图片；

第三移动单元，用于当所述图片的宽度大于所述显示框的宽度，所述图片的高度大于所述显示框的高度时，根据水平方向位移矢量和垂直方向位移矢量移动所述图片；

其中，所述显示焦点的位移矢量包括水平方向位移矢量和垂直方向位移矢量。

10.根据权利要求9所述的装置，其特征在于，所述图片移动模块还包括：

位置保持单元，用于当所述图片的宽度小于所述显示框的宽度，所述图片的高度小于所述显示框的高度时，保持所述图片在所述显示框内的位置不变。

11.根据权利要求8所述的装置，其特征在于，所述装置还包括：

第二显示模块，用于在初始时刻时，将所述图片居中显示于所述显示框内。

12.一种电子设备，其特征在于，所述电子设备包括：

一个或多个处理器；

存储器；和

一个或多个模块，所述一个或多个模块存储于所述存储器中并被配置成由所述一个或多个处理器执行，所述一个或多个模块具有如下功能：

接收对显示焦点的移动操作；

检测所述移动操作的起始点是否处于被显示的图片所属的显示框内；

若检测结果为所述移动操作的起始点处于所述显示框内，则根据所述图片的尺寸、所述显示框的尺寸以及所述显示焦点的位移矢量移动所述图片；

显示移动后的所述图片处于所述显示框内的部分。

Images