CN113763459B - Element position updating method and device, electronic equipment and storage medium - Google Patents

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

Info

Publication number
CN113763459B
CN113763459B CN202011121024.4A CN202011121024A CN113763459B CN 113763459 B CN113763459 B CN 113763459B CN 202011121024 A CN202011121024 A CN 202011121024A CN 113763459 B CN113763459 B CN 113763459B
Authority
CN
China
Prior art keywords
target image
position information
initial
operation body
movement
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN202011121024.4A
Other languages
Chinese (zh)
Other versions
CN113763459A (en
Inventor
麻建文
何进萍
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Jingdong Century Trading Co Ltd
Beijing Wodong Tianjun Information Technology Co Ltd
Original Assignee
Beijing Jingdong Century Trading Co Ltd
Beijing Wodong Tianjun Information Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Jingdong Century Trading Co Ltd, Beijing Wodong Tianjun Information Technology Co Ltd filed Critical Beijing Jingdong Century Trading Co Ltd
Priority to CN202011121024.4A priority Critical patent/CN113763459B/en
Publication of CN113763459A publication Critical patent/CN113763459A/en
Application granted granted Critical
Publication of CN113763459B publication Critical patent/CN113763459B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06TIMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T7/00Image analysis
    • G06T7/70Determining position or orientation of objects or cameras
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06TIMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/002D [Two Dimensional] image generation
    • G06T11/20Drawing from basic elements, e.g. lines or circles
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06TIMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T3/00Geometric image transformations in the plane of the image
    • G06T3/40Scaling of whole images or parts thereof, e.g. expanding or contracting

Landscapes

  • Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Theoretical Computer Science (AREA)
  • Computer Vision & Pattern Recognition (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

The embodiment of the disclosure provides an element position updating method, an element position updating device, electronic equipment and a storage medium. The method comprises the following steps: displaying a target image, wherein the target image is provided with elements, and the elements have position information for representing the positions of the elements on the target image; under the condition that the operation object is detected to operate the target image, acquiring initial position information and end position information of the position of the operation object 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 operating 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 relates to an element position updating method, an element position updating device, electronic equipment 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 scaling and image movement.
In the related art, image manipulation is typically implemented using related plug-ins, for example, image scaling is implemented using pinchzoom plug-ins.
In the process of implementing the disclosed concept, the inventor finds that at least the following problems exist in the related art: it is more difficult to achieve a location update of elements disposed on an image using the related art.
Disclosure of Invention
In view of this, the embodiments of the present disclosure provide a method, an apparatus, an electronic device, and a storage medium for updating element positions.
An aspect of an embodiment of the present disclosure provides an element position updating method, including: displaying a target image, wherein the target image is provided with elements, and the elements have position information for representing positions of the elements on the target image; acquiring initial position information and end position information of a position of an operating body on the target image when the operating body is detected to operate the target image; determining position change information of the target image according to the initial position information and the end position information of the operating body; and 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 element position updating apparatus, including: the display module is used for displaying a target image, wherein the target image is provided with elements, and the elements have position information used for representing positions of the elements on the target image; a first acquisition module, configured to acquire initial position information and end position information of a position of an operation body on the target image when the operation body is detected to operate the target image; a determining module for determining position change information of the target image according to the initial position information and the end position information of the operating body; and an updating module 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; and 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 as described above.
Another aspect of an embodiment 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 the disclosed embodiments provides a computer program comprising computer executable instructions which, when executed, are to implement a method as described above.
According to the technical scheme of the embodiment of the disclosure, through displaying the target image, the target image is provided with the element, the element has the position information used for representing the position of the element on the target image, under the condition that the operation body is detected to operate the target image, the initial position information and the end position information of the position of the operation body on the target image are obtained, 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. Because the initial position information and the end position information of the position of the operating body on the target image can be acquired, 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 operating body, and therefore, the technical problem that the position update of the element arranged on the image is difficult to realize by adopting the related technology is at least partially overcome. Further, since updating of the element position is realized, image operations based on the element position can be handled.
Drawings
The above and other objects, features and advantages of the present disclosure will become more apparent from the following description of embodiments thereof 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 present disclosure;
FIG. 2 schematically illustrates a flow chart of an element position update method according to an embodiment of the disclosure;
FIG. 3 schematically illustrates a schematic view of a target image according to an embodiment of the disclosure;
FIG. 4 schematically illustrates a schematic diagram of a detail page corresponding to an anchor point in accordance with an embodiment of the present disclosure;
FIG. 5 schematically illustrates a schematic view of a zoom-out of a target image by an operator according to an embodiment of the present disclosure;
FIG. 6 schematically illustrates a schematic view of an operator zooming in on a target image according to an embodiment of the present disclosure;
FIG. 7 schematically illustrates a schematic view of another target image according to an embodiment of the disclosure;
FIG. 8 schematically illustrates a schematic diagram of an element location update according to an embodiment of the present disclosure;
FIG. 9 schematically illustrates a flow chart of another element position update method according to an embodiment of the disclosure;
FIG. 10 schematically illustrates a flow chart of yet another element position update method according to an embodiment of the disclosure;
FIG. 11 schematically illustrates a block diagram of an element position updating apparatus according to an embodiment of the present disclosure; and
Fig. 12 schematically illustrates a block diagram of an electronic device adapted to implement an element location method according to an embodiment of the 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 present disclosure. It may be evident, however, that one or more embodiments may be practiced without these specific details. In addition, in the following description, descriptions of well-known structures and techniques are omitted so as not to 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/or 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 should be noted that the terms used herein should be construed to have meanings consistent with the context of the present specification and should not be construed in an idealized or overly formal manner.
Where a convention analogous to "at least one of A, B and C, etc." is used, in general such a convention should be interpreted in accordance with the meaning of one of skill in the art having generally understood the convention (e.g., "a system having at least one of A, B and C" would include, but not be limited to, systems having 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 formulation similar to at least one of "A, B or C, etc." is used, in general such a formulation should be interpreted in accordance with the ordinary understanding of one skilled in the art (e.g. "a system with at least one of A, B or C" would include but not be limited to systems with 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 have found that the image plug-ins provided in the related art are generally used to provide corresponding functions, but do not provide a location update function. For example, the pinchzoom plug-in is used to provide image scaling, but the pinchzoom plug-in does not provide location update functionality. If the position updating function is not provided, the element 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 the element set on the image during the operation, if the position information cannot be obtained in real time, the actual requirement cannot be satisfied. In the following, an example of image scaling will be described in which the actual demand cannot be satisfied. Based on the image scaling implemented by pinchzoom plugins, the elements on the image will also scale during the image scaling process. In other words, the size of the element cannot be kept unchanged. For the element to be an anchor, the anchor is required to remain unchanged in size during image scaling. This is because multiple anchor points may be set on the image, and the anchor points may be used to jump to a corresponding designated location by clicking on an anchor point, for example, a detail page link where a certain anchor point is used to characterize a certain sofa, and the user may jump to a detail page of the sofa by clicking on the anchor point. If the anchor size also scales with image scaling, then the problem may occur that multiple anchors pile up together and are not easily identifiable. If the size of the anchor point is kept unchanged in the image scaling process, the problems can be avoided, and the actual requirements are further met. If the anchor point size remains unchanged during image scaling, location information needs to be acquired in real time.
To meet the actual demand, it is necessary to implement the position update of the element set on the image.
The embodiment of the disclosure provides an element position update, an element position update device and electronic equipment capable of applying the element position update method. The method includes an element location update process. In the element updating process, a target image is displayed, wherein an element is arranged on the target image, the element is provided with position information used for representing the position of the element on the target image, under the condition that the operation body is detected to operate the target image, initial position information and end position information of the position of the operation body on the target image are obtained, position change information of the target image is determined according to the initial position information and 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.
Fig. 1 schematically illustrates an exemplary system architecture 100 in which element location update methods may be applied according to embodiments of the present disclosure. It should be noted that fig. 1 is only an example of a system architecture to which embodiments of the present disclosure may be applied to assist those skilled in the art in understanding the technical content of the present disclosure, but does not mean that embodiments of the present disclosure may not be used in other devices, systems, environments, or scenarios.
As shown in fig. 1, a system architecture 100 according to this embodiment may include terminal devices 101, 102, 103, a network 104, and a server 105. The network 104 is used as a medium to provide communication links between the terminal devices 101, 102, 103 and the server 105. The network 104 may include various connection types, such as wired and/or wireless communication links, and the like.
The user may interact with the server 105 via the network 104 using the terminal devices 101, 102, 103 to receive or send messages or the like. Various communication client applications may be installed on the terminal devices 101, 102, 103, such as shopping class applications, web browser applications, search class applications, instant messaging tools, mailbox clients and/or social platform software, to name a few.
The terminal devices 101, 102, 103 may be a variety of electronic devices having a display screen and supporting web browsing, including but not limited to smartphones, tablets, laptop and desktop computers, and the like.
The server 105 may be a server providing various services, such as a background management server (by way of example only) providing support for websites browsed by users using the terminal devices 101, 102, 103. The background management server may analyze and process the received data such as the user request, and feed back the processing result (e.g., the web page, information, or data obtained or generated according to the user request) to the terminal device.
It should be noted that, the element position updating method provided by the embodiment of the present disclosure may also be performed by the terminal device 101, 102, or 103, or may also be performed by other terminal devices different from the terminal device 101, 102, or 103. Accordingly, the element position updating apparatus provided by the embodiments of the present disclosure may also be provided 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 devices 101, 102, or 103 (for example, but not limited to, the terminal device 101), or stored on an external storage device and may be imported into the terminal device 101. Then, the terminal device 101 may locally perform the element position update method provided by the embodiment of the present disclosure, or transmit the target image to other terminal devices, servers, or server clusters, and perform the element position update method provided by the embodiment of the present disclosure by the other terminal devices, servers, or server clusters that receive 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 illustrates a flow chart of an element position updating 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 displayed, wherein an element is disposed on the target image, the element having position information for characterizing a position of the element on the target image.
In embodiments of the present disclosure, a target image located on a page may be presented. Elements are disposed on the target image, and the elements may include anchor points and non-anchor points. The location information of the element may characterize the location of the element on the target image. Fig. 3 schematically illustrates a schematic diagram of a target image according to an embodiment of the present disclosure.
As shown in fig. 3, three anchors, namely an anchor 1, an anchor 2 and an anchor 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 detail page by clicking on the anchor point. 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 illustrates a schematic diagram of a detail page corresponding to an anchor point according to an embodiment of the present disclosure.
In operation S220, in the case where it is detected that the operation body operates the target image, initial position information and end position information of the position of the operation body on the target image are acquired.
In the embodiment of the present disclosure, in order to realize the position update of the element, it is necessary to acquire the position information of the operation body on the target image in the case where the operation body is detected to operate the target image. The operation body may include a finger or a stylus. The manipulation body manipulating the target image may include a zoom manipulation of the target image by the manipulation body or a movement manipulation of the target image by the manipulation body.
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 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 the image scaling event is triggered, and accordingly, the operation body operates the target image as the operation body to perform scaling operation on the target image. If a pressing point is formed on the page, it can be determined that the image movement event is triggered, and accordingly, the operation body operates the target image as the operation body to perform movement operation on the target image. If the operator is a finger, the image zoom event may be triggered by a two-finger contact target image and the image move event may be triggered by a single-finger contact target image.
When the operation body operates the target image, an operation locus is generally formed, and at this time, initial position information of the operation body at an initial position of the operation locus and end position information at an end position may be acquired. The initial position is usually the position corresponding to the operation body when the operation body just contacts the target image, and the end position is usually the position corresponding to the operation body when the operation body leaves 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 operation 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 based on 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 termination coordinate according to the initial coordinate and the termination coordinate of the operation body on the target image, and determining position change information of the target image according to the distance information.
After the position change information of the target image is obtained, the position information of the new position of the element on the target image, that is, the new position information of the element on the target image, can be determined according to the position change information and the position information of the position of the element on the target image, which can be considered as the initial position information of the element on the target image.
The scaling operation is performed on the target image with respect to the operation body, and the operation body may include a first operation body and a second operation body, wherein initial coordinates of the operation body on the target image may include initial coordinates of the first operation body on the target image and initial coordinates of the second operation body on the target image, that is, initial coordinates of the first operation body and initial coordinates of the second operation body. The termination coordinates of the operation body on the target image may include termination coordinates of the first operation body on the target image and termination coordinates of the second operation body on the target image, i.e., termination coordinates of the first operation body and termination coordinates of the second operation body.
In the case that the scaling operation of the object image by the operation body is detected, 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 object image may include: determining an initial distance between the first operating body and the second operating body according to the initial coordinates of the first operating body and the initial coordinates of the second operating body, and determining a termination distance between the first operating body and the second operating body according to the termination coordinates of the first operating body and the termination coordinates of the second operating body. Determining the position change information of the target image according to the distance information may include: the ratio of the ending distance and the initial distance is determined as the position change information of the target image. Because the ratio can represent the image contraction and enlargement, the relative position of the element relative to the target image is also scaled by a corresponding size in the image scaling process, the ratio can be multiplied with the initial coordinate of the element on the target image to obtain a new coordinate, and the new coordinate is determined as the new position information of the element on the target image.
The initial coordinates may include an initial abscissa and an initial ordinate, and the ending coordinates may include an ending abscissa and an ending ordinate, for the manipulation body to move the target image.
In the case that the scaling operation of the object image by the operation body is detected, 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 object image may include: and determining the abscissa change information of the operation body according to the initial abscissa and the ending abscissa, and determining the ordinate change information of the operation body according to the initial ordinate and the ending ordinate. Determining the position change information of the target image according to the distance information may include: the abscissa and ordinate change information is determined 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 to be the new position information of the element on the target image.
According to the technical scheme of the embodiment of the disclosure, through displaying the target image, the target image is provided with the element, the element has the position information used for representing the position of the element on the target image, under the condition that the operation body is detected to operate the target image, the initial position information and the end position information of the position of the operation body on the target image are obtained, 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. The initial position information and the end position information of the position of the operating 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 operating body, and the technical problem that the position update of the element arranged on the image is difficult to realize by adopting the related technology is at least partially solved. Further, since updating of the element position is realized, image operations based on the element position can be handled.
Alternatively, 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 operations may be further included.
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 the embodiment of the disclosure, in order to achieve better user experience, it may be ensured that the element is drawn at the same drawing frequency as the page refresh frequency at the position corresponding to the new position information of the element on the target image. The page refresh rate refers to the number of frames that can be displayed per second on the display screen, that is, the number of times that an image on the display screen is updated per second, and the unit is Hz, and the page refresh rate is divided into a page vertical refresh rate and a page horizontal refresh rate, and the page refresh rate generally refers to the page vertical refresh rate. The higher the page refresh 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 is given to the user. It will be appreciated that the page refresh interval = 1/page refresh rate, i.e. if the page refresh rate is 60Hz, the page refresh interval is 16ms, i.e. the page is refreshed every 16 ms. The rendering frequency may be understood as an image generation frequency, which is the number of frames that an image generation device (such as a graphic card) can render per Second, in FPS (FRAMES PER seconds, number of 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 unchanged.
According to the embodiment of the present disclosure, the reason why the better interaction effect can be achieved in the above manner is that: manipulation of the target image by the manipulator causes a change in the position of the target image, from a presentation point of view, such as from position a to position B, but the target image is rendered at different positions from the underlying implementation point, each of which can be understood to be a frame of image. Since the target image is typically presented on a page, image rendering relies on page refresh. Since the element is set on the target image and the positional information of the element can be acquired in real time, the element is 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 affect each other.
Because the page refreshing frequency and the drawing frequency are respectively realized by mutually independent different threads, the matching problem between the page refreshing frequency and the drawing frequency needs to be considered, and if the page refreshing frequency and the drawing frequency are not matched, the phenomena of clamping, picture tearing and the like can occur, so that the use experience of a user can be 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 mark is added to the next frame image, and correspondingly, the preset mark is reflected in a page area where the target image is located in the page, so that when the foreground thread detects that the preset mark exists, the next frame image added with the preset mark 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 of the page) is reached, and if the starting time of updating the next frame image of the page is reached, the image drawing function is called to draw the loaded next frame image on the page and display the next frame image. And if the starting time of the next frame of image of the page update does not reach, asynchronously calling a preset function, so that when the starting time of the next frame of image of the page update is reached, calling an image drawing function to draw the loaded next frame of image on the page and displaying the next frame of image.
According to the embodiment of the disclosure, the elements are drawn at the positions corresponding to the position information of the updated elements on the target image at the same drawing frequency as the page refreshing frequency, so that better user experience is provided.
Optionally, on the basis of the above technical solution, the manipulating body manipulating the target image includes the manipulating body performing a zooming operation on 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 view of a zoom-out of a target image by an operation body according to an embodiment of the present disclosure. Fig. 6 schematically illustrates a schematic diagram of an operation body enlarging a target image according to an embodiment of the present disclosure.
Fig. 7 schematically illustrates a schematic view of another target image according to an embodiment of the present disclosure.
Fig. 7 is a target image obtained by the operation body performing the reduction operation on the target image shown in fig. 3. As can be seen from fig. 3 and 7, the sizes in scaling the target image by the anchor 1, anchor 2, and anchor 3 operators remain unchanged.
According to an embodiment of the present disclosure, during image magnification, if the maximum boundary is reached, the magnification will be stopped. In the image reduction process, if 0.5 times the minimum boundary is reached, the reduction is stopped, and the flick back to the minimum zoom factor is smoothed.
Optionally, on the basis of the above technical solution, the initial position information of the operation body includes initial coordinates of the first operation body and initial coordinates of the 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.
Determining the position change information of the target image based on the initial position information and the end position information of the operation body may include the following operations.
And determining the 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 the 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. The ratio of the ending distance and the initial distance is determined as the position change information of the target image.
In an embodiment of the present disclosure, the initial coordinates of the first manipulation body may be represented by (x 1,y1), and the final coordinates of the first manipulation body may be represented by (x' 1,y′1). The initial coordinates of the second manipulator may be represented by (x 2,y2) and the final coordinates of the second manipulator may be represented by (x' 2,y′2). The initial distance may be denoted by d 1 and the final distance may be denoted by d 2. The ratio of the ending distance to the starting distance is shown in scale. Based on this, the first and second light sources, scale=d2/d1
On the basis of the above, the position information of the set element on the target image (i.e., the initial position information of the element on the target image) is represented by (X 1,Y1), and 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 2,Y2), wherein X 2=scale·X1,Y2=scale·Y1.
Fig. 8 schematically illustrates a schematic diagram of an element location update according to an embodiment of the present disclosure. The initial position information of the anchor point 4 on the target image in fig. 8 is (20, 10), and the ratio scale=0.5 of the termination distance to the initial distance. Since the ratio scale=0.5 of the termination distance to the initial distance, the size of the current target image is reduced by one time compared with 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 manipulation of the target image by the manipulation body includes a movement manipulation of the target image by the manipulation body. The method may further include the following operations.
When the moving operation of the operating body on the target image is detected, corresponding moving parameters of the operating body when the operating body leaves the target image are acquired, wherein the moving parameters comprise moving speed and 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 a moving operation on the target image, after detecting that the operation body leaves the target image, the speed decay of the target image is not smooth enough, which greatly affects the use experience of the user.
In order to improve the use experience of the user, the target image can realize speed attenuation in an inertial movement mode, and the realization is as follows: under the condition that the operation body is detected to carry out moving operation on the target image, the corresponding moving speed and frame number of the operation body when the operation body leaves the target image are obtained, and the moving speed and frame number are processed by adopting a preset speed attenuation rule to realize inertial movement of the target image, wherein the preset speed attenuation rule can be understood as a rule that the target image carries out speed attenuation by taking the moving speed as an initial speed and preset acceleration.
According to an embodiment of the present disclosure, during inertial movement of the target image, if either 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 speed 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 inertial movement of the target image, wherein the parameters of the preset speed attenuation function comprise an initial speed and acceleration, the initial speed is the movement speed, and the acceleration is determined by a preset resistance coefficient, a preset inertia coefficient and a frame number.
In an embodiment of the present disclosure, in order to implement inertial movement of the target image, a preset speed decay function may be invoked to process the movement parameter implementation. Wherein the preset speed decay function is a function of the initial speed and the acceleration. The parameters of the preset speed decay function can be packaged into a closure environment of JavaScript (i.e., JS).
According to an embodiment of the present disclosure, the acceleration is determined by a preset drag coefficient, a preset inertia coefficient, and a frame number. Wherein the number of frames is a variable and the preset drag coefficient and the preset inertia coefficient are constants. It follows that acceleration is a function of the number of frames. Specific values of the preset drag coefficient and the preset inertia coefficient may be determined according to actual conditions, and are not particularly limited herein. The larger the value of the preset resistance coefficient is, the smaller the inertial movement distance is. Illustratively, if the predetermined drag coefficient is 0, the predetermined inertia coefficient is 30.
According to an embodiment of the present disclosure, acceleration is denoted by a, a preset drag coefficient is denoted by force, and a preset inertia coefficient is denoted by intrtia. Based on this, the determination of the acceleration from the preset drag coefficient, the preset inertia coefficient, and the number of frames may include: a (frame) =e -(force+frame/intrtia).
Optionally, on the basis of the above technical solution, the movement speed is determined by a movement distance, a total movement time, and a movement time per frame, wherein the movement distance is determined by initial position information and end position information of the operation body, and the total movement time is a time that the operation body takes 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 represented by v 0. The moving distance may be represented by d, the initial position information of the operation body may be represented by (x, y), the end position information of the operation body may be represented by (x ', y'), and the total moving time may be represented by t. The per frame movement time may be represented by framespeed. Acceleration is denoted by a and the preset speed decay function is denoted by v. The preset drag coefficient is denoted by force and the preset inertia coefficient is denoted by intrtia.
Based on the above, the moving speed determination by the moving distance, the total moving time, and the moving time per frame may include: the preset velocity decay function v (d, t, frame) =v 0 (d, t) a (frame), v representing the moving velocity of the target image corresponding to the frame number.
According to an embodiment of the present disclosure, after detecting that the operation body leaves the target image, the target image is attenuated by v (d, t, frame) =v 0 (d, t) a (frame) until the velocity is 0, i.e., v (d, t, frame) =v 0 (d, t) a (frame) is repeatedly called until the velocity becomes 0.
It should be noted that if the drawing frequency is the same as the page refresh frequency, the per-frame movement time may be set to 17.
According to the embodiment of the disclosure, the inertial movement of the target image can be realized by the preset speed attenuation function, so that the movement of the target image is more natural, and 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 object image by the operation body is detected, the drawing of the object image is stopped to interrupt the inertial movement of the object image.
In the embodiment of the disclosure, in order to further improve the use experience of the user, when the interruption operation of the operation body on the target image is detected, the drawing of the target image may be stopped, so as to realize interruption of the inertial motion of the target image. Wherein, the interrupt operation of the operation body to the target image can be triggered by the operation body touching the target image again.
According to the embodiment of the present disclosure, the reason why the inertial movement of the interruption target image can be achieved is that: since the underlying logic that implements image movement is to draw the target image at a different position on the page at a certain drawing frequency, if an image movement interrupt operation is detected, it can be implemented by stopping drawing the next frame image (i.e., the target image at the next position).
Alternatively, on the basis of the above technical solution, after acquiring the initial position information and the end position information of the position of the operating body on the target image, the method may further include the following operations.
And adding the initial position information and the end position information of the operation body to a task queue.
Determining the position change information of the target image based on the initial position information and the end position information of the operation body may include the following operations.
And when each element is drawn, acquiring initial position information and end position information of the operation body from the task queue. Position change information of the target image is determined based on the initial position information and the end position information of the operation body.
In the embodiment of the present disclosure, since element drawing is a time-consuming event, in order to reduce time consumption, initial position information and end position information of an operation body formed when operating a target image may be added to a task queue. At each element drawing time, initial position information and end position of the operating body can be obtained from the task queue based on the JS callback function.
Fig. 9 schematically illustrates a flow chart of another element position updating method according to an embodiment of the present disclosure.
As shown in fig. 9, the method includes operations S901 to S910.
In operation S901, a target image is displayed, wherein an element is disposed on the target image, the element has position information for characterizing a position of the element on the target image, the element includes an anchor point, and a size of the anchor point remains unchanged during a scaling operation.
In operation S902, whether the operator performs a zoom operation on the target image; if yes, executing operation S903; if not, operation S902 is returned to be executed.
In operation S903, initial position information and end position information of a position of an operation body on a target image are acquired, 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 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 end position information of the operation body 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 at each element drawing.
In operation S906, an initial distance between the first operation body and the second operation body is determined according to the initial coordinates of the first operation body and the initial coordinates of the second operation body.
In operation S907, a termination distance between the first operation body and the second operation body is determined based on the termination coordinates of the first operation body and the termination coordinates of the second operation 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 updated position information of the element on the target image.
According to the technical scheme of the embodiment of the disclosure, through displaying the target image, the target image is provided with the element, the element has the position information used for representing the position of the element on the target image, under the condition that the scaling operation of the operation body on the target image is detected, the initial position information and the end position information of the position of the operation body on the target image are obtained, the initial position information and the end position information of the operation body are added to the task queue, when each element is drawn, the initial position information and the end position information of the operation body are obtained from the task queue, 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. The initial position information and the end position information of the position of the operating 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 operating body, and the technical problem that the position update of the element arranged on the image is difficult to realize by adopting the related technology is at least partially solved. Since the initial position information and the end position information of the operation body formed when the target image is operated 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 at the same drawing frequency as the page refreshing frequency, so that better user experience is provided. In addition, since updating of the element position is realized, other image operations based on the element position can be dealt with.
Fig. 10 schematically illustrates a flow chart of yet another element position updating method according to 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 displayed, wherein an element is disposed on the target image, the element having position information for characterizing a position of the element on the target image.
In operation S1002, the operator performs a moving operation on a target image; if yes, operation S1003 is performed; if not, operation S1002 is returned to be executed.
In operation S1003, initial position information and end position information of a position of the operation body 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 an operation body are acquired from a task queue at each element drawing.
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 operation body leaves the target image; if yes, operation S1009 is performed; if not, operation S1008 is returned to be executed.
In operation S1009, a movement parameter corresponding to the operation body when leaving the target image is acquired, wherein the movement parameter includes a movement speed and a frame number.
In operation S1010, a preset speed decay function is invoked to process movement parameters to realize inertial movement of the target image, wherein the parameters of the preset speed decay function include an initial speed and an acceleration, wherein the initial speed is a movement speed, and the acceleration is determined by a preset resistance coefficient, a preset inertia coefficient and a frame number.
In operation S1011, the operator performs an interrupt operation on the target image; if yes, then execution S1012; if not, the operation returns to the execution operation S1011.
In operation S1012, drawing of the target image is stopped to interrupt inertial movement of the target image.
According to the technical scheme of the embodiment of the disclosure, through displaying the target image, the target image is provided with the element, the element has the position information used for representing the position of the element on the target image, under the condition that 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 obtained, the initial position information and the end position information of the operation body are added to the task queue, when each element is drawn, the initial position information and the end position information of the operation body are obtained from the task queue, 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. Under the condition that the operating body leaves the target image is detected, the corresponding movement parameters of the operating body when the operating body leaves the target image are acquired, and the preset speed attenuation function is called to process the movement parameters so as to realize the inertial movement of the target image. When the interruption operation of the object image by the operation body is detected, the drawing of the object image is stopped to interrupt the inertial movement of the object image. The initial position information and the end position information of the position of the operating 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 operating body, and the technical problem that the position update of the element arranged on the image is difficult to realize by adopting the related technology is at least partially solved. Since the initial position information and the end position information of the operation body formed when the target image is operated 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 at the same drawing frequency as the page refreshing frequency, so that better user experience is provided. The inertial movement of the target image can be realized by the preset speed attenuation function, so that the movement of the target image is more natural, and the use experience of a user is greatly improved. In addition, since the updating of the element position is realized, other image operations based on the element position can be dealt with.
Fig. 11 schematically illustrates a block diagram of an element position updating apparatus according to an embodiment of the present disclosure.
As shown in fig. 11, the element position updating apparatus 1100 may include a presentation module 1110, a first acquisition module 1120, a determination 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 coupled.
The display module 1110 is configured to display a target image, where an element is disposed on the target image, and the element has location information for characterizing a location of the element on the target image.
The first acquiring module 1120 is configured to acquire initial position information and end position information of a position of the operating body on the target image when the operating body is detected to operate the target image.
A determining module 1130, configured to determine position change information of the target image according to the initial position information and the end position information of the operation body.
An updating module 1140 is configured to update the location information of the element on the target image according to the location change information.
According to the technical scheme of the embodiment of the disclosure, through displaying the target image, the target image is provided with the element, the element has the position information used for representing the position of the element on the target image, under the condition that the operation body is detected to operate the target image, the initial position information and the end position information of the position of the operation body on the target image are obtained, 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. The initial position information and the end position information of the position of the operating 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 operating body, and the technical problem that the position update of the element arranged on the image is difficult to realize by adopting the related technology is at least partially solved. Further, since updating of the element position is realized, image operations based on the element position can be handled.
Optionally, on the basis of the foregoing technical solution, the element location updating apparatus 1100 may further include:
and a drawing module for drawing the element at the same drawing frequency as the page refresh frequency at a position corresponding to the updated position information of the element on the target image.
Optionally, on the basis of the above technical solution, the manipulating body manipulating the target image includes the manipulating body performing a zooming operation on the target image. The elements include anchor points whose size remains unchanged during the scaling operation.
Optionally, on the basis of the above technical solution, the initial position information of the operation body includes initial coordinates of the first operation body and initial coordinates of the 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 determination module 1130 may include a first determination unit, a second determination unit, and a third determination unit.
And a first determining unit for determining an initial distance between the first operating body and the second operating body according to the initial coordinates of the first operating body and the initial coordinates of the second operating body.
And a second determining unit configured to determine a termination distance between the first operating body and the second operating body based on the termination coordinates of the first operating body and the termination coordinates of the second operating body. And
And a third determining unit for determining a ratio of the ending distance and the initial distance as the position change information of the target image.
Optionally, on the basis of the above technical solution, the manipulating body manipulating the target image includes a manipulating body performing a moving manipulation on the target image.
The element position updating apparatus 1100 may further include a second acquisition module.
And the second acquisition module is used for acquiring the corresponding movement parameters of the operating body when the operating body leaves the target image under the condition that the operating body is detected to carry out movement operation on 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.
Alternatively, on the basis of the above technical solution, the processing module may include a processing unit.
The processing unit is used for 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 acceleration, the initial speed is the movement speed, and the acceleration is determined by a preset resistance coefficient, a preset inertia coefficient and a frame number.
Optionally, on the basis of the above technical solution, the movement speed is determined by a movement distance, a total movement time, and a movement time per frame, wherein the movement distance is determined by initial position information and end position information of the operation body, and the total movement time is a time that the operation body takes from a position corresponding to the initial position information to a position corresponding to the end position information.
Optionally, on the basis of the foregoing technical solution, the element location updating apparatus 1100 may further include:
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 operation body on the target image is detected.
Optionally, on the basis of the foregoing technical solution, the element location updating apparatus 1100 may further include:
and the storage module is used for adding the initial position information and the end 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 end position information of the operation body from the task queue when each element is drawn.
And a fourth determining unit for determining the position change information of the target image based on the initial position information and the end position information of the operation body.
Any number of the modules, units, or at least some of the functionality of any number of the modules, units, or units according to embodiments of the present disclosure may be implemented in one module. Any one or more of the modules, units according to embodiments of the present disclosure may be implemented as split into multiple modules. Any one or more of the modules, units, or the like according to embodiments of the present disclosure may be implemented at least in part as a hardware Circuit, such as a field programmable gate array (Field Programmable GATE ARRAY, FPGA), a programmable logic array (Programmable Logic Arrays, PLA), a system-on-a-chip, a system-on-a-substrate, a system-on-a-package, an Application SPECIFIC INTEGRATED Circuit (ASIC), or in any other reasonable manner of hardware or firmware that integrates or encapsulates the Circuit, or in any one of or in any suitable combination of three of software, hardware, and firmware. Or one or more of the modules, units according to embodiments of the present disclosure may be at least partially implemented as computer program modules which, when executed, may perform the corresponding functions.
For example, any of the presentation module 1110, the first acquisition module 1120, the determination module 1130, and the update module 1140 may be combined in one module/unit to be implemented, or any of the modules/units may be split into multiple modules/units. Or at least some of the functionality of one or more of the modules/units may be combined with, and implemented in, at least some of the functionality of other modules/units. At least one of the presentation module 1110, the first acquisition module 1120, the determination module 1130, and the update module 1140 may be implemented at least in part as hardware circuitry, 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 way of integrating or packaging circuitry, or in any one of or a suitable combination of three of software, hardware, and firmware, according to embodiments of the present disclosure. Or at least one of the presentation module 1110, the first acquisition module 1120, the determination module 1130, and the update module 1140 may be at least partially implemented as a computer program module that, when executed, performs the corresponding functions.
It should be noted that, in the embodiment of the present disclosure, the element position updating device portion corresponds to the element position updating method portion in the embodiment of the present disclosure, and the description of the element position updating device portion specifically refers to the element position updating method portion and is not described herein.
Fig. 12 schematically shows a block diagram of an electronic device adapted to implement the method described above, according to an embodiment of the disclosure. The electronic device shown in fig. 12 is merely an example and should not be construed to limit the functionality and scope of use of the disclosed embodiments.
As shown in fig. 12, the electronic device 1000 according to the 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 (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 an associated chipset and/or special purpose microprocessor (e.g., an Application Specific Integrated Circuit (ASIC)), or the like. 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 disclosure.
In the RAM 1203, various programs and data required for the operation of the system 1000 are stored. The processor 1201, the ROM 1202, and the RAM 1203 are connected to each other through 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 RAM 1203. Note that the program may 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 the method flow according to embodiments of the present disclosure by executing programs stored in the one or more memories.
According to an embodiment of the present disclosure, the system 1000 may further include an input/output (I/O) interface 1205, the input/output (I/O) interface 1205 also being connected to the 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 Cathode Ray Tube (CRT), a Liquid crystal display (Liquid CRYSTAL DISPLAY, LCD), and a speaker, etc.; a storage section 1208 including a hard disk or 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. The drive 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 installed as needed on the drive 1210 so that a computer program read out therefrom is installed into the storage section 1208 as needed.
According to embodiments of the present disclosure, the method flow according to embodiments of the present disclosure may be implemented as a computer software program. 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 comprising program code for performing the method shown in the flowcharts. In such an embodiment, the computer program can be downloaded and installed from a network via the communication portion 1209, and/or installed from the removable media 1211. The above-described functions defined in the system of the embodiments of the present disclosure are performed when the computer program is executed by the processor 1201. The systems, devices, apparatus, modules, units, etc. described above may be implemented by computer program modules according to embodiments of the disclosure.
The present disclosure also provides a computer-readable storage medium that may be embodied in the apparatus/device/system described in the above embodiments; or may exist alone without being assembled into the apparatus/device/system. The computer-readable storage medium carries one or more programs which, when executed, implement methods in accordance with embodiments of the present disclosure.
According to embodiments 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: portable computer diskette, hard disk, random Access Memory (RAM), read-Only Memory (ROM), erasable programmable read-Only Memory (EPROM (Erasable Programmable Read Only Memory) or flash Memory), portable compact disc read-Only Memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination of the foregoing. In the context of this 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, the 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 flowcharts 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 the features recited in the various embodiments of the disclosure and/or in the claims may be combined in various combinations and/or combinations, even if such combinations or combinations are not explicitly recited in the disclosure. In particular, the features recited in the various embodiments of the present disclosure and/or the claims may be variously combined and/or combined without departing from the spirit and teachings of the present disclosure. All such combinations and/or combinations fall within the scope of the present disclosure.
The embodiments of the present disclosure are described above. These examples are for illustrative purposes only and are not intended to limit the scope of the present disclosure. Although the embodiments are described above separately, this does not mean that the measures in the embodiments cannot be used advantageously in combination. The scope of the disclosure is defined by the appended claims and equivalents thereof. Various alternatives and modifications can be made by those skilled in the art without departing from the scope of the disclosure, and such alternatives and modifications are intended to fall within the scope of the disclosure.

Claims (11)

1. A method of element location updating, comprising:
Displaying a target image, wherein an element is arranged on the target image, and the element is provided with position information for representing the position of the element on the target image;
Acquiring initial position information and end position information of a position of an operation body on the target image under the condition that the operation body is detected to operate the target image, wherein the operation body operates the target image comprises the operation body moving the target image;
Determining position change information of the target image according to the initial position information and the end position information of the operating body;
updating the position information of the element on the target image according to the position change information;
the method further comprises the steps of:
Under the condition that the operation body is detected to carry out moving operation on the target image, obtaining a corresponding moving parameter of the operation body when the operation body leaves the target image, wherein the moving parameter comprises a moving speed and a frame number; and
And processing the movement parameters by using a preset speed attenuation rule to realize inertial movement of the target image, wherein the preset speed attenuation rule is a rule that the target image takes the movement speed as an initial speed and carries out speed attenuation by acceleration.
2. The method of claim 1, wherein after the updating of the location information of the element on the target image according to the location change information, further comprising:
and drawing the element at the position corresponding to the updated position information of the element on the target image at the drawing frequency which is the same as the page refresh frequency.
3. The method of claim 1, wherein the manipulation of the target image by the manipulation body comprises a scaling operation of the target image by the manipulation body; the element includes an anchor point whose size remains unchanged during the scaling operation.
4. The method according to 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 operating body includes:
Determining an initial distance between the first operating body and the second operating body according to the initial coordinates of the first operating body and the initial coordinates of the second operating body;
determining a termination distance between the first operating body and the second operating body according to the termination coordinates of the first operating body and the termination coordinates of the second operating 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 processing the movement parameters using a preset speed decay rule to effect 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 the initial speed and the 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.
6. The method according to claim 5, wherein the movement speed is determined by a movement distance, a total movement time, and a movement time per frame, wherein the movement distance is determined by initial position information and end position information of the operation body, and the total movement time is a time that the operation body takes from a position corresponding to the initial position information to a position corresponding to the end position information.
7. The method of claim 1, further comprising:
and stopping drawing the target image to interrupt inertial movement of the target image under the condition that the operation body is detected to interrupt the operation of the target image.
8. The method according to any one of claims 1 to 7, further comprising, after the acquiring initial position information and end position information of a position of the operation body on the target image:
Adding the initial position information and the end position information of the operation body to a task queue;
the determining the position change information of the target image according to the initial position information and the end position information of the operating body includes:
Acquiring initial position information and end position information of the operation body from the task queue when drawing elements each time; and
And determining the position change information of the target image according to the initial position information and the end position information of the operating body.
9. An element position updating apparatus comprising:
The display module is used for displaying a target image, wherein an element is arranged on the target image, and the element is provided with position information for representing the position of the element on the target image;
The first acquisition module is used for acquiring initial position information and end 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, wherein the operating body operates the target image and comprises moving operation of the operating body on 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;
The updating module is used for updating the position information of the element on the target image according to the position change information;
The second acquisition module is used for acquiring a movement parameter corresponding to the operating body when the operating body leaves the target image under the condition that the operating body moves the target image, wherein the movement parameter comprises a movement speed and a frame number; and
And the processing module is used for processing the movement parameters by using a preset speed attenuation rule so as to realize the inertial movement of the target image, wherein the preset speed attenuation rule is a rule that the target image takes the movement speed as an initial speed and carries out speed attenuation by acceleration.
10. 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-8.
11. A computer readable storage medium having stored thereon executable instructions which when executed by a processor cause the processor to implement the method of any of claims 1 to 8.
CN202011121024.4A 2020-10-19 2020-10-19 Element position updating method and device, electronic equipment and storage medium Active CN113763459B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011121024.4A CN113763459B (en) 2020-10-19 2020-10-19 Element position updating method and device, electronic equipment and storage medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011121024.4A CN113763459B (en) 2020-10-19 2020-10-19 Element position updating method and device, electronic equipment and storage medium

Publications (2)

Publication Number Publication Date
CN113763459A CN113763459A (en) 2021-12-07
CN113763459B true CN113763459B (en) 2024-06-18

Family

ID=78785967

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011121024.4A Active CN113763459B (en) 2020-10-19 2020-10-19 Element position updating method and device, electronic equipment and storage medium

Country Status (1)

Country Link
CN (1) CN113763459B (en)

Family Cites Families (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7634354B2 (en) * 2005-08-31 2009-12-15 Microsoft Corporation Location signposting and orientation
TW200836128A (en) * 2007-02-16 2008-09-01 Yu-Lu Lin Display method of synchronous image zooming
JP5387366B2 (en) * 2009-11-26 2014-01-15 ソニー株式会社 Information processing apparatus, information processing method, and program
CN105094651A (en) * 2014-05-04 2015-11-25 联想(北京)有限公司 Information processing method and information processing equipment
EP3448462A1 (en) * 2016-04-28 2019-03-06 Novo Nordisk A/S Accessory device with zero position adjustment feature
CN108318043B (en) * 2017-12-29 2020-07-31 百度在线网络技术(北京)有限公司 Method, apparatus, and computer-readable storage medium for updating electronic map
CN110662015A (en) * 2018-06-29 2020-01-07 北京京东尚科信息技术有限公司 Method and apparatus for displaying image
CN109741397B (en) * 2019-01-04 2022-06-07 京东方科技集团股份有限公司 Picture marking method and device, computer equipment and readable storage medium
CN111311756B (en) * 2020-02-11 2023-04-11 Oppo广东移动通信有限公司 Augmented reality AR display method and related device

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
HTML5 Canvas绘图技术及其在图像裁剪中的应用研究;刘耀钦;;洛阳师范学院学报;20161125(11);全文 *
视频三维运动捕获***中多运动目标跟踪方法;晏剑云;郑江滨;;微电子学与计算机;20080805(08);全文 *

Also Published As

Publication number Publication date
CN113763459A (en) 2021-12-07

Similar Documents

Publication Publication Date Title
US8640047B2 (en) Asynchronous handling of a user interface manipulation
US9383917B2 (en) Predictive tiling
CN107204023B (en) Method and apparatus for avoiding distortion of graphics drawn in canvas
US9037957B2 (en) Prioritizing asset loading in multimedia application
CN108961165B (en) Method and device for loading image
US9135885B2 (en) Resolution independent client side rendering
CN109669617B (en) Method and device for switching pages
CN111291244B (en) House source information display method, device, terminal and storage medium
CN113536173B (en) Page processing method and device, electronic equipment and readable storage medium
CN112954441B (en) Video editing and playing method, device, equipment and medium
CN111767100A (en) Image processing method, device, system and medium applied to browser
CN111796825B (en) Bullet screen drawing method, bullet screen drawing device, bullet screen drawing equipment and storage medium
CN113763459B (en) Element position updating method and device, electronic equipment and storage medium
CN109416638B (en) Customizable compact overlay window
CN113204299B (en) Display method, display device, electronic equipment and storage medium
CN109739403B (en) Method and apparatus for processing information
CN109190097B (en) Method and apparatus for outputting information
CN113835791B (en) Method and apparatus for presenting hierarchical relationships of view components
CN113726948B (en) Picture display method and device
CN114510309B (en) Animation effect setting method, device, equipment and medium
CN111782112B (en) Method and apparatus for presenting images
CN112380821B (en) Graphic display method and device and electronic equipment
CN114995738B (en) Transformation method, transformation device, electronic equipment, storage medium and program product
CN112306339B (en) Method and apparatus for displaying image
CN117453075A (en) Display control method, display control device, electronic equipment and storage medium

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant