CN108399041B - 图片显示方法、装置、计算设备及存储介质 - Google Patents

Abstract

本发明公开了一种图片显示方法、装置、计算设备及存储介质。在屏幕上的图片显示控件中显示图片的部分。响应于图片显示控件监听到自身位置发生变化，改变图片在图片显示控件中的显示范围。该方案可以简便通用地实现图片视差效果。

Description

图片显示方法、装置、计算设备及存储介质

技术领域

本发明涉及显示技术领域，尤其涉及一种图片显示方法、装置、计算设备及存储介质。

背景技术

目前各APP中图片显示的模式同质化日趋严重，大都是在屏幕中静态显示某个图片，当列表滚动时就跟随滚动。为了从视觉感官上吸引用户，图片的视差效果应运而生。

视差效果是指页面内的元素在屏幕滚动时发生位置相对变化，形成立体的运动效果，让单调的图片显示变得高大上起来，能够从感官上改善整个APP的体验。

现有屏幕上页面内容往往是通过各种列表的形式来布置的。对于列表中各元素的控制需要通过列表控件来进行。这样，要在屏幕上实现视差效果，就需要调用相应的列表控件来获取相应参数，进行相应控制。

然而，目前已有安卓(android)、iOS等不同的系统平台，列表控件则有ListView、RecyclerView、Scrollview等多种。因此，为实现视差效果，就需要针对相应的系统平台、相应的列表控件相应进行编程设计。实现方案不具有通用性，相对繁琐。

因此，仍然需要一种能够简便地实现屏幕上视差效果的图片显示方案。

发明内容

本发明提供一种能够实现图片视差效果图片显示方法、装置、计算设备及存储介质，其对于不同的系统平台、不同列表控件具有通用性。

根据本发明的一个方面，提供了一种图片显示方法，包括：在屏幕上的图片显示控件中显示图片的部分；响应于图片显示控件监听到自身位置发生变化，改变图片在图片显示控件中的显示范围。

这样图片显示控件的滚动可以完全与列表的滚动解耦，能够为开发者省去大部分与滚动列表的适配处理，开发者不用关心图片显示控件是怎样布局到页面中的。只需提供显示图片的控件，通过上述方法就可以实现图片的视差效果。

可选地，基于图片显示控件的尺寸，确定显示范围的尺寸。

可选地，基于图片显示控件在屏幕上变化后的位置，重新确定显示范围。

可选地，响应于图片显示控件沿第一方向移动，在图片上沿第一方向或与第一方向相反的第二方向移动显示范围。

可选地，该方法还包括：由图片显示控件获取其自身在屏幕上的位置；基于图片显示控件在屏幕上的位置，确定图片在图片显示控件中的显示范围。

可选地，将图片显示控件的剪裁模式设置为居中剪裁；基于图片显示控件在屏幕上的位置，计算图片的中心相对于图片显示控件中心的偏移量；以及基于偏移量，确定显示范围。

可选地，该方法还包括：由图片显示控件获取图片的尺寸；基于图片的尺寸以及图片显示控件的尺寸，计算图片的中心相对于图片显示控件中心的最大偏移量。其中，计算图片的中心相对于图片显示控件中心的偏移量的步骤包括：基于图片显示控件在屏幕上的位置、最大偏移量以及屏幕上为图片显示控件设定的移动范围，计算偏移量，使得偏移量不大于最大偏移量，且在显示控件移出屏幕上为图片显示控件设定的移动范围之前，显示范围不超出图片。

可选地，以列表形式呈现页面内容；将图片显示控件作为元素设置在列表中，其中，图片显示控件在屏幕上的位置随列表滚动而同步移动。

根据本发明的另一个方面，提供一种图片显示装置，包括：显示模块和响应模块。显示模块可以在屏幕上的图片显示控件中显示图片的部分。响应模块可以响应于图片显示控件监听到自身位置发生变化，改变图片在图片显示控件中的显示范围。

可选地，该装置还包括：位置获取模块和确定模块。位置获取模块可以由图片显示控件获取其自身在屏幕上的位置。确定模块可以基于图片显示控件在屏幕上的位置，确定图片在图片显示控件中的显示范围。

可选地，确定模块包括：设置单元、偏移量计算单元和确定单元。设置单元可以将图片显示控件的剪裁模式设置为居中剪裁。偏移量计算单元可以基于图片显示控件在屏幕上的位置，计算图片的中心相对于图片显示控件中心的偏移量。确定单元可以基于偏移量计算单元计算的偏移量，确定显示范围。

可选地，该装置还包括：尺寸获取模块和计算模块。尺寸获取模块可以由图片显示控件获取图片的尺寸。计算模块可以基于图片的尺寸以及图片显示控件的尺寸，计算图片的中心相对于图片显示控件中心的最大偏移量。偏移量计算单元基于图片显示控件在屏幕上的位置、最大偏移量以及屏幕上为图片显示控件设定的移动范围，计算偏移量，使得偏移量不大于最大偏移量，且在所述显示控件移出所述屏幕上为图片显示控件设定的移动范围之前，所述显示范围不超出所述图片。

根据本发明另一个方面，提供了一种计算设备，包括：处理器；以及存储器，其上存储有可执行代码，当可执行代码被处理器执行时，使处理器执行上述的图片显示方法。

根据本发明另一个方面，提供一种非暂时性机器可读存储介质，其上存储有可执行代码，当可执行代码被电子设备的处理器执行时，使处理器执行上述的图片显示方法。

通过上述方案，可以简便通用地实现图片的视差显示效果。

附图说明

通过结合附图对本公开示例性实施方式进行更详细的描述，本公开的上述以及其它目的、特征和优势将变得更加明显，其中，在本公开示例性实施方式中，相同的参考标号通常代表相同部件。

图1示出了根据本发明一实施例的图片显示方法的示意性流程图。

图2示出了根据本发明一实施例的图片显示控件在屏幕中位置的示意性坐标图。

图3示出了根据本发明一实施例的图片显示装置的示意性结构框图。

图4示出了根据本发明另一实施例的图片显示装置的示意性结构框图。

图5示出了根据本发明一个实施例的确定模块的示意性结构框图。

图6示出了根据本发明一实施例的计算设备的示意性结构框图。

具体实施方式

下面将参照附图更详细地描述本公开的优选实施方式。虽然附图中显示了本公开的优选实施方式，然而应该理解，可以以各种形式实现本公开而不应被这里阐述的实施方式所限制。相反，提供这些实施方式是为了使本公开更加透彻和完整，并且能够将本公开的范围完整地传达给本领域的技术人员。

为了简便地实现图片的滚动视差效果，本发明提供了一种简单通用的图片视差效果算法的解决方案，该视差效果算法能通用于android、web、 ios等各平台，与各种列表控件解耦。

图1示出了根据本发明一实施例的图片显示方法的示意性流程图。

如图1所示，在步骤S100中，在屏幕上的图片显示控件中显示图片的部分。

其中，图片显示控件用于显示图片，还可以对图片进行放大、缩小、旋转等。图片可以是位图图片、JPEG图片、矢量图片等任何一种格式的图片。例如imageview是android中专门用于显示图片的图片显示控件。当以列表形式呈现页面内容时，可以将图片显示控件作为列表元素设置在列表中。图片显示控件在屏幕上的位置可以随列表的滚动而同步滚动，图片显示控件中所显示的图片随之移动。图片显示控件可以设置在任何视图列表，如ListView，RecyclerView，ScrollView等任何一种用于在有限窗口展示大量的数据集的列表控件。

一些情况下，可以通过缩放将图片调整为与图片显示控件相同的尺寸，从而在图片显示控件中显示整张图片。然而，如果图片的高宽比与图片显示控件的高宽比不同，那么图片经过缩放后的高宽比将与原来的高宽比不相符，显示效果就是图片在宽度方向或高度方向上被拉伸或压缩，与设计比例不符，可能给人以不协调的感觉。

