具体实施方式

以下，将参照附图来描述本公开的实施例。但是应该理解，这些描述只是示意性的，而并非要限制本公开的范围。在下面的详细描述中，为便于解释，阐述了许多具体的细节以提供对本公开实施例的全面理解。然而，明显地，一个或多个实施例在没有这些具体细节的情况下也可以被实施。此外，在以下说明中，省略了对公知结构和技术的描述，以避免不必要地混淆本公开的概念。

在此使用的术语仅仅是为了描述具体实施例，而并非意在限制本公开。在此使用的术语“包括”、“包含”等表明了所述特征、步骤、操作和/或部件的存在，但是并不排除存在或添加一个或多个其他特征、步骤、操作或部件。

在此使用的所有术语(包括技术和科学术语)具有本领域技术人员通常所理解的含义，除非另外定义。应注意，这里使用的术语应解释为具有与本说明书的上下文相一致的含义，而不应以理想化或过于刻板的方式来解释。

在使用类似于“A、B和C等中至少一个”这样的表述的情况下，一般来说应该按照本领域技术人员通常理解该表述的含义来予以解释(例如，“具有A、B和C中至少一个的系统”应包括但不限于单独具有A、单独具有B、单独具有C、具有A和B、具有A和C、具有B和C、和/或具有A、B、C的系统等)。在使用类似于“A、B或C等中至少一个”这样的表述的情况下，一般来说应该按照本领域技术人员通常理解该表述的含义来予以解释(例如，“具有A、B或C中至少一个的系统”应包括但不限于单独具有A、单独具有B、单独具有C、具有A和B、具有A和C、具有B和C、和/或具有A、B、C的系统等)。

在实现本公开构思的过程中，发明人发现相关技术中所提供的图像插件通常用于提供相应的功能，但并不提供位置更新功能。例如，pinchzoom插件用于提供图像缩放，但是pinchzoom插件并不提供位置更新功能。如果不提供位置更新功能，则设置于图像上的元素在操作过程中，也就无法实时更新位置信息。

针对在操作过程中对设置于图像上的元素的尺寸有要求的情况来说，如果无法实时获得位置信息，则无法满足实际需求。下面以图像缩放为例，对无法满足实际需求进行说明。基于pinchzoom插件实现的图像缩放，在图像缩放过程中，图像上的元素也会随之缩放。换句话说，元素的尺寸无法保持不变。针对元素为锚点来说，需要锚点在图像缩放过程中的尺寸保持不变。这是由于图像上可能设置多个锚点，锚点的作用在于可以通过点击锚点跳转到对应的指定位置，例如，某个锚点用于表征某个沙发的详情页面链接，用户通过点击该锚点可以跳转沙发的详情页面。如果锚点的尺寸随着图像缩放也缩放，则可能出现多个锚点堆积到一起不易识别的问题。而如果锚点的尺寸在图像缩放过程中保持不变，则可以避免上述问题，进而满足实际需求。如果锚点的尺寸在图像缩放过程中保持不变，则需要实时获取位置信息。

为了满足实际需求，需要实现设置于图像上的元素的位置更新。

本公开的实施例提供了一种元素位置更新、装置以及能够应用该方法的电子设备。该方法包括元素位置更新过程。在元素更新过程中，展示目标图像，其中，目标图像上设置有元素，元素具有用于表征元素在目标图像上所处位置的位置信息，在检测到操作体操作目标图像的情况下，获取操作体在目标图像上所处位置的初始位置信息和终止位置信息，根据操作体的初始位置信息和终止位置信息确定目标图像的位置变化信息，并根据位置变化信息更新元素在目标图像上的位置信息。

图1示意性示出了根据本公开实施例的可以应用元素位置更新方法的示意性系统架构100。需要注意的是，图1所示仅为可以应用本公开实施例的系统架构的示例，以帮助本领域技术人员理解本公开的技术内容，但并不意味着本公开实施例不可以用于其他设备、系统、环境或场景。

如图1所示，根据该实施例的系统架构100可以包括终端设备101、102、103，网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线和/或无线通信链路等。

用户可以使用终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等。终端设备101、102、103上可以安装有各种通讯客户端应用，例如购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端和/或社交平台软件等(仅为示例)。

终端设备101、102、103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等。

服务器105可以是提供各种服务的服务器，例如对用户利用终端设备101、102、103所浏览的网站提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的用户请求等数据进行分析等处理，并将处理结果(例如根据用户请求获取或生成的网页、信息、或数据等)反馈给终端设备。

需要说明的是，本公开实施例所提供的元素位置更新方法也可以由终端设备101、102、或103执行，或者也可以由不同于终端设备101、102、或103的其他终端设备执行。相应地，本公开实施例所提供的元素位置更新装置也可以设置于终端设备101、102、或103中，或设置于不同于终端设备101、102、或103的其他终端设备中。

