An element rendering method, device, equipment and computer readable storage medium

Abstract

The application discloses an element rendering method, comprising the following steps: obtaining initial element coordinates of a target element to be dragged, and initializing horizontal velocity and vertical velocity of the target element; mounting the initial element coordinates and the element velocity initialization result to a pre-created inertia instance object, and setting a state of the target element as being in a dragging process; calculating a mouse speed according to a mouse position and a corresponding first dragging time difference recorded in real time during the dragging process; calculating a mouse rotation angular speed according to a mouse rotation angle and a corresponding second dragging time difference recorded in real time during the dragging process; and rendering a position of the target element in combination with the mouse speed, the mouse rotation angular speed and relative speed and relative rotation angular speed of the mouse and the target element displayed by the inertia instance object. The application realizes creation of a transition animation when the target element is dragged, so that the dragging process is more natural and conforms to human intuition. The application also discloses a device, equipment and storage medium, which have corresponding technical effects.

Description

Technical Field

[0001] This invention relates to the field of rendering technology, and in particular to an element rendering method, apparatus, device, and computer-readable storage medium. Background Technology

[0002] In recent years, visualization has become increasingly popular, with many newspapers, magazines, portals, news outlets, and media outlets making extensive use of visualization techniques to make complex data and text much easier to understand. Drag and drop is a very common interaction method, ubiquitous across various platforms. On the interfaces of mobile devices, PCs, and game consoles, drag and drop has become an indispensable form of human-computer interaction.

[0003] HTML5 natively supports drag and drop, allowing users to grab any element and drag it to different locations. Most drag-and-drop interactions in web applications are based on this feature. The drawback of this element rendering method is that the animation is rather abrupt; there's a lack of transition as the element is dragged from its starting position to its target position, which doesn't conform to physical laws or human intuition.

[0004] In summary, how to effectively solve the problems of stiff animation in existing element rendering methods, lack of transition when elements are dragged from the starting position to the target position, and non-compliance with physical laws and human intuition are urgent issues that need to be addressed by those skilled in the art. Summary of the Invention

[0005] The purpose of this invention is to provide an element rendering method that creates transition animations when dragging a target element, making the dragging process more natural and intuitive. Another purpose of this invention is to provide an element rendering device, apparatus, and computer-readable storage medium.

[0006] To solve the above-mentioned technical problems, the present invention provides the following technical solution:

[0007] An element rendering method, comprising:

[0008] Obtain the initial element coordinates of the target element to be dragged in the Cartesian coordinate system, and initialize the horizontal and vertical velocities of the target element to obtain the element velocity initialization result;

[0009] The initial element coordinates and the initial element velocity are attached to the pre-created inertial instance object, and the state of the target element is set to dragging.

[0010] The mouse speed is calculated based on the real-time recorded mouse position during the dragging process and the corresponding first dragging time difference;

[0011] The mouse rotation angular velocity is calculated based on the real-time recorded mouse rotation angle and the corresponding second drag time difference during the dragging process;

[0012] The position of the target element is rendered by combining the mouse speed, the mouse rotation angular velocity, and the relative speed and relative rotation angular velocity of the mouse displayed by the inertial instance object with the target element.

[0013] In one specific embodiment of the present invention, before obtaining the initial element coordinates of the target element to be dragged in the Cartesian coordinate system, the method further includes:

[0014] Select the target element using the d3-selection module in the D3.js visualization tool;

[0015] A target drag event is created using the d3-drag module in the D3.js visualization tool, and the target drag event is bound to the target element.

[0016] The animation content of the target element is managed using the d3-timer timer in the D3.js visualization tool.

[0017] In one specific embodiment of the present invention, before selecting the target element using the d3-selection module in the D3.js visualization tool, the method further includes:

[0018] The d3-selection module releases the originally selected element;

[0019] Unbind the original selected element from the original drag event of the d3-drag module;

[0020] Set the d3-timer timer, which was originally used to manage the animation content of the originally selected element, to a stopped state.

[0021] In one specific embodiment of the present invention, initializing the lateral and longitudinal velocities of the target element includes:

[0022] The horizontal and vertical velocities of the target element are both initialized to 0.

[0023] In one specific embodiment of the present invention, attaching the initial element coordinates and the element velocity initialization result to a pre-created inertial instance object includes:

[0024] The initial element coordinates and the initial element velocity results are mounted to the pre-created inertial instance object in an array manner.

[0025] In one specific embodiment of the present invention, after rendering the position of the target element by combining the mouse speed, the mouse rotation angular velocity, and the relative speed and relative rotation angular velocity between the mouse displayed by the inertial instance object and the target element, the method further includes:

[0026] Determine whether the preset stop boundary conditions have been met;

[0027] If so, clear the drag state;

[0028] If not, repeat the step of calculating the mouse speed based on the mouse position recorded in real time during the dragging process and the corresponding first dragging time difference.

[0029] In one specific embodiment of the present invention, the position rendering of the target element is performed by combining the mouse speed, the mouse rotation angular velocity, and the relative speed and relative rotation angular velocity between the mouse displayed by the inertial instance object and the target element, including:

[0030] By combining the mouse speed, the mouse rotation angular velocity, and the relative speed and relative rotation angular velocity of the mouse displayed by the inertial instance object with the target element, the rendering method is repeatedly called to render the position of the target element using tweening parameters from 0 to 1.

[0031] An element rendering device, comprising:

[0032] The element initialization unit is used to obtain the initial element coordinates of the target element to be dragged in the Cartesian coordinate system, and initialize the horizontal and vertical velocities of the target element to obtain the element velocity initialization result.

[0033] The mounting unit is used to mount the initial element coordinates and the element velocity initialization result to the pre-created inertial instance object, and to set the state of the target element to dragging.

[0034] The mouse speed calculation unit is used to calculate the mouse speed based on the mouse position recorded in real time during the dragging process and the corresponding first dragging time difference;

[0035] The mouse rotation angular velocity calculation unit is used to calculate the mouse rotation angular velocity based on the mouse rotation angle recorded in real time during the dragging process and the corresponding second dragging time difference;

[0036] The element rendering unit is used to render the position of the target element by combining the mouse speed, mouse rotation angular velocity, and the relative speed and relative rotation angular velocity of the mouse displayed by the inertial instance object with the target element.

[0037] An element rendering device, comprising:

[0038] Memory, used to store computer programs;

[0039] A processor for implementing the element rendering method as described above when executing the computer program.

[0040] A computer-readable storage medium storing a computer program that, when executed by a processor, implements the steps of the element rendering method as described above.

[0041] The element rendering method provided by this invention obtains the initial element coordinates of the target element to be dragged in the Cartesian coordinate system, initializes the horizontal and vertical velocities of the target element to obtain the element velocity initialization result; attaches the initial element coordinates and element velocity initialization result to a pre-created inertial instance object, and sets the state of the target element to dragging; calculates the mouse velocity based on the mouse position recorded in real time during the dragging process and the corresponding first dragging time difference; calculates the mouse rotation angular velocity based on the mouse rotation angle recorded in real time during the dragging process and the corresponding second dragging time difference; and renders the position of the target element by combining the mouse velocity, mouse rotation angular velocity, and the relative velocity and relative rotation angular velocity between the mouse and the target element displayed by the inertial instance object.

[0042] As described in the above technical solution, the mouse speed is calculated by recording the mouse position in real time during the dragging process and the corresponding first dragging time difference. The mouse rotation angle is calculated based on the mouse rotation angle recorded in real time during the dragging process and the corresponding second dragging time difference. The position of the target element is rendered by combining the mouse speed, mouse rotation angle, and the relative speed and relative rotation angle displayed between the mouse and the target element using a pre-created inertial instance object. This achieves the creation of transition animations when dragging the target element, making the dragging process more natural and intuitive. The target element's movement has a certain time delay relative to the mouse, simulating dragging in the real physical world, resulting in a realistic effect.

[0043] Accordingly, the present invention also provides an element rendering apparatus, device, and computer-readable storage medium corresponding to the above-described element rendering method, which have the aforementioned technical effects, and will not be elaborated further here. Attached Figure Description

[0044] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0045] Figure 1 This is a flowchart illustrating one implementation of the element rendering method in this invention.

[0046] Figure 2 This is a flowchart illustrating another implementation of the element rendering method in this invention.

[0047] Figure 3 This is a structural block diagram of an element rendering device according to an embodiment of the present invention;

[0048] Figure 4 This is a structural block diagram of an element rendering device according to an embodiment of the present invention;