这样，在图片的尺寸大于图片显示控件的尺寸的情况下，可以剪切图片的一部分以在图片显示控件中显示，而不显示所剪切部分之外的部分。具体说来，可以基于图片显示控件的尺寸，确定图片在图片显示控件中的显示范围(即图片在图片显示控件中所显示的那一部分的范围)的尺寸。

另一方面，可以在对图片进行等比例缩放(即保持图片高宽比不变)之后再进行剪切。缩放的比例不限，只需要缩放后的图片的高度和宽度都分别不小于图片显示控件的高度和宽度。例如，可以由用户自行设定缩放比例。或者，也可以将图片等比例缩放为高度和宽度中的一个尺寸与图片显示控件的相应尺寸相同，而另一个尺寸大于图片显示控件的相应尺寸。这样，可以在不在图片显示控件中出现空白区域的情况下，显示图片尽可能多的内容。

另外，在屏幕显示内容被设置为仅能随列表在一个方向(例如高度方向)上的滚动而移动的情况下，用于显示的图片(例如缩放后的图片的高度) 的高度可以大于显示控件的高度。当期望通过缩放使图片另一个方向(例如宽度方向)上的尺寸(宽度)与图片显示控件的相应尺寸(宽度)相同时，可以选择高宽比大于图片显示控件的高宽比的图片。例如，如果图片显示控件的尺寸是300像素(高度)×500像素(宽度)，那么，可以选择高宽比大于 3:5的图片，例如800像素(高度)×1000像素(宽度)的图片，高宽比为4:5。可以将该图片等比例缩放为400像素(高度)×500像素(宽度)。这样，缩放后的图片的宽度与图片显示控件的宽度相同，可以完整显示。缩放后的图片的高度大于图片显示控件的高度，可以截取其中300像素(高度)×500像素(宽度)的一部分以在图片显示控件中显示。

这样，图片所显示的部分的尺寸与图片显示控件的尺寸相同，图片所显示的部分看起来和图片显示控件一样大。而且，所显示部分是图片被等比例缩放后截取的，不会使用户感觉图片在某个方向上被拉伸或压缩，而是同比例显示。

上面针对图片被显示的部分的尺寸进行了描述。而图片在图片显示控件中的具体的显示范围(或者说所要显示的部分在图片上的具体位置)可以基于图片显示控件在屏幕上的位置来确定。

图片显示控件在屏幕上的位置可以由图片显示控件自身来获取。例如，可以通过图片显示控件的位置属性(例如mImageLocation)来获取图片显示控件自身在屏幕上的位置。这里，不通过列表控件来获取图片显示控件在屏幕上的位置，进一步实现了与列表控件和系统平台的解耦。

一般而言，特别是对于手机这样的移动设备，更多的滚动操作是上下滚动的。下面以屏幕显示内容，或者说列表视图，上下滚动的情形为例，针对图片显示控件和图片在屏幕高度(上下)方向上的定位及移动进行描述。应当明白，对于左右滚动的情形，图片显示控件和图片在屏幕宽度(左右) 方向上的定位及移动的原理是相同的。

当图片显示控件位于屏幕的中部时，剪裁图片的中部进行显示。当图片显示控件位于屏幕上为图片显示控件设定的移动范围的上部时，可以剪裁图片的下部进行显示。极端地，当图片显示控件接近其移动范围的最上部时(一些实施例中，图片显示控件的上部大部分已经不再显示)，可以剪裁图片的接近最下部分进行显示，以便在图片显示控件的下部显示图片的接近最下部分。当图片显示控件位于屏幕上图片显示控件的移动范围的下部时，剪裁图片的上部进行显示。极端地，当图片显示控件接近其移动范围的最下部时(一些实施例中，图片显示控件的下部大部分已经不再显示)，可以剪裁图片的接近最上部分进行显示，以便在图片显示控件的上部显示图片的接近最上部分。