例如，目标图像可以原本存储在终端设备101、102、或103中的任意一个(例如，终端设备101，但不限于此)之中，或者存储在外部存储设备上并可以导入到终端设备101中。然后，终端设备101可以在本地执行本公开实施例所提供的元素位置更新方法，或者将目标图像发送到其他终端设备、服务器、或服务器集群，并由接收该目标图像的其他终端设备、服务器、或服务器集群来执行本公开实施例所提供的元素位置更新方法。

应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

图2示意性示出了根据本公开实施例的一种元素位置更新方法的流程图。

如图2所示，该方法包括操作S210～S240。

在操作S210，展示目标图像，其中，目标图像上设置有元素，元素具有用于表征元素在目标图像上所处位置的位置信息。

在本公开的实施例中，可以展示位于页面上的目标图像。元素设置于目标图像上，元素可以包括锚点和非锚点。元素的位置信息可以表征元素在目标图像上所处的位置。图3示意性示出了根据本公开实施例的一种目标图像的示意图。

如图3所示，目标图像上设置有三个锚点，分别为锚点1、锚点2和锚点3。其中，锚点1为用于表征厅灯的详情页面链接，锚点2为用于表征全屋定制的详情页面链接，锚点3为用于表征椅子的详情页面链接。用户可以通过点击锚点进入对应的详情页面。当前用户通过点击图3中的锚点2进入图4所示的全屋定制的详情页面。图4示意性示出了根据本公开实施例的一种与锚点对应的详情页面的示意图。

在操作S220，在检测到操作体操作目标图像的情况下，获取操作体在目标图像上所处位置的初始位置信息和终止位置信息。

在本公开的实施例中，为了实现元素的位置更新，需要在检测到操作体操作目标图像的情况下，获取操作体在目标图像上的位置信息。其中，操作体可以包括手指或触控笔。操作体操作目标图像可以包括操作体对目标图像进行缩放操作或操作体对目标图像进行移动操作。

通常可以通过检测操作事件是否被触发来确定操作体是否操作目标图像。其中，如果检测到操作体在页面上形成两个按压点或一个按压点，则可以确定操作体事件被触发。其中，如果在页面上形成两个按压点，则可以确定图像缩放事件被触发，相应的，操作体操作目标图像为操作体对目标图像进行缩放操作。如果在页面上形成一个按压点，则可以确定图像移动事件被触发，相应的，操作体操作目标图像为操作体对目标图像进行移动操作。如果操作体为手指，则图像缩放事件可以由双指接触目标图像触发，图像移动事件可以由单指接触目标图像触发。

当操作体操作目标图像时，通常会形成操作轨迹，此时，可以获取操作体在操作轨迹的初始位置处的初始位置信息和终止位置处的终止位置信息。其中，初始位置通常为操作体刚接触到目标图像时对应的位置，终止位置通常为操作体离开目标图像时对应的位置。本公开实施例中的位置信息可以由坐标表征。元素的坐标是相对于目标图像来的相对坐标，而操作体的坐标为绝对坐标。

在操作S230，根据操作体的初始位置信息和终止位置信息确定目标图像的位置变化信息。

在操作S240，根据位置变化信息更新元素在目标图像上的位置信息。

在本公开的实施例中，位置变化信息可以包括距离信息。根据操作体在目标图像上的初始位置信息和操作体在目标图像上的终止位置信息，确定目标图像的位置变化信息，可以包括：根据操作体在目标图像上的初始坐标和终止坐标，确定初始坐标和终止坐标之间的距离信息，根据距离信息确定目标图像的位置变化信息。

在获得目标图像的位置变化信息后，可以根据位置变化信息和元素在目标图像上所处位置的位置信息，这里可以认为是元素在目标图像上的初始位置信息，确定元素在目标图像上所处新的位置的位置信息，即元素在目标图像上的新的位置信息。

针对操作体对目标图像进行缩放操作，操作体可以包括第一操作体和第二操作体，其中，操作体在目标图像上的初始坐标可以包括第一操作体在目标图像上的初始坐标和第二操作体在目标图像上的初始坐标，即第一操作体的初始坐标和第二操作体的初始坐标。操作体在目标图像上的终止坐标可以包括第一操作体在目标图像上的终止坐标和第二操作体在目标图像上的终止坐标，即第一操作体的终止坐标和第二操作体的终止坐标。

在检测到操作体对目标图像进行缩放操作的情况下，根据操作体在目标图像上的初始坐标和终止坐标，确定初始坐标和终止坐标之间的距离信息，可以包括：根据第一操作体的初始坐标和第二操作体的初始坐标，确定第一操作体和第二操作体之间的初始距离，根据第一操作体的终止坐标和第二操作体的终止坐标，确定第一操作体和第二操作体之间的终止距离。根据距离信息确定目标图像的位置变化信息，可以包括：将终止距离和初始距离的比值确定为目标图像的位置变化信息。由于比值可以表征图像缩放大小，在图像缩放过程中，元素相对于目标图像的相对位置也要进行对应大小的缩放，因此，可以将比值与元素在目标图像上的初始坐标相乘，得到新的坐标，将新的坐标确定为元素在目标图像上的新的位置信息。

