User trajectory drawing method, device, computer equipment and storage medium

Abstract

The present application relates to a method, device, computer equipment and storage medium for drawing user trajectories. The method comprises: processing event distribution through JavaScript, using Canvas to draw a full-level trajectory on the canvas, the full-level trajectory including multiple level nodes and a full-level trajectory arc for connecting the nodes of each level; calculating the node coordinates of the user node according to the user growth value, and calculating the user trajectory arc according to the starting point coordinates of the full-level trajectory arc and the node coordinates of the user node; according to the user trajectory arc, combining JavaScript's requestAnimationFrame function to draw a dynamic user trajectory. The embodiment of the present application can use Javascript event distribution and Canvas2D drawing technology to achieve complex and changeable animation effects.

Description

Technical Field

[0001] The present application relates to the computer field, and in particular to a user trajectory drawing method, device, computer equipment and storage medium. Background Art

[0002] Currently, event distribution is handled by canvas, and events of drawn content need to be handled by themselves, that is, canvas does not provide a method to add event listeners to its internal elements. For example, to enable elements within the Canvas to respond to events, it is necessary to obtain the coordinate range of the clicked element to listen and make changes to the elements within it. In addition, since the drawing of Canvas is static, it is impossible to achieve cyclic redrawing. The above reasons make it impossible to use canvas to draw complex and changeable animations, such as custom curves and irregular polygons such as rounded rectangles, which cannot meet user needs. Summary of the invention

[0003] In view of the above-mentioned deficiencies or shortcomings, the present application provides a user trajectory drawing method, apparatus, computer equipment and storage medium. The embodiments of the present application can utilize Javascript event distribution and Canvas2D drawing technology to achieve complex and varied animation effects.

[0004] The present application provides a user trajectory drawing method according to a first aspect. In one embodiment, the method includes:

[0005] The event distribution is processed by JavaScript, and the full-level trajectory is drawn on the canvas using Canvas. The full-level trajectory includes multiple level nodes and full-level trajectory arcs for connecting the level nodes.

[0006] The node coordinates of the user node are calculated according to the user growth value, and the arc of the user trajectory is calculated according to the starting point coordinates of the full-level trajectory arc and the node coordinates of the user node;

[0007] According to the arc of the user trajectory, the dynamic user trajectory is drawn in combination with the requestAnimationFrame function of JavaScript.

[0008] In one embodiment, a full-level track is drawn on a canvas using Canvas, including:

[0009] Use Canvas to draw on the canvas;

[0010] Determine the horizontal coordinate, center coordinate and radius of each level node on the circle, and determine the vertical coordinate of each level node according to the horizontal coordinate, center coordinate and radius of each level node;

[0011] Draw nodes of each level on the canvas;

[0012] Determine the arc between two nodes according to the node coordinates of the starting level node and the node coordinates of the ending level node among the multiple level nodes;

[0013] According to the coordinates of the circle center, the circle radius and the arc between two nodes, draw arcs to connect nodes of each level.

[0014] In one embodiment, drawing a canvas using Canvas includes:

[0015] Get the devicePixelRatio property information in the window variable;

[0016] Get the webkitBackingStorePixelRatio property information in the canvas context;

[0017] The zoom ratio is calculated based on the devicePixelRatio attribute information and the webkitBackingStorePixelRatio attribute information;

[0018] Draw the canvas according to the zoom level.

[0019] In one embodiment, drawing a dynamic user trajectory according to the arc of the user trajectory in combination with the requestAnimationFrame function of JavaScript includes:

[0020] Divide the arc of the user's trajectory into N arcs;

[0021] The requestAnimationFrame function is used to control the execution of the dynamic arc logic processing function before the next redrawing to draw the trajectories corresponding to N arcs in sequence.

[0022] In one embodiment, the requestAnimationFrame function is used to control the execution of the dynamic arc logic processing function before the next redrawing to sequentially draw the tracks corresponding to N arcs, including:

[0023] The dynamic arc logic processing function is defined as the callback function passed in by the requestAnimationFrame function, so that the dynamic arc logic processing function is executed before the next redrawing to draw the trajectory corresponding to the nth arc and determine whether n is not less than N. If so, the drawing is ended according to the callback unique identifier obtained after drawing. If not, the value of n is updated and the dynamic arc logic processing function is called back.