[0049] Figure 5 This is a schematic diagram of the specific structure of an element rendering device provided in this embodiment. Detailed Implementation

[0050] To enable those skilled in the art to better understand the present invention, the invention will be further described in detail below with reference to the accompanying drawings and specific embodiments. Obviously, the described embodiments are merely some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0051] See Figure 1 , Figure 1 This is a flowchart illustrating one implementation of an element rendering method in this invention. The method may include the following steps:

[0052] S101: Obtain the initial element coordinates of the target element to be dragged in the Cartesian coordinate system, and initialize the horizontal and vertical velocities of the target element to obtain the element velocity initialization result.

[0053] When it is necessary to drag a target element in the display interface, obtain the initial element coordinates of the target element in the Cartesian coordinate system, and initialize the horizontal and vertical velocities of the target element to obtain the element velocity initialization result.

[0054] In one specific embodiment of the present invention, initializing the lateral and longitudinal velocities of the target element may include the following steps:

[0055] Initialize both the horizontal and vertical velocities of the target element to 0.

[0056] When initializing the horizontal and vertical velocities of the target element, both horizontal and vertical velocities are initialized to 0 to avoid the previously recorded horizontal and vertical velocities of the target element affecting the calculation results of the horizontal and vertical velocities of the target element during this dragging process.

[0057] S102: Mount the initial element coordinates and element velocity initialization results to the pre-created inertial instance object, and set the target element's state to drag.

[0058] Create a new inertia instance object to display the relative velocity and relative rotational angular velocity between the mouse and the target element. After obtaining the initial element coordinates and initial velocity of the target element in the Cartesian coordinate system, attach the initial element coordinates and initial velocity to the pre-created inertia instance object, thereby visualizing the relative position between the mouse and the target element during dragging, and setting the target element to the state of being dragged.

[0059] In one specific embodiment of the present invention, attaching the initial element coordinates and element velocity initialization results to a pre-created inertial instance object may include the following steps:

[0060] The initial element coordinates and element velocity initialization results are mounted to the pre-created inertial instance object as an array.

[0061] After obtaining the initial element coordinates and velocity initialization results of the target element in the Cartesian coordinate system, an array is used to store these results. These initial element coordinates and velocity initialization results are then mounted to a pre-created inertial instance object via this array method. This data-driven approach to mounting the initial element coordinates and velocity initialization results to the inertial instance object fully leverages the advantages of arrays: simple definition, convenient access, and the ability to randomly access parameters.

[0062] S103: Calculate the mouse speed based on the real-time recorded mouse position during the dragging process and the corresponding first dragging time difference.

[0063] After setting the target element to drag state, the mouse speed is calculated based on the mouse position recorded in real time during the dragging process and the corresponding first drag time difference.

[0064] The first drag time difference is the time difference from when the mouse is pressed to the current drag moment calculated from the current mouse speed.

[0065] S104: Calculate the mouse rotation angular velocity based on the mouse rotation angle recorded in real time during the dragging process and the corresponding second dragging time difference.

[0066] After setting the target element to drag state, the mouse rotation angular velocity is calculated based on the mouse rotation angle recorded in real time during the dragging process and the corresponding second drag time difference.

[0067] The second drag time difference is the time difference from when the mouse is pressed to the current drag moment calculated from the current mouse rotation angular velocity.

[0068] S105: Render the position of the target element by combining the mouse speed, mouse rotation angular velocity, and the relative speed and relative rotation angular velocity between the mouse and the target element displayed by the inertial instance object.

[0069] After calculating the mouse speed and mouse rotation angular velocity, the target element's position is rendered by combining these values ​​with the relative speed and relative rotation angular velocity displayed by the inertial instance object between the mouse and the target element. Because element movement has a certain time delay relative to the mouse, during the drag gesture, the target element's position exactly follows the mouse, and its speed accumulates, simulating dragging in the real physical world. The effect is realistic, creating transition animations when dragging the target element, making the dragging process more natural and intuitive.

[0070] As described in the above technical solution, the mouse speed is calculated by recording the mouse position in real time during the dragging process and the corresponding first dragging time difference. The mouse rotation angle is calculated based on the mouse rotation angle recorded in real time during the dragging process and the corresponding second dragging time difference. The position of the target element is rendered by combining the mouse speed, mouse rotation angle, and the relative speed and relative rotation angle displayed between the mouse and the target element using a pre-created inertial instance object. This achieves the creation of transition animations when dragging the target element, making the dragging process more natural and intuitive. The target element's movement has a certain time delay relative to the mouse, simulating dragging in the real physical world, resulting in a realistic effect.