针对操作体对目标图像进行移动操作，初始坐标可以包括初始横坐标和初始纵坐标，终止坐标可以包括终止横坐标和终止纵坐标。

在检测到操作体对目标图像进行缩放操作的情况下，根据操作体在目标图像上的初始坐标和终止坐标，确定初始坐标和终止坐标之间的距离信息，可以包括：根据初始横坐标和终止横坐标，确定操作体的横坐标变化信息，根据初始纵坐标和终止纵坐标，确定操作体的纵坐标变化信息。根据距离信息确定目标图像的位置变化信息，可以包括：将横坐标变化信息和纵坐标变化信息确定为目标图像的位置变化信息。可以根据横坐标变化信息更新元素在目标图像上的初始横坐标，得到元素在目标图像上的新的横坐标，根据纵坐标变化信息更新元素在目标图像上的初始纵坐标，得到元素在目标图像上的新的纵坐标，将新的横坐标和新的纵坐标确定为元素在目标图像上的新的位置信息。

根据本公开实施例的技术方案，通过展示目标图像，目标图像上设置有元素，元素具有用于表征元素在目标图像上所处位置的位置信息，在检测到操作体操作目标图像的情况下，获取操作体在目标图像上所处位置的初始位置信息和终止位置信息，根据操作体的初始位置信息和终止位置信息确定目标图像的位置变化信息，并根据位置变化信息更新元素在目标图像上的位置信息。由于可以获取操作体在目标图像上所处位置的初始位置信息和终止位置信息，实现了根据操作体的初始位置信息和终止位置信息确定的目标图像的位置变化信息更新元素在目标图像上的位置信息，因而，至少部分地克服了采用相关技术较难以实现设置于图像上的元素的位置更新的技术问题。此外，由于实现元素位置的更新，因此，可以应对基于元素位置的图像操作。

可选地，在上述技术方案的基础上，在根据位置变化信息更新元素在目标图像上的位置信息之后，还可以包括如下操作。

在与更新后的元素在目标图像上的位置信息对应的位置处，以与页面刷新频率相同的绘制频率绘制元素。

在本公开的实施例中，为了实现更好的用户体验，可以保证以与页面刷新频率相同的绘制频率，在元素在目标图像上的新的位置信息所对应的位置处，绘制元素。其中，页面刷新频率是指显示屏每秒能显示的帧数，也即显示屏上的图像每秒更新的次数，单位是Hz，页面刷新频率分为页面垂直刷新频率和页面水平刷新频率，一般提到的页面刷新频率通常指页面垂直刷新频率。页面刷新频率越高，传统显示屏上图像闪烁感就越小，稳定性也就越高，进而给用户的视觉体验就越好。可以理解到，页面刷新间隔＝1/页面刷新频率，即如果页面刷新频率为60Hz，则页面刷新间隔为16ms，即页面每隔16ms刷新一次。绘制频率可以理解为图像生成频率，其是图像生成装置(如显卡)每秒能渲染的帧数，单位是FPS(Frames Per Second，每秒显示帧数)。需要说明的是，绘制频率是变化的，而如果对显示屏的页面刷新频率设定后，则页面刷新频率是不变的。

根据本公开的实施例，可以采用上述方式实现更好的交互效果的原因在于：操作体对目标图像的操作会导致目标图像的位置改变，从呈现角度来说是目标图像的位置发生了改变，如从位置A移动到了位置B，但是从底层实现来说是在不同位置处对目标图像进行了绘制，每个位置处的目标图像可以理解为是一帧图像。由于目标图像通常在页面上进行呈现，因此，图像绘制依赖于页面刷新。由于元素设置于目标图像上，并且可以实时获取到元素的位置信息，因此，在绘制目标图像时也会绘制元素。其中，图像绘制是由后台线程控制的，页面刷新是由前台线程控制的。后台线程的时间线与前台线程的时间线是相互独立的，两者互不影响。

由于页面刷新频率与绘制频率分别是由相互独立的不同线程实现的，因此，需要考虑两者之间的匹配问题，如果两者不匹配，则可能出现卡顿或画面撕裂等现象，将极大影响用户的使用体验。为了实现更好的用户体验，可以使得绘制频率与页面刷新频率保持一致。

下面对元素绘制过程进行说明。后台线程在将下一帧图像替换当前帧图像时，会为下一帧图像添加预设标识，相应的，该预设标识将体现在页面中目标图像所在的页面区域，以使得前台线程在检测到存在预设标识时，加载添加该预设标识的下一帧图像，同时调用图像绘制函数判断当前页面刷新下一帧的开始时间(即页面更新下一帧图像的开始时间)是否已经到达，如果页面更新下一帧图像的开始时间已经到达，则调用图像绘制函数将加载的下一帧图像绘制在页面上并显示。如果页面更新下一帧图像的开始时间未到达，则异步调用预设函数，使得到达页面更新下一帧图像的开始时间时，则调用图像绘制函数将加载的下一帧图像绘制在页面上并显示。

根据本公开的实施例，采用以与页面刷新频率相同的绘制频率在与更新后的元素在目标图像上的位置信息对应的位置处绘制元素，实现了提供更好的用户体验。