[0024] In one embodiment, when drawing the trajectory corresponding to the nth arc, the method further includes:

[0025] Synchronously draw the level nodes that the trajectory corresponding to the nth arc passes through;

[0026] Determine whether the trajectory corresponding to the nth arc passes through the acceleration area;

[0027] When the determination result is yes, the preset trajectory acceleration is updated, and the trajectory corresponding to the nth arc is drawn according to the updated trajectory acceleration.

[0028] In one embodiment, when drawing the trajectory corresponding to the nth arc, the method further includes:

[0029] First, display the pre-cached statically drawn background and static trajectory map, and then draw the trajectory corresponding to the nth arc.

[0030] According to a second aspect, the present application provides a user trajectory drawing device. In one embodiment, the device includes:

[0031] A first trajectory drawing module, used for processing event distribution through JavaScript, and drawing a full-level trajectory on a canvas using Canvas, wherein the full-level trajectory includes a plurality of level nodes and a full-level trajectory arc for connecting the level nodes;

[0032] A user trajectory arc calculation module is used to calculate the node coordinates of the user node according to the user growth value, and calculate the user trajectory arc according to the starting point coordinates of the full-level trajectory arc and the node coordinates of the user node;

[0033] The second trajectory drawing module is used to draw a dynamic user trajectory according to the arc of the user trajectory in combination with the requestAnimationFrame function of JavaScript.

[0034] According to a third aspect, the present application provides a computer device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps of any of the above method embodiments when executing the computer program.

[0035] According to a fourth aspect, the present application provides a computer-readable storage medium on which a computer program is stored. When the computer program is executed by a processor, the steps of an embodiment of any of the above methods are implemented.

[0036] In an embodiment of the present application, event distribution is processed by JavaScript, and a full-level trajectory is drawn on the canvas using Canvas. The full-level trajectory includes multiple level nodes and a full-level trajectory arc for connecting the nodes of each level; the node coordinates of the user node are calculated according to the user growth value, and the curvature of the user trajectory is calculated according to the starting point coordinates of the full-level trajectory arc and the node coordinates of the user node; based on the curvature of the user trajectory, a dynamic user trajectory is drawn in combination with JavaScript's requestAnimationFrame function, and Javascript event distribution and Canvas2D drawing technology can be used to achieve complex and varied animation effects. BRIEF DESCRIPTION OF THE DRAWINGS

[0037] Figure 1 A schematic diagram of a flow chart of a user trajectory drawing method in an embodiment;

[0038] Figure 2 A schematic diagram of a drawn full-level trajectory and a user trajectory in one embodiment;

[0039] Figure 3 A flowchart of drawing user trajectories in a specific example;

[0040] Figure 4 is a structural block diagram of a user trajectory drawing device in one embodiment;

[0041] Figure 5 FIG. 4 is a diagram showing the internal structure of a computer device in one embodiment. DETAILED DESCRIPTION

[0042] In order to make the purpose, technical solution and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.

[0043] The present application provides a user trajectory drawing method. In one embodiment, the user trajectory drawing method includes: Figure 1 The steps shown are described in detail below.

[0044] S110: Processing event distribution through JavaScript, and using Canvas to draw a full-level trajectory on the canvas, where the full-level trajectory includes multiple level nodes and full-level trajectory arcs for connecting the level nodes.

[0045] Among them, the event distribution can be processed by JavaScript, such as adding event monitoring by using canvas.addEventListener, such as mouse movement (mousemove), click (click) and other events. The relevant business logic can be distributed through the monitoring function; when drawing, the level attribute can be added to the element, and an event object can be returned by obtaining the level of the element and its own attributes to simulate the function processing of DOM events such as target, capture, bubbling and other stages. Compared with the existing method of processing event distribution by canvas, this embodiment can draw complex and changeable animations, such as custom curves and irregular polygons (such as rounded rectangles).

[0046] Furthermore, the step of drawing a full-level trajectory on a canvas using Canvas includes: drawing a canvas using Canvas; determining the horizontal coordinates, center coordinates and radius of each level node on the circle, and determining the vertical coordinates of each level node according to the horizontal coordinates, center coordinates and radius of each level node; drawing each level node on the canvas; determining the arc between two nodes according to the node coordinates of a starting level node and an ending level node among the multiple level nodes; and drawing an arc to connect the nodes of each level according to the center coordinates, radius and arc between the two nodes.