[0071] It should be noted that, based on the above embodiments, the present invention also provides corresponding improvements. In subsequent embodiments, steps identical or corresponding to those in the above embodiments can be referenced interchangeably, and their respective beneficial effects can also be referred to each other. These improvements will not be elaborated upon in the following improved embodiments.

[0072] In one specific embodiment of the present invention, before step S101, the method may further include the following steps:

[0073] Step 1: Select the target element using the d3-selection module in the D3.js visualization tool;

[0074] Step 2: Create a target drag event using the d3-drag module in the D3.js visualization tool, and bind the target drag event to the target element;

[0075] Step 3: Manage the animation content of the target element using the d3-timer timer in the D3.js visualization tool.

[0076] For ease of description, the three steps above can be combined for explanation.

[0077] When it is necessary to drag and drop a target element in the display interface, the target element is selected using the d3-selection module in the D3.js visualization tool, a target drag event is created using the d3-drag module in the D3.js visualization tool, and the target drag event is bound to the target element. The animation content of the target element is managed using the d3-timer timer in the D3.js visualization tool, thereby realizing dependency import.

[0078] D3 stands for Data-Driven Documents, and as the name suggests, it's a data-driven document library. It's a JavaScript library primarily used for data visualization. D3 adheres to existing web standards and can run independently in modern browsers without any other frameworks. It combines powerful visualization components to drive DOM (Document Object Model) operations. D3 provides a variety of easy-to-use functions, greatly simplifying the complexity of JavaScript data manipulation.

[0079] JavaScript is a lightweight, interpreted or just-in-time (JIT) programming language with a function-first approach.

[0080] In one specific embodiment of the present invention, before selecting the target element using the d3-selection module in the D3.js visualization tool, the method may further include the following steps:

[0081] Step 1: Release the previously selected elements using the d3-selection module;

[0082] Step 2: Unbind the original drag event of the selected element from the original drag event of the d3-drag module;

[0083] Step 3: Set the d3-timer timer, which was originally used to manage the animation content of the selected element, to the stopped state.

[0084] For ease of description, the three steps above can be combined for explanation.

[0085] Before selecting the target element using the d3-selection module in the D3.js visualization tool, the d3-selection module releases the original selected element, unbinds the original drag event of the original selected element from the d3-drag module, and sets the d3-timer timer that was originally used to manage the animation content of the original selected element to a stopped state. This completes the state reset work, removes the class names added to other elements when dragging other elements in the past, and avoids the influence of the previous dragging work on other elements.

[0086] In one specific embodiment of the present invention, after step S105, the method may further include the following steps:

[0087] Determine whether the preset stop boundary conditions have been met;

[0088] If so, clear the drag state;

[0089] If not, return to step S103.

[0090] After rendering the position of the target element by combining the mouse speed, mouse rotation angular velocity, and the relative speed and relative rotation angular velocity between the mouse and the target element displayed by the inertial instance object, it is determined whether the preset stop boundary condition has been reached. If yes, it means that the dragging work of the target element has been completed, and the dragging state is cleared. If no, it means that the target element needs to be dragged further, and the process returns to the step of calculating the mouse speed based on the mouse position recorded in real time during the dragging process and the corresponding first drag time difference, until the preset stop boundary condition is reached.

[0091] The preset stop boundary conditions can be customized, such as rotating to a certain angle, rotating for a certain period of time, or dragging to a certain coordinate position.

[0092] See Figure 2 , Figure 2 This is a flowchart illustrating another implementation of the element rendering method in this invention. The method may include the following steps:

[0093] S201: Obtain the initial element coordinates of the target element to be dragged in the Cartesian coordinate system, and initialize the horizontal and vertical velocities of the target element to obtain the element velocity initialization result.

[0094] S202: Mount the initial element coordinates and element velocity initialization results to the pre-created inertial instance object, and set the target element's state to drag.

[0095] S203: Calculate the mouse speed based on the mouse position recorded in real time during the dragging process and the corresponding first dragging time difference.

[0096] S204: Calculate the mouse rotation angular velocity based on the mouse rotation angle recorded in real time during the dragging process and the corresponding second dragging time difference.

[0097] S205: Combines mouse speed, mouse rotation angular velocity, and the relative speed and relative rotation angular velocity of the mouse and the target element displayed by the inertial instance object, and repeatedly calls the rendering method to render the position of the target element by using tweening parameters from 0 to 1.

[0098] After calculating the mouse speed and mouse rotation angular velocity, and combining these with the relative speed and relative rotation angular velocity between the mouse and the target element displayed by the inertial instance object, the rendering method is repeatedly called using tween parameters ranging from 0 to 1 to render the target element's position. The target element's position can be rendered using the following formula:

[0099] Current Position=last Position+t*velocity;

[0100] Where current Position represents the current position, last position represents the previous position, t = 0 or 1, when t = 0 it means there is no change, when t = 1 it means there is a change, and velocity represents a vector, which is the displacement between the previous position and the current position.

[0101] The effect of transition animation was achieved by repeatedly calling the rendering method through tweening.

[0102] This invention simulates the movement trajectory of an element in a browser through mathematical operations, caused by the simultaneous influence of external forces and gravity on the element in real life. The target element continues the mouse movement with a certain inertia, making the interactive feedback more realistic and improving the usability of the software system.

[0103] Corresponding to the above method embodiments, the present invention also provides an element rendering apparatus, the element rendering apparatus described below and the element rendering method described above can be referred to in correspondence.

[0104] See Figure 3 , Figure 3 This is a structural block diagram of an element rendering device according to an embodiment of the present invention. The device may include:

[0105] The element initialization unit 31 is used to obtain the initial element coordinates of the target element to be dragged in the Cartesian coordinate system, and to initialize the horizontal and vertical velocities of the target element to obtain the element velocity initialization result.

[0106] Mounting unit 32 is used to mount the initial element coordinates and element velocity initialization results to the pre-created inertial instance object, and set the target element's state to dragging;

[0107] The mouse speed calculation unit 33 is used to calculate the mouse speed based on the mouse position recorded in real time during the dragging process and the corresponding first dragging time difference;

[0108] The mouse rotation angular velocity calculation unit 34 is used to calculate the mouse rotation angular velocity based on the mouse rotation angle recorded in real time during the dragging process and the corresponding second dragging time difference;

[0109] The element rendering unit 35 is used to render the position of the target element by combining the mouse speed, mouse rotation angular velocity, and the relative speed and relative rotation angular velocity between the mouse and the target element displayed by the inertial instance object.

[0110] As described in the above technical solution, the mouse speed is calculated by recording the mouse position in real time during the dragging process and the corresponding first dragging time difference. The mouse rotation angle is calculated based on the mouse rotation angle recorded in real time during the dragging process and the corresponding second dragging time difference. The position of the target element is rendered by combining the mouse speed, mouse rotation angle, and the relative speed and relative rotation angle displayed between the mouse and the target element using a pre-created inertial instance object. This achieves the creation of transition animations when dragging the target element, making the dragging process more natural and intuitive. The target element's movement has a certain time delay relative to the mouse, simulating dragging in the real physical world, resulting in a realistic effect.

[0111] In one specific embodiment of the present invention, the device may further include:

[0112] The element selection unit is used to select the target element using the d3-selection module in the D3.js visualization tool before obtaining the initial element coordinates of the target element to be dragged in the Cartesian coordinate system.

[0113] The event binding unit is used to create a target drag event using the d3-drag module in the D3.js visualization tool, and bind the target drag event to the target element;

[0114] The animation management unit is used to manage the animation content of target elements through the d3-timer timer in the D3.js visualization tool.

[0115] In one specific embodiment of the present invention, the device may further include:

[0116] The element release unit is used to release the previously selected element via the d3-selection module before the target element is selected through the D3.js visualization tool.

[0117] The event unbinding unit is used to unbind the original drag event of the originally selected element from the d3-drag module;

[0118] The timer setting unit is used to set the d3-timer timer, which was originally used to manage the animation content of the selected element, to a stopped state.

[0119] In one specific embodiment of the present invention, the element initialization unit 31 is specifically a unit that initializes both the horizontal velocity and the vertical velocity of the target element to 0.

[0120] In one specific embodiment of the present invention, the mounting unit 32 is specifically a unit that mounts the initial element coordinates and element velocity initialization results to a pre-created inertial instance object in an array manner.