或者，也可以相反。当图片显示控件位于屏幕上为图片显示控件设定的移动范围的上部时，可以剪裁图片的上部进行显示。极端地，当图片显示控件接近其移动范围的最上部时，可以剪裁图片的最上部分进行显示。当图片显示控件位于屏幕上图片显示控件的移动范围的下部时，剪裁图片的下部进行显示。极端地，当图片显示控件接近其移动范围的最下部时，可以剪裁图片的最下部分进行显示。这种情况下，优选设置图片显示控件在其移动范围内图片总是完整可见的。

下文中，以图片显示控件向上移动时，图片显示范围向下移动的情形为例进行描述。应当理解，相反的情形只需要改变偏移量的正负号即可。

图片显示范围的设置方式可以如下。

首先，可以将图片显示控件的剪裁模式设置为居中剪裁。

在ImageView中可以设置不同的scaleType(剪裁模式)，即设置所显示的图片如何缩放或移动以适应ImageView的大小。剪裁模式可选设置项包括：fitXY(横向、纵向独立缩放以适应该ImageView)、center(把图片放在ImageView的中央，但是不进行任何缩放)、centerCrop(保持纵横比缩放图片以使图片能完全覆盖ImageView)、centerInside(保持纵横比缩放图片以使得ImageView能完全显示该图片)等。

其中centercrop是居中剪裁，首先将图片进行缩放，使得缩放后的图像能够完全覆盖图片显示控件，然后将缩放后的图片放置在图片显示控件中心位置，或者说，使图片中心与图片显示控件的中心重叠，图片显示控件截取图片中心部位的部分显示。

在本公开的技术方案中，可以设置imageview剪裁模式为居中剪裁“centercrop”，在android平台中的设置方式可以是“android:scaleType＝"centerCrop"”。按比例缩放图片的尺寸并居中显示，使得图片显示范围的尺寸不小于图片显示控件的尺寸。

然后，基于图片显示控件在屏幕上的位置，计算图片的中心相对于图片显示控件中心的偏移量，即图片中心相对于图片显示范围中心的偏移量。例如，居中剪裁的情况下，可以认为，例如图片的中心与图片显示控件的中心重叠，换言之，图片显示范围在图片的中心处。而为了使得图片随着图片显示控件在屏幕上的移动而相对于图片显示控件进行的移动较为均匀，图片显示控件的位置不在屏幕上其移动范围的中心位置时，可以相应按比例调整图片相对于图片显示控件的位置，换言之，调整图片显示范围在图片上的位置。这个位置调整量即为上述偏移量。

这样，就可以基于偏移量，确定实际的显示范围了。其中，偏移量可以通过下述公式计算(以上下偏移量为例)：

transY＝(2*maxY*y+maxY*(vHeight-dHeight))/(vHeight+dHeight)

其中，transY为图片的中心相对于图片显示控件中心的上下偏移量， y为图片显示控件的纵坐标，maxY为图片的中心相对于图片显示控件中心的最大的上下偏移量，vHeight为图片显示控件的高度，dHeight为屏幕上图片显示控件的移动范围的高度(当图片显示控件可以在全屏幕移动时， dHeight为屏幕高度)。由公式可以看出偏移量transY是以y为变量线性变化的。

如果以上述移动范围的上边沿作为y坐标0点，从上向下为y轴正方向，那么图片显示控件上边沿的y坐标范围为从-vHeight(图片显示控件向上移出上述移动范围)到dHeight(图片显示控件向下移出上述移动范围)。当y＝-vHeight时，transY＝-maxY。而当y＝dHeight时，transY＝maxY。下文中将进一步描述最大偏移量maxY的计算方式。

可以通过“imageView.getLocationInWindow(mImageLocation)”来实时获取图片显示控件的坐标(x,y)，其中mImageLocation是二维数组，即x＝mImageLocation[0]表示x坐标，y＝mImageLocation[1]，表示y坐标。

可以由图片显示控件获取图片显示控件的高度以及屏幕的高度。

例如，通过“imageView.getHeight()”获取图片显示控件的高度vHeight。通过“imageView.getResources().getDisplayMetrics().heightPixels”获取屏幕的高度dHeight。

还可以由图片显示控件获取图片的高度。

