CN113763459A

CN113763459A - Element position updating method and device, electronic equipment and storage medium

Info

Publication number: CN113763459A
Application number: CN202011121024.4A
Authority: CN
Inventors: 麻建文; 何进萍
Original assignee: Beijing Jingdong Century Trading Co Ltd; Beijing Wodong Tianjun Information Technology Co Ltd
Current assignee: Beijing Jingdong Century Trading Co Ltd; Beijing Wodong Tianjun Information Technology Co Ltd
Priority date: 2020-10-19
Filing date: 2020-10-19
Publication date: 2021-12-07

Abstract

The embodiment of the disclosure provides an element position updating method and device, electronic equipment and a storage medium. The method comprises the following steps: displaying a target image, wherein an element is arranged on the target image, and the element has position information used for representing the position of the element on the target image; under the condition that the operation target image of the operation body is detected, acquiring initial position information and ending position information of the position of the operation body on the target image; determining position change information of the target image according to the initial position information and the end position information of the operation body; and updating the position information of the element on the target image according to the position change information.

Description

Element position updating method and device, electronic equipment and storage medium

Technical Field

The embodiment of the disclosure relates to the technical field of computers, and more particularly, to an element position updating method, an element position updating device, an electronic device and a storage medium.

Background

With the development of computer technology, electronic devices provide users with more and more operation functions for images, such as image zooming and image moving.

In the related art, image manipulation is generally implemented using a related plug-in, for example, image scaling is implemented using a pinchzoom plug-in.

In implementing the disclosed concept, the inventors found that there are at least the following problems in the related art: it is difficult to achieve position update of elements disposed on an image using the related art.

Disclosure of Invention

In view of this, the disclosed embodiments provide an element location updating method, apparatus, electronic device and storage medium.

An aspect of the embodiments of the present disclosure provides an element location updating method, including: displaying a target image, wherein an element is arranged on the target image, and the element has position information for representing the position of the element on the target image; when the operation of the operating body on the target image is detected, acquiring initial position information and end position information of the position of the operating body on the target image; determining position change information of the target image according to initial position information and end position information of the operation body; and updating the position information of the element on the target image according to the position change information.

Another aspect of the disclosed embodiments provides an element location updating apparatus, including: the display module is used for displaying a target image, wherein an element is arranged on the target image, and the element has position information used for representing the position of the element on the target image; a first obtaining module, configured to obtain initial position information and end position information of a position where an operating body is located on the target image when it is detected that the operating body operates the target image; a determining module, configured to determine position change information of the target image according to initial position information and end position information of the operating body; and the updating module is used for updating the position information of the element on the target image according to the position change information.

Another aspect of an embodiment of the present disclosure provides an electronic device including: one or more processors; memory for storing one or more programs, wherein the one or more programs, when executed by the one or more processors, cause the one or more processors to implement the method as described above.

Another aspect of embodiments of the present disclosure provides a computer-readable storage medium having stored thereon executable instructions that, when executed by a processor, cause the processor to implement a method as described above.

Another aspect of an embodiment of the present disclosure provides a computer program comprising computer executable instructions for implementing the method as described above when executed.

According to the technical scheme of the embodiment of the disclosure, by displaying a target image, an element is arranged on the target image, the element has position information used for representing the position of the element on the target image, when the operation target image of an operation body is detected, initial position information and end position information of the position of the operation body on the target image are acquired, position change information of the target image is determined according to the initial position information and the end position information of the operation body, and the position information of the element on the target image is updated according to the position change information. The initial position information and the end position information of the position of the operation body on the target image can be acquired, and the position information of the element on the target image is updated according to the position change information of the target image determined by the initial position information and the end position information of the operation body, so that the technical problem that the position updating of the element arranged on the image is difficult to realize by adopting the related technology is at least partially overcome. Further, since the update of the element position is realized, an image operation based on the element position can be dealt with.

Drawings

The above and other objects, features and advantages of the present disclosure will become more apparent from the following description of embodiments of the present disclosure with reference to the accompanying drawings, in which:

FIG. 1 schematically illustrates an exemplary system architecture to which an element location update method may be applied, according to an embodiment of the disclosure;

FIG. 2 schematically illustrates a flow chart of an element location update method according to an embodiment of the present disclosure;

FIG. 3 schematically illustrates a schematic view of a target image according to an embodiment of the disclosure;

FIG. 4 schematically illustrates a diagram of a details page corresponding to an anchor point, according to an embodiment of the present disclosure;

FIG. 5 is a schematic diagram illustrating a reduction of a target image by an operator according to an embodiment of the disclosure;

FIG. 6 schematically illustrates a diagram of an operator magnifying a target image, in accordance with an embodiment of the present disclosure;

FIG. 7 schematically illustrates another target image according to an embodiment of the disclosure;

FIG. 8 is a schematic diagram that schematically illustrates an element location update, in accordance with an embodiment of the present disclosure;

FIG. 9 schematically illustrates a flow chart of another element location update method according to an embodiment of the present disclosure;

FIG. 10 schematically illustrates a flow chart of yet another element location update method according to an embodiment of the present disclosure;

FIG. 11 schematically illustrates a block diagram of an element location update apparatus according to an embodiment of the present disclosure; and

FIG. 12 schematically illustrates a block diagram of an electronic device suitable for implementing an element location method in accordance with an embodiment of the present disclosure.

Detailed Description

Hereinafter, embodiments of the present disclosure will be described with reference to the accompanying drawings. It should be understood that the description is illustrative only and is not intended to limit the scope of the present disclosure. In the following detailed description, for purposes of explanation, numerous specific details are set forth in order to provide a thorough understanding of the embodiments of the disclosure. It may be evident, however, that one or more embodiments may be practiced without these specific details. Moreover, in the following description, descriptions of well-known structures and techniques are omitted so as to not unnecessarily obscure the concepts of the present disclosure.

The terminology used herein is for the purpose of describing particular embodiments only and is not intended to be limiting of the disclosure. The terms "comprises," "comprising," and the like, as used herein, specify the presence of stated features, steps, operations, and/or components, but do not preclude the presence or addition of one or more other features, steps, operations, or components.