可选地，在上述技术方案的基础上，操作体操作目标图像包括操作体对目标图像进行缩放操作。元素包括锚点，锚点在缩放操作过程中的尺寸保持不变。

在本公开的实施例中，图5示意性示出了根据本公开实施例的一种操作体对目标图像进行缩小的示意图。图6示意性示出了根据本公开实施例的一种操作体对目标图像进行放大的示意图。

图7示意性示出了根据本公开实施例的另一种目标图像的示意图。

图7是操作体对图3所示的目标图像进行缩小操作后得到的目标图像。从图3和图7可以看出，锚点1、锚点2和锚点3操作体对目标图像进行缩放操作中的尺寸保持不变。

根据本公开的实施例，在图像放大过程中，如果到达最大边界，则将停止放大。在图像缩小过程中，如果到达最小边界的0.5倍，则停止缩小，并平滑弹回到最小缩放倍数。

可选地，在上述技术方案的基础上，操作体的初始位置信息包括第一操作体的初始坐标和第二操作体的初始坐标，操作体的终止坐标信息包括第一操作体的终止坐标和第二操作体的终止坐标。

根据操作体的初始位置信息和终止位置信息确定目标图像的位置变化信息，可以包括如下操作。

根据第一操作体的初始坐标和第二操作体的初始坐标，确定第一操作体和第二操作体之间的初始距离。根据第一操作体的终止坐标和第二操作体的终止坐标，确定第一操作体和第二操作体之间的终止距离。将终止距离和初始距离的比值确定为目标图像的位置变化信息。

在本公开的实施例中，第一操作体的初始坐标可以用(x₁，y₁)表示，第一操作体的终止坐标可以用(x′₁，y′₁)表示。第二操作体的初始坐标可以用(x₂，y₂)表示，第二操作体的终止坐标可以用(x′₂，y′₂)表示。初始距离可以用d₁表示，终止距离可以用d₂表示。终止距离和初始距离的比值用scale表示。基于此， scale＝d₂/d₁。

在上述基础上，设定元素在目标图像上的位置信息(即元素在目标图像上的初始位置信息)用(X₁，Y₁)表示，则更新后的元素在目标图像上的位置信息(即元素在目标图像上的新的位置信息)用(X₂，Y₂)表示，其中，X₂＝scale·X₁，Y₂＝scale·Y₁。

图8示意性示出了根据本公开实施例的一种元素位置更新的示意图。图8中锚点4在目标图像上的初始位置信息为(20，10)，终止距离和初始距离的比值scale＝0.5。由于终止距离和初始距离的比值scale＝0.5，因此，当前目标图像的尺寸相比于初始目标图像的尺寸缩小了一倍，相应的，锚点4在目标图像上的新的位置信息为(10，5)。

可选地，在本公开的实施例中，操作体操作目标图像包括操作体对目标图像进行移动操作。该方法还可以包括如下操作。

在检测到操作体对目标图像进行移动操作的情况下，获取操作体在离开目标图像时对应的移动参数，其中，移动参数包括移动速度和帧数。利用预设速度衰减规则处理移动参数，以实现目标图像的惯性移动。

在本公开的实施例中，当操作体对目标图像进行移动操作时，在检测到操作体离开目标图像后，目标图像的速度衰减不够平滑，这极大影响了用户的使用体验。

为了提高用户的使用体验，则可以使目标图像以惯性移动的方式实现速度衰减，实现如下：在检测到操作体对目标图像进行移动操作的情况下，获取操作体在离开目标图像时对应的移动速度和帧数，并采用预设速度衰减规则处理移动速度和帧数，以实现目标图像的惯性移动，其中，预设速度衰减规则可以理解为是一种使得目标图像以移动速度为初始速度，以预设加速度进行速度衰减的规则。

根据本公开的实施例，在目标图像惯性移动过程中，如果达到任一边界，则惯性移动终止。

可选地，在上述技术方案的基础上，利用预设速度衰减规则处理移动参数，以实现目标图像的惯性移动，可以包括如下操作。

调用预设速度衰减函数处理移动参数，以实现目标图像的惯性移动，其中，预设速度衰减函数的参数包括初始速度和加速度，其中，初始速度为移动速度，加速度由预设阻力系数、预设惯性系数和帧数确定。

在本公开的实施例中，为了实现目标图像的惯性移动，可以调用预设速度衰减函数处理移动参数实现。其中，预设速度衰减函数是初始速度和加速度的函数。可以将预设速度衰减函数的参数封装为一个JavaScript(即JS)的闭包环境。

根据本公开的实施例，加速度由预设阻力系数、预设惯性系数和帧数确定。其中，帧数是一个变量，预设阻力系数和预设惯性系数是常量。由此可见，加速度是帧数的函数。预设阻力系数和预设惯性系数的具体数值是可以根据实际情况确定，在此不作具体限定。预设阻力系数的数值越大，则惯性移动距离越小。示意性的，如预设阻力系数为0，预设惯性系数为30。