[0121] In one specific embodiment of the present invention, the device may further include:

[0122] The judgment unit is used to determine whether the preset stop boundary conditions have been met after rendering the position of the target element by combining the mouse speed, mouse rotation angular velocity, and the relative speed and relative rotation angular velocity of the mouse and the target element displayed by the inertial instance object.

[0123] The status clearing unit is used to clear the dragging status when the preset stop boundary condition is determined to be reached.

[0124] The repeat execution unit is used to repeatedly execute the step of calculating the mouse speed based on the mouse position recorded in real time during the dragging process and the corresponding first dragging time difference when it is determined that the preset stop boundary condition has not been met.

[0125] In one specific embodiment of the present invention, the element rendering unit 35 is specifically a unit that combines mouse speed, mouse rotation angular velocity, and the relative speed and relative rotation angular velocity between the mouse and the target element displayed by the inertial instance object, and repeatedly calls the rendering method to render the position of the target element by using tweening parameters from 0 to 1.

[0126] For the method embodiments described above, see [link to relevant documentation]. Figure 4 , Figure 4 This is a schematic diagram of the element rendering device provided by the present invention, which may include:

[0127] Memory 332 is used to store computer programs;

[0128] The processor 322 is used to implement the steps of the element rendering method in the above method embodiment when executing a computer program.

[0129] For details, please refer to Figure 5 , Figure 5This is a schematic diagram illustrating the specific structure of an element rendering device provided in this embodiment. The element rendering device can vary significantly depending on its configuration or performance. It may include a processor (central processing unit, CPU) 322 (e.g., one or more processors) and a memory 332. The memory 332 stores one or more computer programs 342 or data 344. The memory 332 can be temporary or persistent storage. The program stored in the memory 332 may include one or more modules (not shown in the diagram), each module including a series of instruction operations on the data processing device. Furthermore, the processor 322 may be configured to communicate with the memory 332 and execute the series of instruction operations stored in the memory 332 on the element rendering device 301.

[0130] The element rendering device 301 may also include one or more power supplies 326, one or more wired or wireless network interfaces 350, one or more input / output interfaces 358, and / or one or more operating systems 341.

[0131] The steps in the element rendering method described above can be implemented by the structure of the element rendering device.

[0132] Corresponding to the above method embodiments, the present invention also provides a computer-readable storage medium storing a computer program, which, when executed by a processor, can perform the following steps:

[0133] Obtain the initial element coordinates of the target element to be dragged in the Cartesian coordinate system, and initialize the horizontal and vertical velocities of the target element to obtain the element velocity initialization result; attach the initial element coordinates and element velocity initialization result to the pre-created inertial instance object, and set the target element's state to dragging; calculate the mouse velocity based on the mouse position recorded in real time during the dragging process and the corresponding first dragging time difference; calculate the mouse rotation angular velocity based on the mouse rotation angle recorded in real time during the dragging process and the corresponding second dragging time difference; combine the mouse velocity, mouse rotation angular velocity, and the relative velocity and relative rotation angular velocity between the mouse and the target element displayed by the inertial instance object to render the position of the target element.

[0134] The computer-readable storage medium may include various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0135] For a description of the computer-readable storage medium provided by the present invention, please refer to the above method embodiments; the present invention will not be described in detail here.

[0136] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on its differences from other embodiments. Similar or identical parts between embodiments can be referred to interchangeably. For the apparatuses, devices, and computer-readable storage media disclosed in the embodiments, since they correspond to the methods disclosed in the embodiments, the descriptions are relatively simple; relevant parts can be referred to the method section.

[0137] This article uses specific examples to illustrate the principles and implementation methods of the present invention. The descriptions of the above embodiments are only for the purpose of helping to understand the technical solutions and core ideas of the present invention. It should be noted that for those skilled in the art, several improvements and modifications can be made to the present invention without departing from the principles of the present invention, and these improvements and modifications also fall within the protection scope of the claims of the present invention.

Claims