All terms (including technical and scientific terms) used herein have the same meaning as commonly understood by one of ordinary skill in the art unless otherwise defined. It is noted that the terms used herein should be interpreted as having a meaning that is consistent with the context of this specification and should not be interpreted in an idealized or overly formal sense.

Where a convention analogous to "at least one of A, B and C, etc." is used, in general such a construction is intended in the sense one having skill in the art would understand the convention (e.g., "a system having at least one of A, B and C" would include but not be limited to systems that have a alone, B alone, C alone, a and B together, a and C together, B and C together, and/or A, B, C together, etc.). Where a convention analogous to "A, B or at least one of C, etc." is used, in general such a construction is intended in the sense one having skill in the art would understand the convention (e.g., "a system having at least one of A, B or C" would include but not be limited to systems that have a alone, B alone, C alone, a and B together, a and C together, B and C together, and/or A, B, C together, etc.).

In carrying out the disclosed concept, the inventors discovered that image plug-ins provided in the related art are generally used to provide corresponding functions, but do not provide location update functions. For example, a pinchzoom plug-in is used to provide image zooming, but a pinchzoom plug-in does not provide location update functionality. If the position updating function is not provided, the elements arranged on the image cannot update the position information in real time in the operation process.

For the case where there is a requirement for the size of an element provided on an image in the operation process, if the position information cannot be obtained in real time, the actual requirement cannot be satisfied. The following describes how to scale an image to meet an actual demand. Based on the image zooming realized by the pinchzoom plug-in, elements on the image are zoomed along with the image zooming. In other words, the size of the element cannot be kept constant. For an element to be an anchor point, it is desirable that the anchor point remains unchanged in size during the image scaling process. This is because a plurality of anchor points may be set on the image, and the anchor points are used to jump to the corresponding designated positions by clicking the anchor points, for example, a certain anchor point is used to represent a detail page link of a certain sofa, and a user can jump to the detail page of the sofa by clicking the anchor point. If the size of an anchor point scales as the image scales, a problem may arise in which multiple anchor points are piled up together and are not easily recognized. And if the size of the anchor point is kept unchanged in the image zooming process, the problems can be avoided, and further the actual requirements are met. If the anchor point size remains the same during image scaling, then real-time acquisition of position information is required.

In order to meet the actual requirements, it is necessary to implement position updating of elements disposed on an image.

Embodiments of the present disclosure provide an element location update, an apparatus, and an electronic device capable of applying the method. The method includes an element location update procedure. In the element updating process, displaying a target image, wherein an element is arranged on the target image, the element has position information used for representing the position of the element on the target image, under the condition that the operation target image of an operation body is detected, acquiring initial position information and end position information of the position of the operation body on the target image, determining position change information of the target image according to the initial position information and the end position information of the operation body, and updating the position information of the element on the target image according to the position change information.

Fig. 1 schematically illustrates an exemplary system architecture 100 to which an element location update method may be applied, according to an embodiment of the disclosure. It should be noted that fig. 1 is only an example of a system architecture to which the embodiments of the present disclosure may be applied to help those skilled in the art understand the technical content of the present disclosure, and does not mean that the embodiments of the present disclosure may not be applied to other devices, systems, environments or scenarios.

As shown in fig. 1, the system architecture 100 according to this embodiment may include

terminal devices

101, 102, 103, a network 104 and a server 105. The network 104 serves as a medium for providing communication links between the

terminal devices

101, 102, 103 and the server 105. Network 104 may include various connection types, such as wired and/or wireless communication links, and so forth.

The user may use the

terminal devices

101, 102, 103 to interact with the server 105 via the network 104 to receive or send messages or the like. The

terminal devices

101, 102, 103 may have installed thereon various communication client applications, such as a shopping-like application, a web browser application, a search-like application, an instant messaging tool, a mailbox client, and/or social platform software, etc. (by way of example only).

The

terminal devices

101, 102, 103 may be various electronic devices having a display screen and supporting web browsing, including but not limited to smart phones, tablet computers, laptop portable computers, desktop computers, and the like.

The server 105 may be a server providing various services, such as a background management server (for example only) providing support for websites browsed by users using the

terminal devices

101, 102, 103. The background management server may analyze and perform other processing on the received data such as the user request, and feed back a processing result (e.g., a webpage, information, or data obtained or generated according to the user request) to the terminal device.

It should be noted that the element location updating method provided by the embodiment of the present disclosure may also be executed by the

terminal device

101, 102, or 103, or may also be executed by another terminal device different from the

terminal device

101, 102, or 103. Accordingly, the element position updating apparatus provided in the embodiments of the present disclosure may also be disposed in the

terminal device

101, 102, or 103, or in another terminal device different from the

terminal device

101, 102, or 103.

For example, the target image may be originally stored in any one of the

terminal apparatuses

101, 102, or 103 (e.g., the terminal apparatus 101, but not limited thereto), or stored on an external storage apparatus and may be imported into the terminal apparatus 101. Then, the terminal device 101 may locally perform the element location updating method provided by the embodiment of the present disclosure, or transmit the target image to another terminal device, a server, or a server cluster, and perform the element location updating method provided by the embodiment of the present disclosure by another terminal device, a server, or a server cluster that receives the target image.

It should be understood that the number of terminal devices, networks, and servers in fig. 1 is merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for implementation.

FIG. 2 schematically shows a flow chart of an element location update method according to an embodiment of the present disclosure.

As shown in fig. 2, the method includes operations S210 to S240.

In operation S210, a target image is presented, wherein an element is disposed on the target image, and the element has position information for representing a position of the element on the target image.

In an embodiment of the present disclosure, a target image located on a page may be presented. The elements are disposed on the target image, and the elements may include anchor points and non-anchor points. The position information of the element may characterize where the element is located on the target image. FIG. 3 schematically shows a schematic diagram of a target image according to an embodiment of the disclosure.

As shown in fig. 3, three anchor points, namely anchor point 1, anchor point 2 and anchor point 3, are arranged on the target image. The anchor point 1 is a detail page link for representing hall lamps, the anchor point 2 is a detail page link for representing whole house customization, and the anchor point 3 is a detail page link for representing chairs. The user may enter the corresponding details page by clicking on the anchor. The current user enters the full house customized details page shown in fig. 4 by clicking on anchor point 2 in fig. 3. Fig. 4 schematically shows a schematic diagram of a detail page corresponding to an anchor point according to an embodiment of the present disclosure.