例如，通过“imageView.getDrawable().getIntrinsicHeight()”来获取图片的高度iHeight。

由于以上参数(图片的尺寸、图片显示控件的尺寸、屏幕的尺寸、图片显示控件在屏幕上的位置)的获取都是由图片显示控件来完成，这样可以减少配置信息，简化算法的程序。

可以基于图片的尺寸以及图片显示控件的尺寸，计算图片的中心相对于图片显示控件中心的最大偏移量。以上下偏移为例，可以基于图片的高度和图片显示控件的高度，计算最大的上下偏移量(maxY)。

可以通过下述公式计算图片的中心相对于图片显示控件中心的最大上下偏移量maxY：

maxY＝Math.abs(iHeight-vHeight)/2

即图片高度与图片显示控件高度差的一半。当y＝-vHeight时， transY＝-maxY，图片显示控件中显示图片最上部的部分。而当y＝dHeight时，transY＝maxY，图片显示控件中显示图片最下部的部分。在图片显示控件的移动范围内，图片在图片显示控件中的显示范围均不会超出图片显示控件，即图片显示控件中不会出现空白区域。

以上描述是基于android平台中上下滚动时实现视差效果为例进行的阐述，对于左右滚动的情形同样适用。

由此，可以基于图片显示控件在屏幕上的位置、最大偏移量以及屏幕上为图片显示控件设定的移动范围，计算图片显示控件在屏幕上任一位置处图片的中心相对于图片显示控件中心的偏移量。

图2示出了根据本发明一实施例的图片显示控件在屏幕中位置的示意性坐标图。如图2所示，图片显示控件200在屏幕210中移动范围最上方的坐标为-vHeight，在屏幕210中移动范围最下方的坐标为dHeight。

当y＝-vHeight时，代入上述计算偏移量的公式中，可以计算出此时的 transY＝-maxY。当y＝dHeight时，代入上述计算偏移量的公式中，可以计算出此时的transY＝maxY。这样可以使偏移量始终在[-maxY,maxY]范围内移动。

上面描述了基于图片显示控件在屏幕上的位置来确定图片在图片显示控件中的显示范围。在初始显示屏幕内容中存在图片显示控件时，可以这样确定其中的图片显示范围。另外，随着视图列表滚动，图片显示控件的位置发生变化后，也可以这样来实时动态确定图片显示控件中显示的图片的显示范围。

返回图1，在步骤S200中，响应于图片显示控件监听到自身位置发生变化，改变图片在图片显示控件中的显示范围。

例如，图片显示控件imageView可以通过“imageView.getViewTreeObserver().addOnScrollChangedListener(this)”来监听自身的滚动，这完全和列表滚动解耦，开发者不必关心是何种列表。当发生滚动时，会回调“onScrollChanged()”方法，在此时通过系统“api: invalidate()”手动触发ImageView重绘制。

图片显示控件触发重绘制后，可以回调系统方法“onDraw(Canvas cavas)”，基于获取到的上下偏移量transY，动态调整ImageView内部的 canvas移动，即canvas.translate(0,transY)。其中，canvas用于重新绘制图片，translate()可以将坐标原点进行上下左右移动，它影响的是在绘制图片的时候所参考的“当前坐标系”。这样使得图片显示范围相对于居中剪裁设置的偏移量始终在设置的最大偏移量[-maxY,maxY]范围内移动，在图片显示控件移出屏幕上为图片显示控件设定的移动范围之前，显示范围不超出图片。

可以基于图片显示控件在屏幕上变化后的位置，按上面描述的相同方式重新确定显示范围。

例如，响应于图片显示控件沿第一方向移动，在图片上沿第一方向或与第一方向相反的第二方向移动所述显示范围。

在图片显示控件在屏幕的中部移动时，图片显示范围移动的方向与图片显示控件的方向一致，当图片显示控件移动到屏幕上移动范围的边缘位置(例如最上部或最下部)时，图片显示范围移动的方向可以与图片显示控件的移动方向相反。这样在视觉上就形成视差效果，使图片显示不再单调。