[0047] Among them, when drawing the full-level trajectory, the horizontal coordinates of each level node on the page diagram are determined in the form of proportional scaling through the page diagram, the center coordinates of the circle and the radius of the circle are defined, and the vertical coordinates of each level node are calculated according to the horizontal coordinates, center coordinates of each level node and the radius of the circle, thereby obtaining the node coordinates of each level node (including horizontal and vertical coordinates), and then Canvas is used to draw each level node, and the arc between the two nodes on the circle is calculated according to the node coordinates of the two nodes, namely the starting level node and the ending level node, and then Canvas is used to draw an arc to connect the nodes of each level according to the center coordinates of the circle, the radius of the circle and the arc of the two nodes.

[0048] S120: Calculate the node coordinates of the user node according to the user growth value, and calculate the arc of the user trajectory according to the starting point coordinates of the full-level trajectory arc and the node coordinates of the user node.

[0049] Among them, the growth value (referring to the level points) of the user who currently needs to draw the trajectory, the growth value and difference of the nodes at each level, and the node coordinates are obtained, and the node where the current user is located, that is, the horizontal coordinate of the user node, is calculated in proportion. Then, the vertical coordinate of the user node is calculated according to the horizontal coordinates of the nodes at each level on the circle, the center of the circle, and the radius of the circle, thereby obtaining the node coordinates of the user node. Finally, the arc of the user trajectory is calculated according to the node coordinates of the user node and the node coordinates of the starting level nodes, which can be expressed as U.

[0050] Specifically, the formula for calculating the arc of the user trajectory can be as follows: 2*Math.asin(Math.sqrt([(x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)]) / (2*R))

[0051] S130: Draw a dynamic user trajectory according to the arc of the user trajectory in combination with the requestAnimationFrame function of JavaScript.

[0052] Among them, the full-level trajectory and user trajectory drawn can be seen in Figure 2 As shown, the symbols such as ordinary, silver, gold, platinum, diamond, etc. refer to nodes of different levels on the track.

[0053] This embodiment uses JavaScript to handle event distribution and uses Canvas to draw a full-level trajectory on the canvas. The full-level trajectory includes multiple level nodes and a full-level trajectory arc for connecting the nodes of each level. The node coordinates of the user node are calculated according to the user growth value, and the curvature of the user trajectory is calculated according to the starting point coordinates of the full-level trajectory arc and the node coordinates of the user node. Based on the curvature of the user trajectory, a dynamic user trajectory is drawn in combination with JavaScript's requestAnimationFrame function, which can achieve complex and varied animation effects.

[0054] In one embodiment, the step of using Canvas to draw the canvas includes: obtaining devicePixelRatio attribute information in the window variable; obtaining webkitBackingStorePixelRatio attribute information in the canvas context; calculating the scaling ratio according to the devicePixelRatio attribute information and the webkitBackingStorePixelRatio attribute information; and drawing the canvas according to the scaling ratio.

[0055] The existing technology relies on pixels and cannot maintain high fidelity. It has low performance when the canvas is large. For example, the screen pixels of major mobile phone manufacturers are inconsistent, which will cause 720p and 1080p "movie viewing effects". In order to achieve high fidelity of the entire effect map, this embodiment uses the devicePixelRatio property of the window variable in JavaScript to achieve proportional scaling of the canvas.

[0056] It should be noted that there is a devicePixelRatio property in the browser's window variable, which determines how many pixels (usually 2) the browser will use to render 1 pixel. For example, assuming the value of devicePixelRatio is 2, a 100x100 pixel image will use 2 pixels to render 1 pixel on a retina screen, so the image will actually occupy 200x200 pixels on a retina screen, which is equivalent to doubling the image size, so the image will become blurry.

[0057] In the canvas context, there is also a property similar to devicePixelRatio, namely the webkitBackingStorePixelRatio property (only Safari and Chrome browsers). The value of this property determines how many pixels the browser will use to store canvas information before rendering the canvas.

[0058] This embodiment obtains the attribute information of the devicePixelRatio attribute and the webkitBackingStorePixelRatio attribute, divides the two to obtain a ratio, which can be called a scaling ratio, and then when drawing, multiplying the width and height of the canvas by the scaling ratio to achieve high fidelity.