In operation S220, in a case where it is detected that the operation body operates the target image, initial position information and end position information of a position where the operation body is located on the target image are acquired.

In the embodiment of the present disclosure, in order to implement the position update of the element, it is necessary to acquire the position information of the operator on the target image in the case where the operator operation target image is detected. The operation body may include a finger or a stylus. The operator operation target image may include an operator performing a zoom operation on the target image or an operator performing a move operation on the target image.

Whether the operator operates the target image may be generally determined by detecting whether an operation event is triggered. Wherein, if it is detected that the operator forms two pressing points or one pressing point on the page, it may be determined that the operator event is triggered. If two pressing points are formed on the page, it can be determined that an image zooming event is triggered, and accordingly, the operation body operates the target image to zoom the target image for the operation body. If a pressing point is formed on the page, it can be determined that an image moving event is triggered, and accordingly, the operator operation target image performs a moving operation on the target image for the operator. If the operator is a finger, the image zoom event may be triggered by the double-finger touching the target image, and the image shift event may be triggered by the single-finger touching the target image.

When the operation body operates the target image, an operation trajectory is generally formed, and at this time, initial position information of the operation body at an initial position and end position information at an end position of the operation trajectory may be acquired. The initial position is generally a position corresponding to when the operating body is just in contact with the target image, and the end position is generally a position corresponding to when the operating body is separated from the target image. The location information in embodiments of the present disclosure may be characterized by coordinates. The coordinates of the element are relative coordinates with respect to the target image, and the coordinates of the operation body are absolute coordinates.

In operation S230, position change information of the target image is determined according to the initial position information and the end position information of the operating body.

In operation S240, the position information of the element on the target image is updated according to the position change information.

In an embodiment of the present disclosure, the location change information may include distance information. Determining the position change information of the target image according to the initial position information of the operation body on the target image and the end position information of the operation body on the target image may include: and determining distance information between the initial coordinate and the end coordinate according to the initial coordinate and the end coordinate of the operation body on the target image, and determining position change information of the target image according to the distance information.

After obtaining the position change information of the target image, the position information of the new position of the element on the target image, i.e. the new position information of the element on the target image, may be determined according to the position change information and the position information of the position of the element on the target image, which may be considered as the initial position information of the element on the target image.

The method includes the steps that a target image is zoomed by an operation body, the operation body can comprise a first operation body and a second operation body, wherein initial coordinates of the operation body on the target image can comprise initial coordinates of the first operation body on the target image and initial coordinates of the second operation body on the target image, namely the initial coordinates of the first operation body and the initial coordinates of the second operation body. The termination coordinates of the operator on the target image may include termination coordinates of the first operator on the target image and termination coordinates of the second operator on the target image, that is, termination coordinates of the first operator and termination coordinates of the second operator.

In a case where it is detected that the operation body performs a zoom operation on the target image, determining distance information between the initial coordinate and the end coordinate according to the initial coordinate and the end coordinate of the operation body on the target image may include: and determining an initial distance between the first operation body and the second operation body according to the initial coordinates of the first operation body and the initial coordinates of the second operation body, and determining a termination distance between the first operation body and the second operation body according to the termination coordinates of the first operation body and the termination coordinates of the second operation body. Determining the position change information of the target image according to the distance information may include: and determining the ratio of the ending distance to the initial distance as the position change information of the target image. Because the ratio can represent the image scaling size, and the relative position of the element relative to the target image needs to be scaled by the corresponding size in the image scaling process, the ratio can be multiplied by the initial coordinate of the element on the target image to obtain a new coordinate, and the new coordinate is determined as new position information of the element on the target image.

The initial coordinate may include an initial abscissa and an initial ordinate, and the end coordinate may include an end abscissa and an end ordinate.

In a case where it is detected that the operation body performs a zoom operation on the target image, determining distance information between the initial coordinate and the end coordinate according to the initial coordinate and the end coordinate of the operation body on the target image may include: according to the initial abscissa and the termination abscissa, the abscissa change information of the operation body is determined, and according to the initial ordinate and the termination ordinate, the ordinate change information of the operation body is determined. Determining the position change information of the target image according to the distance information may include: and determining the horizontal coordinate change information and the vertical coordinate change information as the position change information of the target image. The initial abscissa of the element on the target image can be updated according to the abscissa change information to obtain a new abscissa of the element on the target image, the initial ordinate of the element on the target image is updated according to the ordinate change information to obtain a new ordinate of the element on the target image, and the new abscissa and the new ordinate are determined as new position information of the element on the target image.

According to the technical scheme of the embodiment of the disclosure, by displaying a target image, an element is arranged on the target image, the element has position information used for representing the position of the element on the target image, when the operation target image of an operation body is detected, initial position information and end position information of the position of the operation body on the target image are acquired, position change information of the target image is determined according to the initial position information and the end position information of the operation body, and the position information of the element on the target image is updated according to the position change information. The initial position information and the end position information of the position of the operation body on the target image can be acquired, so that the position information of the element on the target image is updated according to the position change information of the target image determined by the initial position information and the end position information of the operation body, and the technical problem that the position updating of the element arranged on the image is difficult to realize by adopting the related technology is at least partially overcome. Further, since the update of the element position is realized, an image operation based on the element position can be dealt with.

Optionally, on the basis of the above technical solution, after updating the position information of the element on the target image according to the position change information, the following operation may be further included.

Drawing the element at a drawing frequency identical to the page refresh frequency at a position corresponding to the position information of the updated element on the target image.

In the embodiment of the disclosure, in order to achieve better user experience, it may be ensured that the element is drawn at a position corresponding to the new position information of the element on the target image at a drawing frequency that is the same as the page refresh frequency. The page refresh frequency refers to the number of frames that can be displayed on the display screen per second, that is, the number of times of updating images on the display screen per second, and the unit is Hz. The higher the page refreshing frequency is, the smaller the flicker feeling of the image on the traditional display screen is, the higher the stability is, and the better the visual experience of the user is. It is understood that the page refresh interval is 1/page refresh frequency, i.e. if the page refresh frequency is 60Hz, the page refresh interval is 16ms, i.e. the page is refreshed every 16 ms. The drawing frequency may be understood as an image generation frequency, which is the number of Frames that an image generation apparatus (such as a video card) can render Per Second, and is expressed in FPS (Frames Per Second). It should be noted that the drawing frequency is changed, and if the page refresh frequency of the display screen is set, the page refresh frequency is not changed.