图3示出了根据本发明一实施例的图片显示装置的示意性结构框图。以下所描述的装置各模块所执行的内容均可参考上述对应的方法描述，在此不一一赘述。

如图3所示，该图片显示装置300可以包括显示模块310和响应模块 320。

显示模块310可以在屏幕上的图片显示控件中显示图片的部分。

响应模块320可以响应于图片显示控件监听到自身位置发生变化，改变图片在图片显示控件中的显示范围。

通过该装置可以与列表的滚动解耦，当图片显示控件监听到自身发生滚动时，图片被剪裁的区域实时发生变化，这样相对于图片显示控件的移动，就产生了图片的视差效果。

图4示出了根据本发明另一实施例的图片显示装置的示意性结构框图。如图4所示，除显示模块310和响应模块320外，该图片显示装置300还可以包括：位置获取模块330和确定模块340。

位置获取模块330可以由图片显示控件获取其自身在屏幕上的位置。

确定模块340可以基于图片显示控件在屏幕上的位置，确定图片在图片显示控件中的显示范围。

图5示出了根据本发明一个实施例的确定模块的示意性结构框图。如图5所示，确定模块340可以包括：设置单元341、偏移量计算单元342 和确定单元343。

设置单元341可以将图片显示控件的剪裁模式设置为居中剪裁。

偏移量计算单元342可以基于图片显示控件在屏幕上的位置，计算图片的中心相对于图片显示控件中心的偏移量。

确定单元343基于偏移量，确定显示范围。

参见图4，该图片显示装置300还可以包括：尺寸获取模块350和计算模块360。

尺寸获取模块350可以由图片显示控件获取图片的尺寸。

计算模块360可以基于图片的尺寸以及图片显示控件的尺寸，计算图片的中心相对于图片显示控件中心的最大偏移量。

其中，偏移量计算单元341可以基于图片显示控件在屏幕上的位置、最大偏移量以及屏幕上为图片显示控件设定的移动范围，计算偏移量，使得实时偏移量不大于最大偏移量，且在所述显示控件移出所述屏幕上为图片显示控件设定的移动范围之前，所述显示范围不超出所述图片。

通过上述装置，图片的尺寸、图片显示控件的尺寸、屏幕的尺寸以及图片显示控件在屏幕上的位置，都可以由图片显示控件来获取，能够简化算法程序。如上所述，由于通过图片显示控件(ImageView)来采集各种参数，完全与视图列表(View)自身的滚动解耦，不需要通过列表实例来实现滚动监听。算法通用，能够轻松实现视差效果，适用于任何平台。

相应地，本公开实施例的图片视差显示控制方案具有通用性，即对所有可滚动的View，包含ListView、RecyclerView、ScrollView等都通用。

相应地，本公开实施例的图片视差显示控制方案具有高移植性，开发者可以一键接入，一处获取代码，随时可用，接入成本低。开发者不用关心图片显示控件(ImageView)到底被怎么布局到页面。开发者集成简单，完全和普通使用图片显示控件(ImageView)一样，无需多余操作。

而且，本公开实施例的图片视差显示控制方案具有较高的流畅度，加入Parallax效果后不影响页面滚动的流畅度，不引起卡顿。

另外，本公开实施例的偏移量算法能够简便地确保在视图列表滚动过程中，图片显示范围不会超出图片本身，换言之，图片显示控件中不会留下空白。

图6示出了根据本发明一个实施例的计算设备600的示意性结构框图。其中，计算设备600可以是各种类型的计算机装置，例如台式机、便携式计算机、平板电脑、智能手机、个人数据助理(PDA)，或者其他类型的计算机装置，但是不限于任何特定形式。

如图6所示，本发明的计算设备600可以包括处理器610以及存储器 620。处理器610可以是一个多核的处理器，也可以包含多个处理器。在一些实施例中，处理器610可以包含一个通用的主处理器以及一个或多个特殊的协处理器，例如图形处理器(GPU)、数字信号处理器(DSP)等等。在一些实施例中，处理器610可以使用定制的电路实现，例如特定用途集成电路(ASIC，Application Specific Integrated Circuit)或者现场可编程逻辑门阵列(FPGA，Field Programmable Gate Arrays)。