[0059] Specifically, the operation of scaling the canvas proportionally can be performed by obtaining the above scaling ratio when initializing the canvas and calling ctx.scale(ratio, ratio).

[0060] In one embodiment, the above-mentioned step of drawing a dynamic user trajectory based on the arc of the user trajectory in combination with the requestAnimationFrame function of JavaScript includes: dividing the arc of the user trajectory into N arcs; controlling the execution of the dynamic arc logic processing function before the next redrawing through the requestAnimationFrame function to draw the trajectories corresponding to the N arcs in sequence.

[0061] The above-mentioned steps of controlling the execution of the dynamic arc logic processing function before the next redrawing through the requestAnimationFrame function to sequentially draw the tracks corresponding to N arcs include:

[0062] The dynamic arc logic processing function is defined as the callback function passed in by the requestAnimationFrame function, so that the dynamic arc logic processing function is executed before the next redrawing to draw the trajectory corresponding to the nth arc and determine whether n is not less than N. If so, the drawing is ended according to the callback unique identifier obtained after drawing. If not, the value of n is updated and the dynamic arc logic processing function is called back.

[0063] Specifically, the window.requestAnimationFrame function is used to tell the browser that it wants to execute an animation and requires the browser to call the specified callback function to update the animation before the next redraw. This function needs to pass in a callback function as a parameter, which will be executed before the next redraw of the browser; and returns a callback unique identifier, which is saved.

[0064] This embodiment defines the callback function as a dynamic arc logic processing function, and divides the user trajectory arc into N arcs. Then, the dynamic arc logic processing function is executed to draw the arcs corresponding to each arc in turn, thereby achieving the effect of dynamically drawing the user trajectory.

[0065] Specifically, the arc of the user trajectory is divided into N parts, assuming that the current motion arc is n, and each time n+1;

[0066] In the dynamic arc logic processing function, there is a judgment (n>=N). If the judgment is true, it means that the current drawing has been completed, then the window.cancelAnimationFrame function is called and the callback unique identifier is passed in to cancel the callback function and end the drawing; if the judgment is false, it means that the current drawing has not been completed, then the drawing will continue, the current arc n++, and then the window.requestAnimationFrame function will be called again to execute the callback function before the next redrawing, that is, the dynamic arc logic processing function. After each execution of the callback function, the unique callback will be updated and saved.

[0067] Furthermore, in one embodiment, when drawing the trajectory corresponding to the nth arc, the method further includes:

[0068] Synchronously draw the level nodes that the trajectory corresponding to the nth arc passes through;

[0069] Determine whether the trajectory corresponding to the nth arc passes through the acceleration area;

[0070] When the determination result is yes, the preset trajectory acceleration is updated, and the trajectory corresponding to the nth arc is drawn according to the updated trajectory acceleration.

[0071] This embodiment sets corresponding trajectory accelerations for different radians, so that an acceleration effect can be achieved when drawing a trajectory corresponding to the radian.

[0072] In one embodiment, when drawing the trajectory corresponding to the nth arc, the method further includes:

[0073] First, display the pre-cached statically drawn background and static trajectory map, and then draw the trajectory corresponding to the nth arc.

[0074] Currently, although Canvas provides a method different from the traditional method of implementing animation through div blocks, this method is still very cumbersome. Developers must clear the canvas and redraw all elements when displaying each frame of animation, which will inevitably lead to slow animation of scenes containing a large number of elements. Redrawing the entire canvas to move only a small number of elements will waste a lot of resources.

[0075] In order to avoid clearing the canvas and redrawing each frame of animation, this embodiment adopts a caching method to save the background and static trajectory of the current canvas. Each time a dynamic trajectory is drawn, it is equivalent to first displaying the pre-cached image and then continuing to draw the trajectory corresponding to the next arc. The static image can be saved by the Canvas.save function, and then the Canvas.restore function can be used to return to the initial state of the canvas to continue drawing. In addition, the method of continuing to draw the static background to cover the dynamic trajectory and then drawing the dynamic trajectory can also be adopted. This method does not need to clear the entire canvas when displaying each frame of animation, thereby ensuring drawing performance.

[0076] The user trajectory drawing method provided by the above embodiment is described below through a specific example.