According to the embodiment of the present disclosure, the reason why the better interaction effect can be achieved by adopting the above manner is that: the operation of the object image by the operator causes the position of the object image to change, and the position of the object image from the presentation perspective is changed, such as moving from position a to position B, but the object image is drawn at different positions from the bottom implementation, and the object image at each position can be understood as a frame image. Since the target image is typically rendered on a page, image rendering relies on page refreshing. Since the elements are arranged on the target image and the position information of the elements can be acquired in real time, the elements are also drawn when the target image is drawn. Wherein, the image drawing is controlled by a background thread, and the page refreshing is controlled by a foreground thread. The time line of the background thread and the time line of the foreground thread are independent and do not influence each other.

Because the page refreshing frequency and the drawing frequency are respectively realized by different threads which are independent from each other, the matching problem between the two threads needs to be considered, if the two threads are not matched, phenomena of blocking or tearing of a picture and the like can occur, and the use experience of a user is greatly influenced. To achieve a better user experience, the drawing frequency may be made consistent with the page refresh frequency.

The element drawing process is explained below. When the background thread replaces the current frame image with the next frame image, a preset identifier is added to the next frame image, correspondingly, the preset identifier is embodied in a page area where a target image in a page is located, so that when the foreground thread detects that the preset identifier exists, the next frame image added with the preset identifier is loaded, meanwhile, an image drawing function is called to judge whether the starting time of refreshing the next frame of the current page (namely the starting time of updating the next frame image by the page) is reached, and if the starting time of updating the next frame image by the page is reached, the image drawing function is called to draw the loaded next frame image on the page and display the loaded next frame image. And if the starting time of the next frame image updated by the page is not reached, asynchronously calling the preset function, so that when the starting time of the next frame image updated by the page is reached, calling the image drawing function to draw and display the loaded next frame image on the page.

According to the embodiment of the disclosure, the element is drawn at the position corresponding to the position information of the updated element on the target image at the drawing frequency which is the same as the page refreshing frequency, so that better user experience is provided.

Optionally, on the basis of the above technical solution, the operation of the operation body on the target image includes the operation of the operation body on zooming of the target image. The elements include anchor points whose size remains unchanged during the scaling operation.

In an embodiment of the present disclosure, fig. 5 schematically illustrates a schematic diagram of an operation body reducing a target image according to an embodiment of the present disclosure. Fig. 6 schematically illustrates a schematic diagram of an operation body magnifying a target image according to an embodiment of the present disclosure.

FIG. 7 schematically illustrates another target image according to an embodiment of the disclosure.

Fig. 7 is a target image obtained by the operator performing a reduction operation on the target image shown in fig. 3. As can be seen from fig. 3 and 7, the anchor 1, anchor 2, and anchor 3 operators remain unchanged in size in the scaling operation on the target image.

According to an embodiment of the present disclosure, in the image enlargement process, if the maximum boundary is reached, the enlargement will be stopped. In the image reduction process, if 0.5 times of the minimum boundary is reached, the reduction is stopped, and the image smoothly bounces back to the minimum zoom factor.

Optionally, on the basis of the above technical solution, the initial position information of the operation body includes an initial coordinate of the first operation body and an initial coordinate of the second operation body, and the termination coordinate information of the operation body includes a termination coordinate of the first operation body and a termination coordinate of the second operation body.

Determining the position change information of the target image from the initial position information and the end position information of the operation body may include the following operations.

And determining an initial distance between the first operation body and the second operation body according to the initial coordinates of the first operation body and the initial coordinates of the second operation body. And determining a termination distance between the first operation body and the second operation body according to the termination coordinates of the first operation body and the termination coordinates of the second operation body. And determining the ratio of the ending distance to the initial distance as the position change information of the target image.

In an embodiment of the present disclosure, the initial coordinate of the first manipulation body may be represented by (x)₁，y₁) The termination coordinate of the first operation body may be represented by (x'₁，y′₁) And (4) showing. The initial coordinate of the second operation body can be (x)₂，y₂) The termination coordinate of the second operation body may be represented by (x'₂，y′₂) And (4) showing. The initial distance may be d₁The termination distance may be represented by d₂And (4) showing. The ratio of the ending distance to the initial distance is expressed in scale. On the basis of this, the method is suitable for the production,

scale＝d₂/d₁。

on the basis of the above, the positional information of the element on the target image (i.e., the initial positional information of the element on the target image) is set to (X)₁，Y₁) Indicating that the updated position information of the element on the target image (i.e. the new position information of the element on the target image) is represented by (X)₂，Y₂) Is represented by, wherein X₂＝scale·X₁，Y₂＝scale·Y₁。

FIG. 8 schematically illustrates a schematic diagram of an element location update according to an embodiment of the disclosure. In fig. 8, the initial position information of the anchor point 4 on the target image is (20, 10), and the ratio scale of the ending distance to the initial distance is 0.5. Since the ratio scale of the ending distance to the initial distance is 0.5, the size of the current target image is reduced by one time compared to the size of the initial target image, and accordingly, the new position information of the anchor point 4 on the target image is (10, 5).

Optionally, in an embodiment of the present disclosure, the operation of the operator on the target image includes the operation of moving the target image by the operator. The method may further include the following operations.

Under the condition that the moving operation of the operating body on the target image is detected, the corresponding moving parameters of the operating body when the operating body leaves the target image are obtained, wherein the moving parameters comprise the moving speed and the frame number. And processing the movement parameters by using a preset speed attenuation rule to realize the inertial movement of the target image.

In the embodiment of the disclosure, when the operation body performs the moving operation on the target image, after it is detected that the operation body leaves the target image, the speed attenuation of the target image is not smooth enough, which greatly affects the use experience of the user.