存储器620可以包括各种类型的存储单元，例如系统内存、只读存储器(ROM)，和永久存储装置。其中，ROM可以存储处理器610或者计算机的其他模块需要的静态数据或者指令。永久存储装置可以是可读写的存储装置。永久存储装置可以是即使计算机断电后也不会失去存储的指令和数据的非易失性存储设备。在一些实施方式中，永久性存储装置采用大容量存储装置(例如磁或光盘、闪存)作为永久存储装置。另外一些实施方式中，永久性存储装置可以是可移除的存储设备(例如软盘、光驱)。系统内存可以是可读写存储设备或者易失性可读写存储设备，例如动态随机访问内存。系统内存可以存储一些或者所有处理器在运行时需要的指令和数据。此外，存储器620可以包括任意计算机可读存储媒介的组合，包括各种类型的半导体存储芯片(DRAM，SRAM，SDRAM，闪存，可编程只读存储器)，磁盘和/或光盘也可以采用。在一些实施方式中，存储器 4620可以包括可读和/或写的可移除的存储设备，例如激光唱片(CD)、只读数字多功能光盘(例如DVD-ROM，双层DVD-ROM)、只读蓝光光盘、超密度光盘、闪存卡(例如SD卡、min SD卡、Micro-SD卡等等)、磁性软盘等等。计算机可读存储媒介不包含载波和通过无线或有线传输的瞬间电子信号。

在本发明实施例中，存储器620上存储有可执行代码，处理器610可以执行存储在存储器620上的可执行代码。当可执行代码被处理器610执行时，可以使处理器610执行本发明的图片视差显示的方案。其中，存储器620上除了存储可执行代码，还可以存储处理器610在执行本发明的图片视差显示的方案过程中所需的部分或所有数据。

上文中已经参考附图详细描述了根据本发明的图片显示方法和装置。通过上述方案，可以简便通用地实现图片的视差效果，各参数的获取都可以由图片显示控件来完成。图片显示控件通过监听自身的滚动改变图片的显示范围，而不必通过列表获取滚动监听，为开发者省去了对大部分滚动列表的适配处理。且该视差效果流畅性好不会引起页面的卡顿。

此外，根据本发明的方法还可以实现为一种计算机程序或计算机程序产品，该计算机程序或计算机程序产品包括用于执行本发明的上述方法中限定的上述各步骤的计算机程序代码指令。

或者，本发明还可以实施为一种非暂时性机器可读存储介质(或计算机可读存储介质、或机器可读存储介质)，其上存储有可执行代码(或计算机程序、或计算机指令代码)，当所述可执行代码(或计算机程序、或计算机指令代码)被电子设备(或计算设备、服务器等)的处理器执行时，使所述处理器执行根据本发明的上述方法的各个步骤。

本领域技术人员还将明白的是，结合这里的公开所描述的各种示例性逻辑块、模块、电路和算法步骤可以被实现为电子硬件、计算机软件或两者的组合。

附图中的流程图和框图显示了根据本发明的多个实施例的系统和方法的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标记的功能也可以以不同于附图中所标记的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

以上已经描述了本发明的各实施例，上述说明是示例性的，并非穷尽性的，并且也不限于所披露的各实施例。在不偏离所说明的各实施例的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。本文中所用术语的选择，旨在最好地解释各实施例的原理、实际应用或对市场中的技术的改进，或者使本技术领域的其它普通技术人员能理解本文披露的各实施例。

Claims (14)

1.一种图片显示方法，包括：

在屏幕上的图片显示控件中显示图片的部分；以及

响应于图片显示控件监听到自身在屏幕上的位置发生变化，改变所述图片在所述图片显示控件中的显示范围。

2.根据权利要求1所述的方法，其中，所述在屏幕上的图片显示控件中显示图片的部分的步骤包括：