根据本公开的实施例，加速度用a表示，预设阻力系数用force表示，预设惯性系数用intrtia表示。基于此，加速度由预设阻力系数、预设惯性系数和帧数确定可以包括：a(frame)＝e^{-(force+frame/intrtia)}。

可选地，在上述技术方案的基础上，移动速度由移动距离、总移动时间和每帧移动时间确定，其中，移动距离由操作体的初始位置信息和终止位置信息确定，总移动时间为操作体从与初始位置信息对应的位置到与终止位置信息对应的位置所经历的时间。

在本公开的实施例中，移动速度可以用v₀表示。移动距离可以用d表示，操作体的初始位置信息可以用(x，y)表示，操作体的终止位置信息可以用(x′，y′)表示，总移动时间可以用t表示。每帧移动时间可以用framespeed表示。加速度用a表示，预设速度衰减函数用v表示。预设阻力系数用force表示，预设惯性系数用intrtia表示。

基于上述，移动速度由移动距离、总移动时间和每帧移动时间确定可以包括：预设速度衰减函数v(d，t，frame)＝v₀(d，t)a(frame)，v表示帧数对应的目标图像的移动速度。

根据本公开的实施例，在检测到操作体离开目标图像后，目标图像将按照v(d，t，frame)＝v₀(d，t)a(frame)进行衰减直至速度为0，即反复调用v(d，t，frame)＝v₀(d，t)a(frame)直至速度变为0。

需要说明的是，如果绘制频率与页面刷新频率相同，则每帧移动时间可设置为17。

根据本公开的实施例，由于预设速度衰减函数可以实现目标图像的惯性移动，使得目标图像的移动更加自然，因此，极大提高了用户的使用体验。

可选地，在上述技术方案的基础上，该方法还可以包括如下操作。

在检测到操作体对目标图像进行中断操作的情况下，停止绘制目标图像，以中断目标图像进行的惯性移动。

在本公开的实施例中，为了进一步提高用户的使用体验，可以在检测到操作体对目标图像进行中断操作的情况下，停止绘制目标图像，以实现目标图像的惯性运动的中断。其中，操作体对目标图像的中断操作可由操作体再次接触目标图像触发。

根据本公开的实施例，上述可以实现中断目标图像进行的惯性移动的原因在于：由于实现图像移动的底层逻辑是以一定绘制频率在页面不同位置处绘制目标图像，因此，如果检测到图像移动中断操作，则可以通过停止绘制下一帧图像(即下一位置处的目标图像)实现。

可选地，在上述技术方案的基础上，在获取操作体在目标图像上所处位置的初始位置信息和终止位置信息之后，该方法还可以包括如下操作。

将操作体的初始位置信息和终止位置信息添加至任务队列。

根据操作体的初始位置信息和终止位置信息确定目标图像的位置变化信息，可以包括如下操作。

在每次元素绘制时，从任务队列中获取操作体的初始位置信息和终止位置信息。根据操作体的初始位置信息和终止位置信息确定目标图像的位置变化信息。

在本公开的实施例中，由于元素绘制是一个耗时事件，因此，为了降低时间消耗，可以将操作体在操作目标图像时形成的初始位置信息和终止位置信息添加至任务队列。在每次元素绘制时，可以基于即JS回调函数从任务队列中获取操作体的初始位置信息和终止位置。

图9示意性示出了根据本公开实施例的另一种元素位置更新方法的流程图。

如图9所示，该方法包括操作S901～S910。

在操作S901，展示目标图像，其中，目标图像上设置有元素，元素具有用于表征元素在目标图像上所处位置的位置信息，元素包括锚点，锚点在缩放操作过程中的尺寸保持不变。

在操作S902，操作体是否对目标图像进行缩放操作；若是，则执行操作S903；若否，则返回执行操作S902。

在操作S903，获取操作体在目标图像上所处位置的初始位置信息和终止位置信息，其中，操作体的初始位置信息包括第一操作体的初始坐标和第二操作体的初始坐标，操作体的终止坐标信息包括第一操作体的终止坐标和第二操作体的终止坐标。

在操作S904，将操作体的初始位置信息和终止位置信息添加至任务队列。

在操作S905，在每次元素绘制时，从任务队列中获取操作体的初始位置信息和终止位置信息。

在操作S906，根据第一操作体的初始坐标和第二操作体的初始坐标，确定第一操作体和第二操作体之间的初始距离。

在操作S907，根据第一操作体的终止坐标和第二操作体的终止坐标，确定第一操作体和第二操作体之间的终止距离。

在操作S908，将终止距离和初始距离的比值确定为目标图像的位置变化信息。

在操作S909，根据位置变化信息更新元素在目标图像上的位置信息。

在操作S910，在与更新后的元素在目标图像上的位置信息对应的位置处，以与页面刷新频率相同的绘制频率绘制元素。