In order to improve the user experience, the target image may be subjected to velocity attenuation in an inertial moving manner, which is implemented as follows: under the condition that the moving operation of the operation body on the target image is detected, the moving speed and the frame number corresponding to the operation body when the operation body leaves the target image are obtained, and the moving speed and the frame number are processed by adopting a preset speed attenuation rule to realize the inertial movement of the target image, wherein the preset speed attenuation rule can be understood as a rule that the target image is subjected to speed attenuation by taking the moving speed as an initial speed and a preset acceleration.

According to an embodiment of the present disclosure, during the inertial movement of the target image, if any boundary is reached, the inertial movement is terminated.

Optionally, on the basis of the above technical solution, processing the movement parameter by using a preset velocity attenuation rule to implement inertial movement of the target image may include the following operations.

And calling a preset speed attenuation function to process the movement parameters so as to realize the inertial movement of the target image, wherein the parameters of the preset speed attenuation function comprise an initial speed and an acceleration, the initial speed is the movement speed, and the acceleration is determined by a preset resistance coefficient, a preset inertial coefficient and a frame number.

In an embodiment of the present disclosure, to implement the inertial movement of the target image, a preset velocity decay function may be invoked to process the movement parameter implementation. Wherein the preset velocity decay function is a function of the initial velocity and the acceleration. The parameters of the preset speed decay function can be packaged as a closed-form environment of JavaScript (JS).

According to an embodiment of the present disclosure, the acceleration is determined by a preset resistance coefficient, a preset inertia coefficient, and a frame number. The frame number is a variable, and the preset resistance coefficient and the preset inertia coefficient are constants. It follows that acceleration is a function of frame number. The specific values of the preset resistance coefficient and the preset inertia coefficient can be determined according to actual conditions, and are not limited in particular. The larger the value of the preset resistance coefficient is, the smaller the inertial moving distance is. Illustratively, the preset resistance coefficient is 0, and the preset inertia coefficient is 30.

According to an embodiment of the present disclosure, the acceleration is represented by a, the preset resistance coefficient is represented by force, and the preset inertia coefficient is represented by inttia. Based on this, the determining of the acceleration from the preset resistance coefficient, the preset inertia coefficient, and the frame number may include: a (frame) ═ e^{-(force+frame/intrtia)}。

Optionally, on the basis of the above technical solution, the moving speed is determined by a moving distance, a total moving time and a moving time per frame, wherein the moving distance is determined by initial position information and end position information of the operating body, and the total moving time is a time that the operating body has elapsed from a position corresponding to the initial position information to a position corresponding to the end position information.

In embodiments of the present disclosure, the movement speed may be in v₀And (4) showing. The moving distance may be represented by d, the initial position information of the operator may be represented by (x, y), the end position information of the operator may be represented by (x ', y'), and the total moving time may be represented by t. The movement time per frame can be represented by framespeed. The acceleration is denoted by a and the preset velocity decay function is denoted by v. The preset resistance coefficient is expressed in force and the preset inertia coefficient is expressed in intrtia.

Based on the above, the moving speed is composed of the moving distance, the total moving time andthe moving time per frame determination may include:

the preset velocity decay function v (d, t, frame) is v₀And (d, t) a (frame), wherein v represents the moving speed of the target image corresponding to the frame number.

According to the embodiment of the disclosure, after the operating body is detected to leave the target image, the target image is to be changed into v (d, t, frame)₀(d, t) a (frame) is attenuated until the velocity is 0, i.e. v (d, t, frame) is repeatedly called₀(d, t) a (frame) until the velocity becomes 0.

It should be noted that if the drawing frequency is the same as the page refresh frequency, the moving time per frame may be set to 17.

According to the embodiment of the disclosure, the inertia movement of the target image can be realized by presetting the speed attenuation function, so that the movement of the target image is more natural, and therefore, the use experience of a user is greatly improved.

Optionally, on the basis of the above technical solution, the method may further include the following operations.

When the interruption operation of the operation body on the target image is detected, the drawing of the target image is stopped to interrupt the inertial movement of the target image.

In the embodiment of the disclosure, in order to further improve the use experience of the user, in the case that the interruption operation of the operation body on the target image is detected, the drawing of the target image may be stopped to realize the interruption of the inertial motion of the target image. Wherein the interruption operation of the target image by the operating body can be triggered by the operating body contacting the target image again.

According to an embodiment of the present disclosure, the reason why the inertial movement by the target image can be interrupted as described above is that: since the underlying logic that realizes the image movement draws the target image at a different position on the page at a certain drawing frequency, if the image movement interruption operation is detected, it can be realized by stopping drawing the next frame image (i.e., the target image at the next position).

Optionally, on the basis of the above technical solution, after acquiring the initial position information and the end position information of the position where the operation body is located on the target image, the method may further include the following operation.

And adding the initial position information and the end position information of the operation body to the task queue.

At each element drawing, initial position information and end position information of the operation body are acquired from the task queue. And determining the position change information of the target image according to the initial position information and the termination position information of the operation body.

In the embodiment of the present disclosure, since element rendering is a time-consuming event, in order to reduce time consumption, initial position information and end position information formed by an operator when operating a target image may be added to a task queue. At each element drawing time, the initial position information and the termination position of the operation body can be acquired from the task queue based on the JS callback function.

FIG. 9 schematically illustrates a flow chart of another element location update method according to an embodiment of the disclosure.

As shown in fig. 9, the method includes operations S901 to S910.

In operation S901, a target image is displayed, where an element is disposed on the target image, the element has position information for representing a position of the element on the target image, and the element includes an anchor point, and a size of the anchor point remains unchanged during a zooming operation.

In operation S902, whether the operator performs a zoom operation on the target image; if yes, execute operation S903; if not, the process returns to operation S902.

In operation S903, initial position information and end position information of a position where an operation body is located on a target image are acquired, where the initial position information of the operation body includes initial coordinates of a first operation body and initial coordinates of a second operation body, and the end coordinate information of the operation body includes end coordinates of the first operation body and end coordinates of the second operation body.

In operation S904, initial position information and termination position information of the operator are added to the task queue.

In operation S905, initial position information and end position information of the operation body are acquired from the task queue every time an element is drawn.

In operation S906, an initial distance between the first manipulation body and the second manipulation body is determined according to the initial coordinates of the first manipulation body and the initial coordinates of the second manipulation body.

In operation S907, a termination distance between the first manipulation body and the second manipulation body is determined according to the termination coordinates of the first manipulation body and the termination coordinates of the second manipulation body.

In operation S908, a ratio of the ending distance and the initial distance is determined as the position change information of the target image.

In operation S909, the position information of the element on the target image is updated according to the position change information.

In operation S910, the element is drawn at the same drawing frequency as the page refresh frequency at a position corresponding to the position information of the updated element on the target image.

According to the technical scheme of the embodiment of the disclosure, by displaying a target image, an element is arranged on the target image, the element has position information used for representing the position of the element on the target image, when the fact that an operation body performs zooming operation on the target image is detected, initial position information and end position information of the operation body on the position of the target image are obtained, the initial position information and the end position information of the operation body are added to a task queue, the initial position information and the end position information of the operation body are obtained from the task queue every time the element is drawn, position change information of the target image is determined according to the initial position information and the end position information of the operation body, and the position information of the element on the target image is updated according to the position change information. The initial position information and the end position information of the position of the operation body on the target image can be acquired, so that the position information of the element on the target image is updated according to the position change information of the target image determined by the initial position information and the end position information of the operation body, and the technical problem that the position updating of the element arranged on the image is difficult to realize by adopting the related technology is at least partially overcome. Since the initial position information and the end position information formed by the operator at the time of operating the target image are added to the task queue, the position information is acquired from the task queue every time the element is drawn, and therefore, the time consumption is reduced. Meanwhile, the elements are drawn at the positions corresponding to the position information of the updated elements on the target image by the drawing frequency which is the same as the page refreshing frequency, so that better user experience is provided. Furthermore, since the updating of the element position is realized, other image operations based on the element position can be dealt with.

FIG. 10 is a flow chart that schematically illustrates yet another element location update method, in accordance with an embodiment of the present disclosure.

As shown in fig. 10, the method includes operations S1001 to S1012.

In operation S1001, a target image is presented, wherein an element is disposed on the target image, and the element has position information for representing a position of the element on the target image.

In operation S1002, the operator performs a moving operation on the target image; if yes, perform operation S1003; if not, the process returns to perform operation S1002.

In operation S1003, initial position information and end position information of a position where the operation body is located on the target image are acquired.

In operation S1004, initial position information and end position information of the operation body are added to the task queue.

In operation S1005, initial position information and end position information of the operation body are acquired from the task queue every time the element is drawn.

In operation S1006, the position information of the element on the target image is updated according to the position change information.

In operation S1007, the element is drawn at the same drawing frequency as the page refresh frequency at a position corresponding to the position information of the updated element on the target image.

In operation S1008, whether the operator has left the target image; if yes, perform operation S1009; if not, the process returns to the operation S1008.

In operation S1009, movement parameters corresponding to the operator when leaving the target image are acquired, where the movement parameters include a movement speed and a frame number.

In operation S1010, a preset velocity decay function is called to process a movement parameter to realize inertial movement of the target image, where the parameter of the preset velocity decay function includes an initial velocity and an acceleration, the initial velocity is a movement velocity, and the acceleration is determined by a preset resistance coefficient, a preset inertial coefficient, and a frame number.

In operation S1011, the operator performs an interrupt operation on the target image; if yes, perform operation S1012; if not, the process returns to operation S1011.

In operation S1012, the drawing of the target image is stopped to interrupt the inertial movement by the target image.

According to the technical scheme of the embodiment of the disclosure, by displaying a target image, an element is arranged on the target image, the element has position information used for representing the position of the element on the target image, when the operation body is detected to move the target image, the initial position information and the end position information of the position of the operation body on the target image are acquired, the initial position information and the end position information of the operation body are added to a task queue, the initial position information and the end position information of the operation body are acquired from the task queue every time the element is drawn, the position change information of the target image is determined according to the initial position information and the end position information of the operation body, and the position information of the element on the target image is updated according to the position change information. And under the condition that the operating body is detected to leave the target image, acquiring a corresponding movement parameter of the operating body when the operating body leaves the target image, and calling a preset speed attenuation function to process the movement parameter so as to realize the inertial movement of the target image. When the interruption operation of the operation body on the target image is detected, the drawing of the target image is stopped to interrupt the inertial movement of the target image. The initial position information and the end position information of the position of the operation body on the target image can be acquired, so that the position information of the element on the target image is updated according to the position change information of the target image determined by the initial position information and the end position information of the operation body, and the technical problem that the position updating of the element arranged on the image is difficult to realize by adopting the related technology is at least partially overcome. Since the initial position information and the end position information formed by the operator at the time of operating the target image are added to the task queue, the position information is acquired from the task queue every time the element is drawn, and therefore, the time consumption is reduced. Meanwhile, the elements are drawn at the positions corresponding to the position information of the updated elements on the target image by the drawing frequency which is the same as the page refreshing frequency, so that better user experience is provided. Due to the fact that the preset speed attenuation function can achieve inertial movement of the target image, movement of the target image is more natural, and therefore use experience of a user is greatly improved. Furthermore, since the updating of the element position is realized, other image operations based on the element position can be dealt with.

Fig. 11 schematically shows a block diagram of an element position updating apparatus according to an embodiment of the present disclosure.

As shown in fig. 11, the element location updating apparatus 1100 may include a presentation module 1110, a first obtaining module 1120, a determining module 1130, and an updating module 1140.

The presentation module 1110, the first acquisition module 1120, the determination module 1130, and the update module 1140 are communicatively connected.

The display module 1110 is configured to display a target image, where an element is disposed on the target image, and the element has position information for representing a position of the element on the target image.

A first obtaining module 1120, configured to, in a case that it is detected that the operating body operates the target image, obtain initial position information and end position information of a position where the operating body is located on the target image.

A determining module 1130, configured to determine the position change information of the target image according to the initial position information and the end position information of the operation body.

And an updating module 1140, configured to update the position information of the element on the target image according to the position change information.

Optionally, on the basis of the foregoing technical solution, the element position updating apparatus 1100 may further include:

and the drawing module is used for drawing the elements at the position corresponding to the position information of the updated elements on the target image and with the drawing frequency same as the page refreshing frequency.

The determination module 1130 may include a first determination unit, a second determination unit, and a third determination unit.