[0077] See also Figure 3 ,The process of drawing user trajectories includes the following steps:

[0078] 1. Canvas draws the canvas;

[0079] 2. Given the horizontal coordinates of nodes at each level on the circle, the center of the circle, and the radius of the circle, find the vertical coordinates of each node on the circle;

[0080] 3. Canvas draws X level nodes;

[0081] 4. Given the node coordinates of two nodes (the starting level node and the ending level node), find the arc between the two nodes on the circle;

[0082] 5. Canvas draws arcs to connect nodes of each level based on the coordinates of the circle center, the radius of the circle, and the arc between the two nodes;

[0083] 6. Given the current user's growth value, the growth value and difference of nodes at each level, and the node coordinates, calculate the horizontal coordinate of the node where the current user is located in proportion, and then calculate the vertical coordinate by 2;

[0084] 7. Given the arc starting point and the user's current growth value node coordinates, calculate the user's trajectory arc from 4: U;

[0085] 8. Divide the arc of the user trajectory into N parts and formulate the trajectory acceleration rate (e.g., 2 from 1 to N / 2, 4 from N / 2+1 to N), and determine the initial velocity r of the user trajectory motion;

[0086] 9. Determine whether the current trajectory moves to the coordinates of the user node, if not, proceed to the next step, if yes, jump to step 17;

[0087] 10. The arc of the current trajectory plus the acceleration: r+rate;

[0088] 11. Reset the canvas and redraw the canvas;

[0089] 12. Find the arc of the next trajectory: U*(r / 100);

[0090] 13. Canvas draws the trajectory corresponding to the next arc;

[0091] 14. If it passes through x (x<=X) level nodes, the Canvas will synchronously draw the level node circle;

[0092] 15. Determine whether the trajectory arc passes through the acceleration area. If yes, the rate value increases and is named 2, 3 or 4. If no, proceed to the next step directly.

[0093] 16. Go to step 9.

[0094] 17. Canvas draws the level node corresponding to the current user (i.e. user node), including drawing rounded rectangles, text, colors, etc.;

[0095] 18. End.

[0096] Figure 1 FIG. 1 is a flow chart of a method for drawing a user trajectory in one embodiment. It should be understood that although Figure 1 The steps in the flowchart are shown in sequence as indicated by the arrows, but these steps are not necessarily executed in the order indicated by the arrows. Unless otherwise specified in this document, there is no strict order restriction for the execution of these steps, and these steps can be executed in other orders. Moreover, Figure 1At least part of the steps may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily executed at the same time, but can be executed at different times. The execution order of these sub-steps or stages is not necessarily sequential, but can be executed in turn or alternately with other steps or at least part of the sub-steps or stages of other steps.

[0097] Based on the same inventive concept, the present application also provides a user trajectory drawing device. In this embodiment, Figure 4 As shown, the user trajectory drawing device includes the following modules:

[0098] A first trajectory drawing module 110 is used to process event distribution through JavaScript and draw a full-level trajectory on a canvas using Canvas, where the full-level trajectory includes a plurality of level nodes and a full-level trajectory arc for connecting the level nodes;

[0099] The user trajectory arc calculation module 120 is used to calculate the node coordinates of the user node according to the user growth value, and calculate the user trajectory arc according to the starting point coordinates of the full-level trajectory arc and the node coordinates of the user node;

[0100] The second trajectory drawing module 130 is used to draw a dynamic user trajectory according to the arc of the user trajectory in combination with the requestAnimationFrame function of JavaScript.

[0101] In one embodiment, when the first trajectory drawing module draws the full-level trajectory on the canvas using Canvas, it is specifically used to:

[0102] Use Canvas to draw on the canvas;

[0103] Determine the horizontal coordinate, center coordinate and radius of each level node on the circle, and determine the vertical coordinate of each level node according to the horizontal coordinate, center coordinate and radius of each level node;

[0104] Draw nodes of each level on the canvas;

[0105] Determine the arc between two nodes according to the node coordinates of the starting level node and the node coordinates of the ending level node among the multiple level nodes;

[0106] According to the coordinates of the circle center, the circle radius and the arc between two nodes, draw arcs to connect nodes of each level.

[0107] In one embodiment, when the first trajectory drawing module uses Canvas to draw the canvas, it is specifically used to:

[0108] Get the devicePixelRatio property information in the window variable;