根据本公开实施例的技术方案，通过展示目标图像，目标图像上设置有元素，元素具有用于表征元素在目标图像上所处位置的位置信息，在检测到操作体对目标图像进行缩放操作的情况下，获取操作体在目标图像上所处位置的初始位置信息和终止位置信息，将操作体的初始位置信息和终止位置信息添加至任务队列，在每次元素绘制时，从任务队列中获取操作体的初始位置信息和终止位置信息，根据操作体的初始位置信息和终止位置信息确定目标图像的位置变化信息，并根据位置变化信息更新元素在目标图像上的位置信息。由于可以获取操作体在目标图像上所处位置的初始位置信息和终止位置信息，实现了根据操作体的初始位置信息和终止位置信息确定的目标图像的位置变化信息更新元素在目标图像上的位置信息，因而，至少部分地克服了采用相关技术较难以实现设置于图像上的元素的位置更新的技术问题。由于将操作体在操作目标图像时形成的初始位置信息和终止位置信息添加至任务队列，在每次元素绘制时，从任务队列中获取位置信息，因此，降低了时间消耗。同时，由于采用以与页面刷新频率相同的绘制频率在与更新后的元素在目标图像上的位置信息对应的位置处绘制元素，因此，实现了提供更好的用户体验。此外，由于实现元素位置的更新，因此，可以应对其他基于元素位置的图像操作。

图10示意性示出了根据本公开实施例的再一种元素位置更新方法的流程图。

如图10所示，该方法包括操作S1001～S1012。

在操作S1001，展示目标图像，其中，目标图像上设置有元素，元素具有用于表征元素在目标图像上所处位置的位置信息。

在操作S1002，操作体对目标图像是否进行移动操作；若是，则执行操作S1003；若否，则返回执行操作S1002。

在操作S1003，获取操作体在目标图像上所处位置的初始位置信息和终止位置信息。

在操作S1004，将操作体的初始位置信息和终止位置信息添加至任务队列。

在操作S1005，在每次元素绘制时，从任务队列中获取操作体的初始位置信息和终止位置信息。

在操作S1006，根据位置变化信息更新元素在目标图像上的位置信息。

在操作S1007，在与更新后的元素在目标图像上的位置信息对应的位置处，以与页面刷新频率相同的绘制频率绘制元素。

在操作S1008，操作体是否离开目标图像；若是，则执行操作S1009；若否，则返回执行操作S1008。

在操作S1009，获取操作体在离开目标图像时对应的移动参数，其中，移动参数包括移动速度和帧数。

在操作S1010，调用预设速度衰减函数处理移动参数，以实现目标图像的惯性移动，其中，预设速度衰减函数的参数包括初始速度和加速度，其中，初始速度为移动速度，加速度由预设阻力系数、预设惯性系数和帧数确定。

在操作S1011，操作体对目标图像是否进行中断操作；若是，则执行操作S1012；若否，则返回执行操作S1011。

在操作S1012，停止绘制目标图像，以中断目标图像进行的惯性移动。

根据本公开实施例的技术方案，通过展示目标图像，目标图像上设置有元素，元素具有用于表征元素在目标图像上所处位置的位置信息，在检测到操作体对目标图像进行移动操作的情况下，获取操作体在目标图像上所处位置的初始位置信息和终止位置信息，将操作体的初始位置信息和终止位置信息添加至任务队列，在每次元素绘制时，从任务队列中获取操作体的初始位置信息和终止位置信息，根据操作体的初始位置信息和终止位置信息确定目标图像的位置变化信息，并根据位置变化信息更新元素在目标图像上的位置信息。在检测到操作体离开目标图像的情况下，获取操作体在离开目标图像时对应的移动参数，并调用预设速度衰减函数处理移动参数，以实现目标图像的惯性移动。在检测到操作体对目标图像进行中断操作的情况下，停止绘制目标图像，以中断目标图像进行的惯性移动。由于可以获取操作体在目标图像上所处位置的初始位置信息和终止位置信息，实现了根据操作体的初始位置信息和终止位置信息确定的目标图像的位置变化信息更新元素在目标图像上的位置信息，因而，至少部分地克服了采用相关技术较难以实现设置于图像上的元素的位置更新的技术问题。由于将操作体在操作目标图像时形成的初始位置信息和终止位置信息添加至任务队列，在每次元素绘制时，从任务队列中获取位置信息，因此，降低了时间消耗。同时，由于采用以与页面刷新频率相同的绘制频率在与更新后的元素在目标图像上的位置信息对应的位置处绘制元素，因此，实现了提供更好的用户体验。由于预设速度衰减函数可以实现目标图像的惯性移动，使得目标图像的移动更加自然，因此，极大提高了用户的使用体验。此外，由于实现了元素位置的更新，因此，可以应对其他基于元素位置的图像操作。

图11示意性示出了根据本公开的实施例的一种元素位置更新装置的框图。

如图11所示，元素位置更新装置1100可以包括展示模块1110、第一获取模块1120、确定模块1130和更新模块1140。

展示模块1110、第一获取模块1120、确定模块1130和更新模块1140通信连接。

展示模块1110，用于展示目标图像，其中，目标图像上设置有元素，元素具有用于表征元素在目标图像上所处位置的位置信息。