A first determination unit configured to determine an initial distance between the first manipulation body and the second manipulation body based on the initial coordinates of the first manipulation body and the initial coordinates of the second manipulation body.

A second determination unit configured to determine a termination distance between the first operation body and the second operation body based on the termination coordinate of the first operation body and the termination coordinate of the second operation body. And

and a third determining unit for determining a ratio of the ending distance to the initial distance as the position change information of the target image.

Optionally, on the basis of the above technical solution, the operation of the operation body on the target image includes moving the target image by the operation body.

The element location updating apparatus 1100 may further include a second obtaining module.

And the second acquisition module is used for acquiring the corresponding movement parameters of the operation body when the operation body leaves the target image under the condition that the operation body is detected to move the target image, wherein the movement parameters comprise the movement speed and the frame number.

And the processing module is used for processing the movement parameters by utilizing a preset speed attenuation rule so as to realize the inertial movement of the target image.

Optionally, on the basis of the above technical solution, the processing module may include a processing unit.

And the processing unit is used for calling a preset velocity attenuation function to process the movement parameters so as to realize the inertial movement of the target image, wherein the parameters of the preset velocity attenuation function comprise an initial velocity and an acceleration, the initial velocity is the movement velocity, and the acceleration is determined by a preset resistance coefficient, a preset inertial coefficient and a frame number.

and the interruption module is used for stopping drawing the target image to interrupt the inertial movement of the target image under the condition that the interruption operation of the operating body on the target image is detected.

and the storage module is used for adding the initial position information and the ending position information of the operation body to the task queue.

The determination module 1130 may include an acquisition unit and a fourth determination unit.

And the acquisition unit is used for acquiring the initial position information and the ending position information of the operation body from the task queue every time the element is drawn.

A fourth determination unit configured to determine position change information of the target image based on the initial position information and the end position information of the operation body.

Any of the modules, units, or at least part of the functionality of any of them according to embodiments of the present disclosure may be implemented in one module. Any one or more of the modules and units according to the embodiments of the present disclosure may be implemented by being split into a plurality of modules. Any one or more of the modules, units according to the embodiments of the present disclosure may be implemented at least partially as a hardware Circuit, such as a Field Programmable Gate Array (FPGA), a Programmable Logic Array (PLA), a system on a chip, a system on a substrate, a system on a package, an Application Specific Integrated Circuit (ASIC), or may be implemented by hardware or firmware in any other reasonable manner of integrating or packaging a Circuit, or implemented by any one of three implementations of software, hardware, and firmware, or any suitable combination of any of them. Alternatively, one or more of the modules, units according to embodiments of the present disclosure may be implemented at least partly as computer program modules, which, when executed, may perform the respective functions.

For example, any number of the presentation module 1110, the first obtaining module 1120, the determining module 1130, and the updating module 1140 may be combined and implemented in one module/unit, or any one of the modules/units may be split into a plurality of modules/units. Alternatively, at least part of the functionality of one or more of these modules/units may be combined with at least part of the functionality of other modules/units and implemented in one module/unit. According to an embodiment of the disclosure, at least one of the presentation module 1110, the first obtaining module 1120, the determining module 1130, and the updating module 1140 may be implemented at least partially as a hardware circuit, such as a Field Programmable Gate Array (FPGA), a Programmable Logic Array (PLA), a system on a chip, a system on a substrate, a system on a package, an Application Specific Integrated Circuit (ASIC), or may be implemented in hardware or firmware in any other reasonable manner of integrating or packaging a circuit, or in any one of three implementations of software, hardware, and firmware, or in any suitable combination of any of them. Alternatively, at least one of the presentation module 1110, the first obtaining module 1120, the determining module 1130, and the updating module 1140 may be at least partially implemented as a computer program module that, when executed, may perform corresponding functions.

It should be noted that the element position updating apparatus portion in the embodiment of the present disclosure corresponds to the element position updating method portion in the embodiment of the present disclosure, and the description of the element position updating apparatus portion specifically refers to the element position updating method portion, which is not described herein again.

Fig. 12 schematically shows a block diagram of an electronic device adapted to implement the above described method according to an embodiment of the present disclosure. The electronic device shown in fig. 12 is only an example, and should not bring any limitation to the functions and the scope of use of the embodiments of the present disclosure.

As shown in fig. 12, an electronic device 1000 according to an embodiment of the present disclosure includes a processor 1201, which can perform various appropriate actions and processes according to a program stored in a Read-Only Memory (ROM) 1202 or a program loaded from a storage section 1208 into a Random Access Memory (RAM) 1203. The processor 1201 may include, for example, a general purpose microprocessor (e.g., a CPU), an instruction set processor and/or associated chipset, and/or a special purpose microprocessor (e.g., an Application Specific Integrated Circuit (ASIC)), among others. The processor 1201 may also include on-board memory for caching purposes. The processor 1201 may include a single processing unit or multiple processing units for performing the different actions of the method flows according to embodiments of the present disclosure.

In the RAM 1203, various programs and data necessary for the operation of the system 1000 are stored. The processor 1201, the ROM 1202, and the RAM 1203 are connected to each other by a bus 1204. The processor 1201 performs various operations of the method flow according to the embodiments of the present disclosure by executing programs in the ROM 1202 and/or the RAM 1203. Note that the programs may also be stored in one or more memories other than the ROM 1202 and the RAM 1203. The processor 1201 may also perform various operations of method flows according to embodiments of the present disclosure by executing programs stored in the one or more memories.

System 1000 may also include an input/output (I/O) interface 1205, according to an embodiment of the disclosure, input/output (I/O) interface 1205 also connected to bus 1204. The system 1000 may also include one or more of the following components connected to the I/O interface 1205: an input section 1206 including a keyboard, a mouse, and the like; an output portion 1207 including a Display device such as a Cathode Ray Tube (CRT), a Liquid Crystal Display (LCD), and a speaker; a storage section 1208 including a hard disk and the like; and a communication section 1209 including a network interface card such as a LAN card, a modem, or the like. The communication section 1209 performs communication processing via a network such as the internet. A driver 1210 is also connected to the I/O interface 1205 as needed. A removable medium 1211, such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, or the like, is mounted on the drive 1210 as necessary, so that a computer program read out therefrom is mounted into the storage section 1208 as necessary.