[0109] Get the webkitBackingStorePixelRatio property information in the canvas context;

[0110] The zoom ratio is calculated based on the devicePixelRatio attribute information and the webkitBackingStorePixelRatio attribute information;

[0111] Draw the canvas according to the zoom level.

[0112] In one embodiment, the second trajectory drawing module is specifically used to:

[0113] Divide the arc of the user's trajectory into N arcs;

[0114] The requestAnimationFrame function is used to control the execution of the dynamic arc logic processing function before the next redrawing to draw the trajectories corresponding to N arcs in sequence.

[0115] In one embodiment, the second trajectory drawing module is specifically used to:

[0116] The dynamic arc logic processing function is defined as the callback function passed in by the requestAnimationFrame function, so that the dynamic arc logic processing function is executed before the next redrawing to draw the trajectory corresponding to the nth arc and determine whether n is not less than N. If so, the drawing is ended according to the callback unique identifier obtained after drawing. If not, the value of n is updated and the dynamic arc logic processing function is called back.

[0117] In one embodiment, when drawing the trajectory corresponding to the nth arc, the second trajectory drawing module is further used to:

[0118] Synchronously draw the level nodes that the trajectory corresponding to the nth arc passes through;

[0119] Determine whether the trajectory corresponding to the nth arc passes through the acceleration area;

[0120] When the determination result is yes, the preset trajectory acceleration is updated, and the trajectory corresponding to the nth arc is drawn according to the updated trajectory acceleration.

[0121] In one embodiment, when drawing the trajectory corresponding to the nth arc, the second trajectory drawing module is further used to: first display the pre-cached static drawing background and static trajectory map, and then draw the trajectory corresponding to the nth arc.

[0122] For the specific definition of the user trajectory drawing device, please refer to the definition of the user trajectory drawing method above, which will not be repeated here. Each module in the above-mentioned user trajectory drawing device can be implemented in whole or in part by software, hardware and a combination thereof. The above-mentioned modules can be embedded in or independent of the processor in the computer device in the form of hardware, or can be stored in the memory of the computer device in the form of software, so that the processor can call and execute the operations corresponding to the above modules.

[0123] In one embodiment, a computer device is provided, whose internal structure diagram can be as follows: Figure 5 As shown. The computer device includes a processor, a memory, a network interface and a database connected through a system bus. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system, a computer program and a database. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The network interface of the computer device is used to communicate with an external terminal through a network connection. When the computer program is executed by the processor, a user trajectory drawing method is implemented.

[0124] Those skilled in the art will understand that Figure 5 The structure shown in the figure is only a block diagram of a part of the structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may include more or fewer components than those shown in the figure, or combine certain components, or have a different arrangement of components.

[0125] This embodiment also provides a computer device, including a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, the method provided in any of the above method embodiments is implemented.

[0126] In one embodiment, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the method provided in any of the above method embodiments is implemented.

[0127] Those skilled in the art can understand that all or part of the processes in the above method embodiments can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above methods. Among them, any reference to memory, storage, database or other media used in the embodiments provided in this application can include non-volatile and / or volatile memory. Non-volatile memory may include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM) or flash memory. Volatile memory may include random access memory (RAM) or external cache memory. As an illustration and not limitation, RAM is available in many forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM).

[0128] The technical features of the above embodiments may be combined arbitrarily. To make the description concise, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0129] The above-mentioned embodiments only express several implementation methods of the present application, and the descriptions thereof are relatively specific and detailed, but they cannot be understood as limiting the scope of the invention patent. It should be pointed out that, for a person of ordinary skill in the art, several variations and improvements can be made without departing from the concept of the present application, and these all belong to the protection scope of the present application. Therefore, the protection scope of the patent of the present application shall be subject to the attached claims.

Claims