第一获取模块1120，用于在检测到操作体操作目标图像的情况下，获取操作体在目标图像上所处位置的初始位置信息和终止位置信息。

确定模块1130，用于根据操作体的初始位置信息和终止位置信息确定目标图像的位置变化信息。

更新模块1140，用于根据位置变化信息更新元素在目标图像上的位置信息。

根据本公开实施例的技术方案，通过展示目标图像，目标图像上设置有元素，元素具有用于表征元素在目标图像上所处位置的位置信息，在检测到操作体操作目标图像的情况下，获取操作体在目标图像上所处位置的初始位置信息和终止位置信息，根据操作体的初始位置信息和终止位置信息确定目标图像的位置变化信息，并根据位置变化信息更新元素在目标图像上的位置信息。由于可以获取操作体在目标图像上所处位置的初始位置信息和终止位置信息，实现了根据操作体的初始位置信息和终止位置信息确定的目标图像的位置变化信息更新元素在目标图像上的位置信息，因而，至少部分地克服了采用相关技术较难以实现设置于图像上的元素的位置更新的技术问题。此外，由于实现元素位置的更新，因此，可以应对基于元素位置的图像操作。

可选地，在上述技术方案的基础上，该元素位置更新装置1100还可以包括：

绘制模块，用于在与更新后的元素在目标图像上的位置信息对应的位置处，以与页面刷新频率相同的绘制频率绘制元素。

可选地，在上述技术方案的基础上，操作体操作目标图像包括操作体对目标图像进行缩放操作。元素包括锚点，锚点在缩放操作过程中的尺寸保持不变。

可选地，在上述技术方案的基础上，操作体的初始位置信息包括第一操作体的初始坐标和第二操作体的初始坐标，操作体的终止坐标信息包括第一操作体的终止坐标和第二操作体的终止坐标。

确定模块1130可以包括第一确定单元、第二确定单元和第三确定单元。

第一确定单元，用于根据第一操作体的初始坐标和第二操作体的初始坐标，确定第一操作体和第二操作体之间的初始距离。

第二确定单元，用于根据第一操作体的终止坐标和第二操作体的终止坐标，确定第一操作体和第二操作体之间的终止距离。以及

第三确定单元，用于将终止距离和初始距离的比值确定为目标图像的位置变化信息。

可选地，在上述技术方案的基础上，操作体操作目标图像包括操作体对目标图像进行移动操作。

该元素位置更新装置1100还可以包括第二获取模块。

第二获取模块，用于在检测到操作体对目标图像进行移动操作的情况下，获取操作体在离开目标图像时对应的移动参数，其中，移动参数包括移动速度和帧数。

处理模块，用于利用预设速度衰减规则处理移动参数，以实现目标图像的惯性移动。

可选地，在上述技术方案的基础上，处理模块可以包括处理单元。

处理单元，用于调用预设速度衰减函数处理移动参数，以实现目标图像的惯性移动，其中，预设速度衰减函数的参数包括初始速度和加速度，其中，初始速度为移动速度，加速度由预设阻力系数、预设惯性系数和帧数确定。

可选地，在上述技术方案的基础上，移动速度由移动距离、总移动时间和每帧移动时间确定，其中，移动距离由操作体的初始位置信息和终止位置信息确定，总移动时间为操作体从与初始位置信息对应的位置到与终止位置信息对应的位置所经历的时间。

可选地，在上述技术方案的基础上，该元素位置更新装置1100还可以包括：

中断模块，用于在检测到操作体对目标图像进行中断操作的情况下，停止绘制目标图像，以中断目标图像进行的惯性移动。

可选地，在上述技术方案的基础上，该元素位置更新装置1100还可以包括：

存储模块，用于将操作体的初始位置信息和终止位置信息添加至任务队列。

确定模块1130可以包括获取单元和第四确定单元。

获取单元，用于在每次元素绘制时，从任务队列中获取操作体的初始位置信息和终止位置信息。

第四确定单元，用于根据操作体的初始位置信息和终止位置信息确定目标图像的位置变化信息。

根据本公开的实施例的模块、单元中的任意多个、或其中任意多个的至少部分功能可以在一个模块中实现。根据本公开实施例的模块、单元中的任意一个或多个可以被拆分成多个模块来实现。根据本公开实施例的模块、单元中的任意一个或多个可以至少被部分地实现为硬件电路，例如现场可编程门阵列(Field Programmable Gate Array，FPGA)、可编程逻辑阵列(Programmable Logic Arrays，PLA)、片上系统、基板上的系统、封装上的系统、专用集成电路(Application Specific Integrated Circuit，ASIC)，或可以通过对电路进行集成或封装的任何其他的合理方式的硬件或固件来实现，或以软件、硬件以及固件三种实现方式中任意一种或以其中任意几种的适当组合来实现。或者，根据本公开实施例的模块、单元中的一个或多个可以至少被部分地实现为计算机程序模块，当该计算机程序模块被运行时，可以执行相应的功能。