According to embodiments of the present disclosure, method flows according to embodiments of the present disclosure may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program product comprising a computer program embodied on a computer readable storage medium, the computer program containing program code for performing the method illustrated by the flow chart. In such an embodiment, the computer program may be downloaded and installed from a network through the communication section 1209, and/or installed from the removable medium 1211. The computer program, when executed by the processor 1201, performs the above-described functions defined in the system of the embodiments of the present disclosure. The systems, devices, apparatuses, modules, units, etc. described above may be implemented by computer program modules according to embodiments of the present disclosure.

The present disclosure also provides a computer-readable storage medium, which may be contained in the apparatus/device/system described in the above embodiments; or may exist separately and not be assembled into the device/apparatus/system. The computer-readable storage medium carries one or more programs which, when executed, implement the method according to an embodiment of the disclosure.

According to an embodiment of the present disclosure, the computer-readable storage medium may be a non-volatile computer-readable storage medium. Examples may include, but are not limited to: a portable Computer diskette, a hard disk, a Random Access Memory (RAM), a Read-Only Memory (ROM), an erasable Programmable Read-Only Memory (EPROM) (erasable Programmable Read-Only Memory) or flash Memory), a portable compact Disc Read-Only Memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the preceding. In the present disclosure, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device.

For example, according to embodiments of the present disclosure, a computer-readable storage medium may include the ROM 1202 and/or the RAM 1203 and/or one or more memories other than the ROM 1202 and the RAM 1203 described above.

The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams or flowchart illustration, and combinations of blocks in the block diagrams or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions. Those skilled in the art will appreciate that various combinations and/or combinations of features recited in the various embodiments and/or claims of the present disclosure can be made, even if such combinations or combinations are not expressly recited in the present disclosure. In particular, various combinations and/or combinations of the features recited in the various embodiments and/or claims of the present disclosure may be made without departing from the spirit or teaching of the present disclosure. All such combinations and/or associations are within the scope of the present disclosure.

The embodiments of the present disclosure have been described above. However, these examples are for illustrative purposes only and are not intended to limit the scope of the present disclosure. Although the embodiments are described separately above, this does not mean that the measures in the embodiments cannot be used in advantageous combination. The scope of the disclosure is defined by the appended claims and equivalents thereof. Various alternatives and modifications can be devised by those skilled in the art without departing from the scope of the present disclosure, and such alternatives and modifications are intended to be within the scope of the present disclosure.

Claims

1. An element location update method, comprising:

displaying a target image, wherein an element is arranged on the target image, and the element has position information for representing the position of the element on the target image;

under the condition that an operation body is detected to operate the target image, acquiring initial position information and end position information of the position of the operation body on the target image;

determining position change information of the target image according to the initial position information and the end position information of the operation body; and

and updating the position information of the element on the target image according to the position change information.

2. The method of claim 1, wherein after said updating the position information of the element on the target image according to the position change information, further comprising:

drawing the element at a drawing frequency which is the same as a page refresh frequency at a position corresponding to the updated position information of the element on the target image.

3. The method of claim 1, wherein the operator manipulating the target image comprises the operator performing a zoom operation on the target image; the element includes an anchor point whose size remains unchanged during the scaling operation.

4. The method of claim 3, wherein the initial position information of the operation body includes initial coordinates of a first operation body and initial coordinates of a second operation body, and the termination coordinate information of the operation body includes termination coordinates of the first operation body and termination coordinates of the second operation body;

the determining the position change information of the target image according to the initial position information and the end position information of the operation body includes:

determining an initial distance between the first operation body and the second operation body according to the initial coordinates of the first operation body and the initial coordinates of the second operation body;

determining a termination distance between the first operation body and the second operation body according to the termination coordinates of the first operation body and the termination coordinates of the second operation body; and

and determining the ratio of the ending distance to the initial distance as the position change information of the target image.

5. The method of claim 1, wherein the operator manipulating the target image comprises the operator performing a move operation on the target image;

the method further comprises the following steps:

under the condition that the moving operation of the operating body on the target image is detected, obtaining a moving parameter corresponding to the operating body when the operating body leaves the target image, wherein the moving parameter comprises a moving speed and a frame number; and

and processing the movement parameters by utilizing a preset speed attenuation rule so as to realize the inertial movement of the target image.

6. The method of claim 5, wherein said processing the movement parameters using a preset velocity decay rule to achieve inertial movement of the target image comprises:

and calling a preset speed attenuation function to process the movement parameters so as to realize inertial movement of the target image, wherein the parameters of the preset speed attenuation function comprise an initial speed and an acceleration, the initial speed is the movement speed, and the acceleration is determined by a preset resistance coefficient, a preset inertia coefficient and the frame number.

7. The method according to claim 6, wherein the moving speed is determined by a moving distance determined by initial position information and end position information of the operation body, a total moving time that is a time that the operation body has elapsed from a position corresponding to the initial position information to a position corresponding to the end position information, and a moving time per frame.

8. The method of claim 5, further comprising:

and stopping drawing the target image to interrupt the inertial movement of the target image when the interruption operation of the target image by the operation body is detected.

9. The method according to any one of claims 1 to 8, further comprising, after the acquiring initial position information and end position information of the position of the operation body on the target image, the step of:

adding initial position information and end position information of the operation body to a task queue;

acquiring initial position information and end position information of the operation body from the task queue when each element is drawn; and

and determining the position change information of the target image according to the initial position information and the termination position information of the operation body.

10. An element location update apparatus, comprising:

the display module is used for displaying a target image, wherein an element is arranged on the target image, and the element has position information used for representing the position of the element on the target image;

the first acquisition module is used for acquiring initial position information and ending position information of the position of an operating body on the target image under the condition that the operating body is detected to operate the target image;

the determining module is used for determining the position change information of the target image according to the initial position information and the termination position information of the operation body; and

and the updating module is used for updating the position information of the element on the target image according to the position change information.

11. An electronic device, comprising:

one or more processors;

a memory for storing one or more programs,

wherein the one or more programs, when executed by the one or more processors, cause the one or more processors to implement the method of any of claims 1-9.

12. A computer readable storage medium having stored thereon executable instructions which, when executed by a processor, cause the processor to carry out the method of any one of claims 1 to 9.