基于所述图片显示控件的尺寸，确定所述显示范围的尺寸。

3.根据权利要求1所述的方法，还包括：

由所述图片显示控件获取其自身在屏幕上的位置；以及

基于所述图片显示控件在屏幕上的位置，确定图片在所述图片显示控件中的显示范围。

4.根据权利要求3所述的方法，其中，所述基于所述图片显示控件在屏幕上的位置确定图片在所述图片显示控件中的显示范围的步骤包括：

将所述图片显示控件的剪裁模式设置为居中剪裁；

基于所述图片显示控件在屏幕上的位置，计算所述图片的中心相对于图片显示控件中心的偏移量；以及

基于所述偏移量，确定所述显示范围。

5.根据权利要求4所述的方法，其中，所述响应于图片显示控件监听到自身位置发生变化改变所述图片在所述图片显示控件中的显示范围的步骤包括：

基于所述图片显示控件在屏幕上变化后的位置，重新确定所述显示范围。

6.根据权利要求5所述的方法，其中，

响应于所述图片显示控件沿第一方向移动，在所述图片上沿第一方向或与第一方向相反的第二方向移动所述显示范围。

7.根据权利要求5所述的方法，还包括：

由所述图片显示控件获取所述图片的尺寸；以及

基于所述图片的尺寸以及图片显示控件的尺寸，计算所述图片的中心相对于图片显示控件中心的最大偏移量，

其中，所述计算图片的中心相对于图片显示控件中心的偏移量的步骤包括：

基于所述图片显示控件在屏幕上的位置、所述最大偏移量以及所述屏幕上为图片显示控件设定的移动范围，计算所述偏移量，使得所述偏移量不大于所述最大偏移量，且在所述显示控件移出所述屏幕上为图片显示控件设定的移动范围之前，所述显示范围不超出所述图片。

8.根据权利要求1-7中任何一项所述的方法，还包括：

以列表形式呈现页面内容；以及

将所述图片显示控件作为元素设置在所述列表中，

其中，所述图片显示控件在屏幕上的位置随列表滚动而同步移动。

9.一种图片显示装置，包括：

显示模块，用于在屏幕上的图片显示控件中显示图片的部分；以及

响应模块，用于响应于图片显示控件监听到自身在屏幕上的位置发生变化，改变所述图片在所述图片显示控件中的显示范围。

10.根据权利要求9所述的装置，还包括：

位置获取模块，用于由所述图片显示控件获取其自身在屏幕上的位置；以及

确定模块，用于基于所述图片显示控件在屏幕上的位置，确定图片在所述图片显示控件中的显示范围。

11.根据权利要求10所述的装置，其中，所述确定模块包括：

设置单元，用于将所述图片显示控件的剪裁模式设置为居中剪裁；

偏移量计算单元，用于基于所述图片显示控件在屏幕上的位置，计算所述图片的中心相对于图片显示控件中心的偏移量；以及

确定单元，用于基于所述偏移量计算单元计算的偏移量，确定所述显示范围。

12.根据权利要求11所述的装置，还包括：

尺寸获取模块，用于由所述图片显示控件获取所述图片的尺寸；以及

计算模块，用于基于所述图片的尺寸以及图片显示控件的尺寸，计算所述图片的中心相对于图片显示控件中心的最大偏移量，其中，

所述偏移量计算单元基于所述图片显示控件在屏幕上的位置、所述最大偏移量以及所述屏幕上为图片显示控件设定的移动范围，计算所述偏移量，使得所述偏移量不大于所述最大偏移量，且在所述显示控件移出所述屏幕上为图片显示控件设定的移动范围之前，所述显示范围不超出所述图片。

13.一种计算设备，包括：

处理器；以及

存储器，其上存储有可执行代码，当所述可执行代码被所述处理器执行时，使所述处理器执行如权利要求1-8中任何一项所述的方法。

14.一种非暂时性机器可读存储介质，其上存储有可执行代码，当所述可执行代码被电子设备的处理器执行时，使所述处理器执行如权利要求1-8中任一项所述的方法。

Images