例如，展示模块1110、第一获取模块1120、确定模块1130和更新模块1140中的任意多个可以合并在一个模块/单元中实现，或者其中的任意一个模块/单元可以被拆分成多个模块/单元。或者，这些模块/单元中的一个或多个模块/单元的至少部分功能可以与其他模块/单元的至少部分功能相结合，并在一个模块/单元中实现。根据本公开的实施例，展示模块1110、第一获取模块1120、确定模块1130和更新模块1140中的至少一个可以至少被部分地实现为硬件电路，例如现场可编程门阵列(FPGA)、可编程逻辑阵列(PLA)、片上系统、基板上的系统、封装上的系统、专用集成电路(ASIC)，或可以通过对电路进行集成或封装的任何其他的合理方式等硬件或固件来实现，或以软件、硬件以及固件三种实现方式中任意一种或以其中任意几种的适当组合来实现。或者，展示模块1110、第一获取模块1120、确定模块1130和更新模块1140中的至少一个可以至少被部分地实现为计算机程序模块，当该计算机程序模块被运行时，可以执行相应的功能。

需要说明的是，本公开的实施例中元素位置更新装置部分与本公开的实施例中元素位置更新方法部分是相对应的，元素位置更新装置部分的描述具体参考元素位置更新方法部分，在此不再赘述。

图12示意性示出了根据本公开实施例的适于实现上文描述的方法的电子设备的框图。图12示出的电子设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

如图12所示，根据本公开实施例的电子设备1000包括处理器1201，其可以根据存储在只读存储器(Read-Only Memory，ROM)1202中的程序或者从存储部分1208加载到随机访问存储器(Random Access Memory，RAM)1203中的程序而执行各种适当的动作和处理。处理器1201例如可以包括通用微处理器(例如CPU)、指令集处理器和/或相关芯片组和/或专用微处理器(例如，专用集成电路(ASIC))，等等。处理器1201还可以包括用于缓存用途的板载存储器。处理器1201可以包括用于执行根据本公开实施例的方法流程的不同动作的单一处理单元或者是多个处理单元。

在RAM 1203中，存储有系统1000操作所需的各种程序和数据。处理器1201、ROM1202以及RAM 1203通过总线1204彼此相连。处理器1201通过执行ROM 1202和/或RAM 1203中的程序来执行根据本公开实施例的方法流程的各种操作。需要注意，所述程序也可以存储在除ROM 1202和RAM 1203以外的一个或多个存储器中。处理器1201也可以通过执行存储在所述一个或多个存储器中的程序来执行根据本公开实施例的方法流程的各种操作。

根据本公开的实施例，系统1000还可以包括输入/输出(I/O)接口1205，输入/输出(I/O)接口1205也连接至总线1204。系统1000还可以包括连接至I/O接口1205的以下部件中的一项或多项：包括键盘、鼠标等的输入部分1206；包括诸如阴极射线管(CRT)、液晶显示器(Liquid Crystal Display，LCD)等以及扬声器等的输出部分1207；包括硬盘等的存储部分1208；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分1209。通信部分1209经由诸如因特网的网络执行通信处理。驱动器1210也根据需要连接至I/O接口1205。可拆卸介质1211，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器1210上，以便于从其上读出的计算机程序根据需要被安装入存储部分1208。

根据本公开的实施例，根据本公开实施例的方法流程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读存储介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分1209从网络上被下载和安装，和/或从可拆卸介质1211被安装。在该计算机程序被处理器1201执行时，执行本公开实施例的系统中限定的上述功能。根据本公开的实施例，上文描述的系统、设备、装置、模块、单元等可以通过计算机程序模块来实现。

本公开还提供了一种计算机可读存储介质，该计算机可读存储介质可以是上述实施例中描述的设备/装置/系统中所包含的；也可以是单独存在，而未装配入该设备/装置/系统中。上述计算机可读存储介质承载有一个或者多个程序，当上述一个或者多个程序被执行时，实现根据本公开实施例的方法。

根据本公开的实施例，计算机可读存储介质可以是非易失性的计算机可读存储介质。例如可以包括但不限于：便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM(Erasable Programmable Read Only Memory)或闪存)、便携式紧凑磁盘只读存储器(Computer Disc Read-Only Memory，CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

例如，根据本公开的实施例，计算机可读存储介质可以包括上文描述的ROM 1202和/或RAM 1203和/或ROM 1202和RAM 1203以外的一个或多个存储器。

附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。本领域技术人员可以理解，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合，即使这样的组合或结合没有明确记载于本公开中。特别地，在不脱离本公开精神和教导的情况下，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合。所有这些组合和/或结合均落入本公开的范围。

以上对本公开的实施例进行了描述。但是，这些实施例仅仅是为了说明的目的，而并非为了限制本公开的范围。尽管在以上分别描述了各实施例，但是这并不意味着各个实施例中的措施不能有利地结合使用。本公开的范围由所附权利要求及其等同物限定。不脱离本公开的范围，本领域技术人员可以做出多种替代和修改，这些替代和修改都应落在本公开的范围之内。