1. A user trajectory drawing method, characterized in that: The method comprises: Processing event distribution through JavaScript, and drawing a full-level track on the canvas using Canvas, wherein the full-level track includes a plurality of level nodes and a full-level track arc for connecting each of the level nodes; Calculating the node coordinates of the user node according to the user growth value, and calculating the user trajectory arc according to the starting point coordinates of the full-level trajectory arc and the node coordinates of the user node; According to the arc of the user trajectory, a dynamic user trajectory is drawn in combination with the requestAnimationFrame function of JavaScript; Drawing a dynamic user trajectory according to the user trajectory arc in combination with the requestAnimationFrame function of JavaScript specifically includes: Divide the arc of the user's trajectory into N arcs; The requestAnimationFrame function is used to control the execution of the dynamic arc logic processing function before the next redrawing, so as to draw the tracks corresponding to the N arcs in sequence; The control of executing the dynamic arc logic processing function before the next redrawing through the requestAnimationFrame function to sequentially draw the tracks corresponding to the N arcs includes: Define the dynamic arc logic processing function as the callback function passed in by the requestAnimationFrame function, so that the dynamic arc logic processing function is executed before the next redrawing to draw the trajectory corresponding to the nth arc, and determine whether n is not less than N. If so, end the drawing according to the callback unique identifier obtained after drawing, if not, update the value of n, and call back the dynamic arc logic processing function; When drawing the trajectory corresponding to the nth arc, the method further includes: Synchronously drawing the level nodes through which the trajectory corresponding to the nth arc passes; Determine whether the trajectory corresponding to the nth arc passes through an acceleration area; When the determination result is yes, the preset trajectory acceleration is updated, and the trajectory corresponding to the n-th arc is drawn according to the updated trajectory acceleration.

2. The method according to claim 1, characterized in that The method of drawing a full-level track on a canvas using Canvas includes: Use Canvas to draw on the canvas; Determine the abscissa, center coordinates and radius of each level node on the circle, and determine the ordinate of each level node according to the abscissa, center coordinates and radius of each level node; Drawing each of the level nodes on the canvas; Determine the arc between two nodes according to the node coordinates of the starting level node and the node coordinates of the ending level node among the plurality of level nodes; According to the coordinates of the circle center, the circle radius and the arc between the two nodes, an arc is drawn to connect the level nodes.

3. The method according to claim 2, characterized in that The use of Canvas to draw a canvas includes: Get the devicePixelRatio property information in the window variable; Get the webkitBackingStorePixelRatio property information in the canvas context; Calculate the zoom ratio according to the devicePixelRatio attribute information and the webkitBackingStorePixelRatio attribute information; Draw the canvas according to the scale.

4. The method according to claim 1, characterized in that When drawing the trajectory corresponding to the nth arc, the method further includes: First, the pre-cached statically drawn background and static trajectory map are displayed, and then the trajectory corresponding to the n-th arc is drawn.

5. A user trajectory drawing device, characterized in that: The device comprises: A first trajectory drawing module, used for processing event distribution through JavaScript, and drawing a full-level trajectory on a canvas using Canvas, wherein the full-level trajectory includes a plurality of level nodes and a full-level trajectory arc for connecting each of the level nodes; A user trajectory arc calculation module, used to calculate the node coordinates of the user node according to the user growth value, and calculate the user trajectory arc according to the starting point coordinates of the full-level trajectory arc and the node coordinates of the user node; The second trajectory drawing module is used to draw a dynamic user trajectory according to the user trajectory arc in combination with the requestAnimationFrame function of JavaScript, specifically comprising: dividing the user trajectory arc into N arcs; controlling the execution of the dynamic arc logic processing function before the next redrawing through the requestAnimationFrame function to sequentially draw the trajectories corresponding to the N arcs; The control of executing the dynamic arc logic processing function before the next redrawing through the requestAnimationFrame function to sequentially draw the tracks corresponding to the N arcs includes: Define the dynamic arc logic processing function as the callback function passed in by the requestAnimationFrame function, so that the dynamic arc logic processing function is executed before the next redrawing to draw the trajectory corresponding to the nth arc, and determine whether n is not less than N. If so, end the drawing according to the callback unique identifier obtained after drawing, if not, update the value of n, and call back the dynamic arc logic processing function; When drawing the trajectory corresponding to the nth arc, it also includes: Synchronously drawing the level nodes through which the trajectory corresponding to the nth arc passes; Determine whether the trajectory corresponding to the nth arc passes through an acceleration area; When the determination result is yes, the preset trajectory acceleration is updated, and the trajectory corresponding to the n-th arc is drawn according to the updated trajectory acceleration.

6. A computer device comprising a memory, a processor and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, the steps of the method according to any one of claims 1 to 4 are implemented.

7. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 4 are implemented.

Images