1. An element rendering method, characterized in that, include: Obtain the initial element coordinates of the target element to be dragged in the Cartesian coordinate system, and initialize the horizontal and vertical velocities of the target element to obtain the element velocity initialization result; The initial element coordinates and the initial element velocity are attached to the pre-created inertial instance object, and the state of the target element is set to dragging. The mouse speed is calculated based on the real-time recorded mouse position during the dragging process and the corresponding first dragging time difference; The mouse rotation angular velocity is calculated based on the real-time recorded mouse rotation angle and the corresponding second drag time difference during the dragging process; The position of the target element is rendered by combining the mouse speed, the mouse rotation angular velocity, and the relative speed and relative rotation angular velocity of the mouse displayed by the inertial instance object with the target element; Before obtaining the initial element coordinates of the target element to be dragged in the Cartesian coordinate system, the following steps are also included: Select the target element using the d3-selection module in the D3.js visualization tool; A target drag event is created using the d3-drag module in the D3.js visualization tool, and the target drag event is bound to the target element. The animation content of the target element is managed using the d3-timer timer in the D3.js visualization tool; Before selecting the target element using the d3-selection module in the D3.js visualization tool, the following steps are also included: The d3-selection module releases the originally selected element; Unbind the original selected element from the original drag event of the d3-drag module; Set the d3-timer timer, which was originally used to manage the animation content of the originally selected element, to a stopped state.

2. The element rendering method according to claim 1, characterized in that, Initialize the lateral and longitudinal velocities of the target element, including: The horizontal and vertical velocities of the target element are both initialized to 0.

3. The element rendering method according to claim 1, characterized in that, The initial element coordinates and the initial element velocity results are attached to the pre-created inertial instance object, including: The initial element coordinates and the initial element velocity results are mounted to the pre-created inertial instance object in an array manner.

4. The element rendering method according to claim 1, characterized in that, After rendering the position of the target element by combining the mouse speed, the mouse rotation angular velocity, and the relative speed and relative rotation angular velocity between the mouse displayed by the inertial instance object and the target element, the method further includes: Determine whether the preset stop boundary conditions have been met; If so, clear the drag state; If not, repeat the step of calculating the mouse speed based on the mouse position recorded in real time during the dragging process and the corresponding first dragging time difference.

5. The element rendering method according to any one of claims 1 to 4, characterized in that, The position rendering of the target element is performed by combining the mouse speed, the mouse rotation angular velocity, and the relative speed and relative rotation angular velocity between the mouse displayed by the inertial instance object and the target element, including: By combining the mouse speed, the mouse rotation angular velocity, and the relative speed and relative rotation angular velocity of the mouse displayed by the inertial instance object with the target element, the rendering method is repeatedly called to render the position of the target element using tweening parameters from 0 to 1.

6. An element rendering device, characterized in that, include: The element initialization unit is used to obtain the initial element coordinates of the target element to be dragged in the Cartesian coordinate system, and initialize the horizontal and vertical velocities of the target element to obtain the element velocity initialization result. An instance object creation unit is used to attach the initial element coordinates and the element velocity initialization result to a pre-created inertial instance object, and to set the state of the target element to dragging. The mouse speed calculation unit is used to calculate the mouse speed based on the mouse position recorded in real time during the dragging process and the corresponding first dragging time difference; The mouse rotation angular velocity calculation unit is used to calculate the mouse rotation angular velocity based on the mouse rotation angle recorded in real time during the dragging process and the corresponding second dragging time difference; An element rendering unit is used to render the position of the target element by combining the mouse speed, mouse rotation angular velocity, and the relative speed and relative rotation angular velocity between the mouse displayed by the inertial instance object and the target element. Also includes: The element selection unit is used to select the target element using the d3-selection module in the D3.js visualization tool before obtaining the initial element coordinates of the target element to be dragged in the Cartesian coordinate system. The event binding unit is used to create a target drag event using the d3-drag module in the D3.js visualization tool, and bind the target drag event to the target element; The animation management unit is used to manage the animation content of target elements through the d3-timer timer in the D3.js visualization tool; The element release unit is used to release the previously selected element via the d3-selection module before the target element is selected through the D3.js visualization tool. The event unbinding unit is used to unbind the original drag event of the originally selected element from the d3-drag module; The timer setting unit is used to set the d3-timer timer, which was originally used to manage the animation content of the selected element, to a stopped state.

7. An element rendering device, characterized in that, include: Memory, used to store computer programs; A processor for executing the computer program to implement the steps of the element rendering method as described in any one of claims 1 to 5.

8. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, implements the steps of the element rendering method as described in any one of claims 1 to 5.

Images