Node path visualization methods, devices, electronic devices, media and products

Abstract

This application discloses a method, apparatus, electronic device, medium, and product for visualizing node paths. The method includes: acquiring time node data and configuration parameters; generating a serpentine layout path based on the time node data and configuration parameters; creating an off-screen canvas and a main canvas based on the configuration parameters; drawing static elements on the off-screen canvas according to the serpentine layout path to obtain a static cache bitmap; calculating the global animation progress and segmented progress values ​​based on the system's current timestamp; and overlaying and drawing the static cache bitmap, global animation progress, and segmented progress values ​​on the main canvas to obtain and output animation frames. This method can solve the problems of low rendering performance and interactive stuttering caused by repeated drawing and reordering triggered by an increase in the number of nodes.

Description

Technical Field

[0001] This application relates to the field of computer technology, specifically to a method, apparatus, electronic device, readable storage medium, and computer program product for visualizing node paths. Background Technology

[0002] In the field of data visualization for Web (Website / Webpage) applications, timelines are widely used as a key component for presenting time-series data such as showcasing enterprise development history and project progress management. Existing solutions based on DOM (Document Object Model) or SVG (Scalable Vector Graphics) create independent DOM elements for each time node and use CSS (Cascading Style Sheets) and JavaScript (JS, the core programming language for Web front-end development) to control animation effects. However, as the number of nodes increases, existing methods frequently trigger browser reflow and repaint, leading to a significant decrease in rendering performance, severe animation stuttering, and greatly impacting the user's interactive experience in high-information-density scenarios. Summary of the Invention

[0003] In view of the above problems, this application provides a node path visualization method, device, electronic device, readable storage medium and computer program product, which can solve the problems of low rendering performance and interactive lag caused by repeated drawing and reordering due to the increase in the number of nodes.

[0004] Firstly, this application provides a method for visualizing node paths, including: Obtain time node data and configuration parameters; Based on the time node data and the configuration parameters, a serpentine layout path is generated; Create an off-screen canvas and a main canvas based on the configuration parameters; Static elements are drawn on the off-screen canvas according to the snake layout path to obtain a static cache bitmap; Calculate the global and segmented progress values ​​of the animation based on the current system timestamp; The static cache bitmap, the global animation progress, and the segmented progress values ​​are overlaid and drawn on the main canvas to obtain animation frames and output them.

[0005] In the above technical solution, this method can clearly define the core visualization data and display rules based on time node data and configuration parameters; it can also optimize the space utilization under high node density and improve the readability of time-series data by generating a serpentine layout path; it can also separate static drawing and dynamic rendering by using an off-screen canvas and a main canvas, so that static elements in the off-screen canvas can be cached, avoiding repeated drawing and reducing the amount of rendering computation; at the same time, it enables the main canvas to overlay and draw the output animation frames, realizing the reuse of static cache, thereby greatly improving rendering efficiency and solving the stuttering problem; among them, the calculation of the global progress and segmented progress values ​​of the animation can achieve precise control of the animation timing, thereby ensuring the synchronization and continuity of node animation.

[0006] In some implementations, generating the serpentine layout path based on the time node data and the configuration parameters includes: Obtain a node list based on the time node data; Based on the wave amplitude and canvas size in the configuration parameters, calculate the node coordinates of each node in the node list; Connect adjacent nodes in the node list based on the node coordinates to obtain a serpentine layout path.

[0007] In the above technical solution, the method can organize the scattered time node data into an ordered data set, ensuring that the subsequent drawing is carried out in a fixed order and avoiding data chaos; at the same time, by combining the wave amplitude and the canvas size, it can assign a precise screen position to each node, ensuring that the nodes do not overlap or exceed the canvas; finally, it can also connect the positions of each node with lines to form a continuous and curved visual path, clearly presenting the temporal relationship and connection logic of the nodes.

[0008] In some implementations, calculating the node coordinates of each node in the node list based on the wave amplitude and canvas size in the configuration parameters includes: Obtain the index parameters, wave amplitude, and canvas size based on the configuration parameters; The horizontal spacing is determined based on the total number of nodes in the node list and the canvas size; Calculate the X-axis coordinate of each node in the node list based on the index parameters, the horizontal spacing, and the total number of nodes; Calculate the Y-axis coordinate of the canvas center based on the canvas dimensions; The Y-axis coordinate of each node in the node list is calculated based on the Y-axis coordinate of the canvas center, the index parameter, and the wave amplitude. The node coordinates of each node in the node list are determined based on the X-axis and Y-axis coordinates of each node in the node list.

[0009] In the above technical solution, the method can combine configuration parameters such as index, wave amplitude, and canvas size to accurately calculate the X-axis position of each node and the Y-axis fluctuation position based on the center of the canvas, thereby determining the complete coordinates of all nodes and achieving uniform distribution of nodes within the canvas and the unification of the serpentine fluctuation pattern.

[0010] In some implementations, the step of drawing static elements on the off-screen canvas according to the serpentine layout path to obtain a static cache bitmap includes: Obtain the theme color value based on the configuration parameters; Based on the serpentine layout path and the theme color value, static elements are drawn on the off-screen canvas to obtain a static cache bitmap.

[0011] In the above technical solution, the method can combine the fixed structure of the snake layout path with the configured theme color value to draw all unchanging static elements on the off-screen canvas at once and cache them as bitmaps, avoiding repeated drawing of static content during subsequent animation rendering.

[0012] In some implementations, calculating the global and segmented progress values ​​of the animation based on the system's current timestamp includes: Get the system's current timestamp and preset animation speed coefficient; Based on the current timestamp of the system and the animation speed coefficient, calculate the global progress of the animation and the segmented progress value between each node and the next node.

[0013] In the above technical solution, the method can combine the system's real-time time with the preset animation speed to accurately calculate the overall pace of the animation and the local transition progress between each node.

[0014] In some implementations, the step of overlaying and drawing on the main canvas based on the static cache bitmap, the global animation progress, and the segmented progress values ​​to obtain and output animation frames includes: The static cache bitmap is copied onto the main canvas, and dynamic elements are overlaid and drawn on the first processing main canvas according to the global animation progress and the segmented progress value to obtain an animation frame containing a static background and dynamic progress; wherein, the dynamic elements include at least a colored progress line in an active state, a moving progress point, and a highlighted node. The animation frames of the main canvas are rendered and output.

[0015] In the above technical solution, the method can reuse static cached bitmaps as backgrounds and only overlay dynamic elements such as active progress lines and moving progress points on the main canvas. Thus, while avoiding repeated rendering of static content, it can precisely control the dynamic effects through global and segmented progress to achieve smooth animation frame output.

[0016] In some implementations, after drawing the animation frames by overlaying them on the main canvas based on the static cache bitmap, the global animation progress, and the segmented progress values, and then outputting them, the method further includes: If an interactive behavior is detected based on the node coordinates and the mouse coordinates after receiving mouse coordinates input by the user, the interactive node corresponding to the interactive behavior is determined, and the hover feedback corresponding to the interactive node is triggered.

[0017] In the above technical solution, the method can quickly identify node interaction behavior and trigger hover feedback by accurately associating node coordinates with the user's mouse position, so that the user can more intuitively perceive the target node of the current operation.

[0018] In some implementations, after drawing the animation frames by overlaying them on the main canvas based on the static cache bitmap, the global animation progress, and the segmented progress values, and then outputting them, the method further includes: Upon receiving the user's input of dynamically modified configuration parameters, the serpentine layout path is regenerated based on the dynamically modified configuration parameters and the time node data. The off-screen canvas and the main canvas are also recreated based on the dynamically modified configuration parameters. The step of drawing static elements on the off-screen canvas according to the serpentine layout path to obtain a static cache bitmap is then executed.

[0019] In the above technical solution, the method can automatically update the serpentine layout path, canvas and static cache bitmap, so as to respond to configuration changes in real time without restarting the visualization process.

[0020] In some implementations, after drawing the animation frames by overlaying them on the main canvas based on the static cache bitmap, the global animation progress, and the segmented progress values, and then outputting them, the method further includes: Upon detecting a size change signal in the canvas container, the serpentine layout path is regenerated based on the configuration parameters, the size change signal, and the time node data. The off-screen canvas and the main canvas are recreated based on the configuration parameters and the size change signal. The step of drawing static elements on the off-screen canvas according to the serpentine layout path to obtain a static cache bitmap is then performed.

[0021] In the above technical solution, the method can automatically respond to changes in the size of the canvas container. By regenerating the serpentine layout path, rebuilding the canvas, and updating the static cache bitmap, it ensures that the node layout always adapts to the new canvas size, thus avoiding problems such as node overflow and layout disorder.

[0022] Secondly, this application provides a node path visualization device, comprising: The acquisition unit is used to acquire time node data and configuration parameters; The generation unit is used to generate a serpentine layout path based on the time node data and the configuration parameters; A creation unit is used to create an off-screen canvas and a main canvas according to the configuration parameters. The first drawing unit is used to draw static elements on the off-screen canvas according to the snake layout path to obtain a static cache bitmap. The calculation unit is used to calculate the global progress and segmented progress values ​​of the animation based on the current timestamp of the system. The second drawing unit is used to overlay and draw on the main canvas according to the static cache bitmap, the global animation progress and the segmented progress value to obtain and output animation frames.

[0023] In the above technical solution, the device can clearly define the core visualization data and display rules based on time node data and configuration parameters; it can also optimize the space utilization under high node density and improve the readability of time-series data by generating a serpentine layout path; it can also separate static drawing and dynamic rendering through an off-screen canvas and a main canvas, so that static elements in the off-screen canvas can be cached, avoiding repeated drawing and reducing the amount of rendering computation; at the same time, it can overlay and draw animation frames on the main canvas to realize the reuse of static cache, thereby greatly improving rendering efficiency and solving the stuttering problem; among them, the calculation of global animation progress and segmented progress values ​​can achieve precise control of animation timing, thereby ensuring the synchronization and continuity of node animation.

[0024] Thirdly, this application provides an electronic device including a memory and a processor, the memory storing a computer program, and the processor running the computer program to cause the electronic device to perform the node path visualization method described in any one of the first aspects.

[0025] Fourthly, this application provides a readable storage medium storing a computer program, which, when executed by a processor, performs the node path visualization method described in any one of the first aspects.

[0026] Fifthly, this application provides a computer program product comprising a computer program that, when executed by a processor, performs the node path visualization method described in any one of the first aspects.

[0027] The beneficial effects of this application are as follows: Through a dual-Canvas layered design, the main canvas only draws the dynamic parts, avoiding redundant calculations for static parts, resulting in smoother animation output and lower hardware consumption. Simultaneously, the use of a collision detection algorithm enables simpler and more efficient interactive feedback; furthermore, by using on-response listening, it can respond more quickly to parameter adjustments, device changes, theme switching, etc., thereby achieving greater method adaptability and compatibility through partial redrawing. Attached Figure Description

[0028] To more clearly illustrate the technical solutions of the embodiments of this application, the accompanying drawings used in the embodiments of this application will be briefly introduced below. It should be understood that the following drawings only show some embodiments of this application and should not be regarded as a limitation of the scope. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.

[0029] Figure 1 This is a flowchart illustrating the node path visualization method in some embodiments of this application; Figure 2 This is an example diagram of time node data in some embodiments of this application; Figure 3 This is an example diagram of a configuration parameter in some embodiments of this application; Figure 4 This is a flowchart of a dual-Canvas layered rendering process in some embodiments of this application; Figure 5 This is a schematic diagram of a serpentine curve path generation algorithm in some embodiments of this application; Figure 6 This is a schematic diagram of the node path visualization device in some embodiments of this application; Figure 7 This is a schematic diagram of the structure of an electronic device in some embodiments of this application. Detailed Implementation

[0030] The embodiments of the technical solution of this application will now be described in detail with reference to the accompanying drawings. These embodiments are only used to more clearly illustrate the technical solution of this application and are therefore merely examples, and should not be used to limit the scope of protection of this application.

[0031] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application pertains; the terminology used herein is for the purpose of describing particular embodiments only and is not intended to limit the application; the terms “comprising” and “having”, and any variations thereof, in the specification, claims, and foregoing description of the drawings are intended to cover non-exclusive inclusion.

[0032] In the description of the embodiments of this application, technical terms such as "first" and "second" are used only to distinguish different objects and should not be construed as indicating or implying relative importance or implicitly specifying the number, specific order, or primary and secondary relationship of the indicated technical features. In the description of the embodiments of this application, "multiple" means two or more (including two), similarly, "multiple sets" refers to two or more sets (including two sets), and "multiple pieces" refers to two or more pieces (including two pieces) unless otherwise explicitly defined.

[0033] In this document, the term "embodiment" means that a particular feature, structure, or characteristic described in connection with an embodiment may be included in at least one embodiment of this application. The appearance of this phrase in various places throughout the specification does not necessarily refer to the same embodiment, nor is it a separate or alternative embodiment mutually exclusive with other embodiments. It will be explicitly and implicitly understood by those skilled in the art that the embodiments described herein can be combined with other embodiments.

[0034] In the description of the embodiments in this application, the term "and / or" is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A existing alone, A and B existing simultaneously, and B existing alone. Additionally, the character " / " in this document generally indicates that the preceding and following related objects have an "or" relationship.

[0035] Existing timeline visualization methods in Web (Global Wide Area Network, generally referring to web pages / websites) applications mainly include: methods that use DOM (Document Object Model) elements or SVG (Scalable Vector Graphics) graphics to correspond to nodes and connecting lines, and generate styles and animations using CSS (Cascading Style Sheets) and JavaScript (JS for short, the core programming language of Web front-end); and methods that use the Canvas API (Canvas Application Programming Interface) to perform 2D drawing and render animations frame by frame.

[0036] However, in existing Web (Global Wide Area Network, referring to web pages / websites) timeline visualization methods, the DOM (Document Object Model) based approach will severely impact rendering performance as the number of nodes increases, and the traditional Canvas approach of full redrawing every frame will also cause a lot of computational redundancy and waste of GPU (Graphics Processing Unit) resources.

[0037] To address the aforementioned technical issues, this application provides a node path visualization method. This method enables incremental rendering of dynamic content through layered rendering of dual Canvases, thereby effectively improving rendering performance and optimizing memory usage. Simultaneously, by accurately calculating the global and segmented progress values ​​of the animation using system timestamps, precise synchronization between animation progress and node status can be achieved.

[0038] like Figure 1 As shown, some embodiments of this application provide a node path visualization method, which includes: S101. Obtain time node data and configuration parameters; S102. Generate a serpentine layout path based on the time node data and configuration parameters; S103. Create an off-screen canvas and a main canvas according to the configuration parameters; S104. Draw static elements on the off-screen canvas according to the serpentine layout path to obtain a static cache bitmap; S105. Calculate the global progress and segmented progress values ​​of the animation based on the current timestamp of the system. S106. Draw on the main canvas based on the static cache bitmap, the global animation progress, and the segmented progress values ​​to obtain and output the animation frames.

[0039] In some embodiments, the method employs a dual Canvas architecture consisting of a static caching layer and a dynamic rendering layer.

[0040] In some embodiments, time node data refers to the core business data that constitutes the timeline, including time information, identification information, status information, and associated tag / icon data for each node. Figure 2 An example graph of time-node data is provided.

[0041] The time information includes: data.year (year); Identification / status information includes: index (node ​​index), isActive (active state), isHovered (hovered state), progress (progress value), and scale (zoom ratio); The associated tag / icon data includes: data.event (event name), data.description (detailed description), data.color (theme color), and data.icon (icon emoji).

[0042] In some embodiments, configuration parameters refer to configurable items used to control the appearance, layout, and animation effects of the timeline, including parameters such as wave amplitude, horizontal spacing, node size, theme color value, and animation speed. Figure 3 An example diagram of one configuration parameter is provided.

[0043] In some embodiments, the serpentine layout path refers to the node arrangement path calculated based on the sine wave algorithm, in which the nodes are distributed horizontally and offset vertically according to a sine law to form a serpentine visual effect, while also including the Bézier curve connection path between the nodes.

[0044] In some embodiments, the off-screen canvas refers to the offScreenCanvas element, which is independent of the page display and is used specifically for drawing and caching static content such as backgrounds, inactive connectors, and basic node styles, without being directly rendered to the page.

[0045] In some embodiments, the main canvas refers to the Canvas element used for final display. By reusing the static cached bitmap of the off-screen canvas, dynamically changing progress content, activation status, and animation effects are overlaid and rendered directly onto the page.

[0046] In some embodiments, static elements refer to fixed content in the timeline that does not change with the progress of animation and interactive operations, including background fill color, inactive connection lines, node background circles and borders, theme basic styles, etc.

[0047] In some embodiments, a static cached bitmap refers to bitmap data formed by storing all static elements drawn off-screen on the canvas. It can be quickly reused through the drawImage method (the core method of the Canvas2D API) to avoid repeated drawing.

[0048] In some embodiments, the global animation progress refers to the percentage of the animation's progress over the entire timeline, calculated based on the system's current timestamp, reflecting the overall progress of the animation within a complete cycle.

[0049] In some embodiments, the segment progress value refers to the animation advancement ratio of the connecting line between each node and the next node, which is used to precisely control the progress rendering of a single connecting line and the switching of node activation states.

[0050] In some embodiments, overlay drawing refers to a drawing method that first copies the static cache bitmap of the off-screen canvas to the main canvas, and then draws dynamic content such as progress lines, indicator points, and activation status on top of it.

[0051] In some embodiments, an animation frame refers to a single frame of visual image obtained by overlaying the main canvas. Continuously outputting animation frames can form a smooth timeline progress animation.

[0052] In the above embodiments, the method can clearly define the core visualization data and display rules based on time node data and configuration parameters; it can also optimize the space utilization under high node density and improve the readability of time-series data by generating a serpentine layout path; it can also separate static drawing and dynamic rendering by using an off-screen canvas and a main canvas, so that static elements in the off-screen canvas can be cached, avoiding repeated drawing and reducing the amount of rendering computation; at the same time, it enables the main canvas to overlay and draw the output animation frames, realizing the reuse of static cache, thereby greatly improving rendering efficiency and solving the stuttering problem; among them, the calculation of the global progress and segment progress values ​​of the animation can achieve precise control of the animation timing, thereby ensuring the synchronization and continuity of node animation.

[0053] In some embodiments, generating a serpentine layout path based on time node data and configuration parameters includes: Obtain the node list based on time node data; Calculate the node coordinates of each node in the node list based on the wave amplitude and canvas size in the configuration parameters; Connect adjacent nodes in the node list based on their coordinates to obtain the serpentine layout path.

[0054] In some embodiments, a smooth connection between nodes can be achieved using a cubic Bézier curve, wherein... Starting point = (currentNode.x, currentNode.y); Control point 1 = (currentNode.x + horizontal distance × 0.5, currentNode.y); Control point 2 = (currentNode.x + horizontal distance × 0.5, nextNode.y); End point = (nextNode.x, nextNode.y).

[0055] Where currentNode.x is the X-axis coordinate of the current node; currentNode.y is the Y-axis coordinate of the current node; nextNode.x is the coordinate of the next node, and x is the coordinate of the node. nextNode.y is the Y-axis coordinate of the next node; The horizontal distance is the horizontal spacing between the current node and the next node (i.e., the absolute value of nextNode.x minus currentNode.x).

[0056] Based on this, the method can ensure that the tangent of the curve is horizontal at the node and visually smooth; at the same time, the control point is located at the horizontal midpoint between the two nodes, making the curve symmetrical and aesthetically pleasing; in addition, it can also adapt to any wave amplitude variation.

[0057] In the above embodiments, the method can organize scattered time node data into an ordered data set, ensuring that subsequent drawing is performed in a fixed order and avoiding data chaos; at the same time, by combining wave amplitude and canvas size, it can assign a precise screen position to each node, ensuring that the nodes do not overlap or exceed the canvas; finally, it can also connect the positions of each node with lines to form a continuous and curved visual path, clearly presenting the temporal relationship and connection logic of the nodes.

[0058] In some embodiments, the node coordinates of each node in the node list are calculated based on the wave amplitude and canvas size in the configuration parameters, including: Retrieve index parameters, wave amplitude, and canvas size based on configuration parameters; The horizontal spacing is determined based on the total number of nodes in the node list and the canvas size; Calculate the X-axis coordinate of each node in the node list based on the index parameters, horizontal spacing, and total number of nodes; Calculate the Y-axis coordinate of the canvas center based on the canvas size; Calculate the Y-axis coordinate of each node in the node list based on the canvas center Y-axis coordinate, index parameters, and wave amplitude; Determine the node coordinates of each node in the node list based on the X-axis and Y-axis coordinates of each node in the node list.

[0059] In some embodiments, the index parameter is the sort index of the node in the node list.

[0060] In some embodiments, wave amplitude refers to serpentine undulation amplitude (or node vertical offset amplitude); wave coefficient refers to serpentine curvature coefficient (or offset calculation coefficient).

[0061] For example, the wave coefficient can be waveAmplitude / 100, where, The waveAmplitude setting is configurable from 50 to 200 pixels.

[0062] For example, the horizontal spacing adapts to the canvas width. This method can determine the horizontal spacing based on the total number of nodes and the canvas size.

[0063] For example, the X-axis coordinate = leftMargin + (index × horizontal spacing) / (total - 1); Y-axis coordinate = canvas center Y + sin(index × wave coefficient) × wave amplitude.

[0064] In the above embodiments, the method can combine configuration parameters such as index, wave amplitude, and canvas size to accurately calculate the X-axis position of each node and the Y-axis fluctuation position based on the center of the canvas, thereby determining the complete coordinates of all nodes and achieving uniform distribution of nodes within the canvas and a unified serpentine fluctuation pattern.

[0065] In some embodiments, static elements are drawn on an off-screen canvas according to a serpentine layout path to obtain a static cache bitmap, including: Obtain the theme color value based on the configuration parameters; Based on the serpentine layout path and theme color value, static elements are drawn on the off-screen canvas to obtain a static cache bitmap.

[0066] In some embodiments, theme color values ​​include background color, text color, inactive node color, inactive line color, tooltip background, tooltip border, and node border. Static elements include background fill color, inactive Bézier curve connectors, background circles and borders of nodes, and basic styles related to the theme.

[0067] In the above embodiments, the method can combine the fixed structure of the serpentine layout path with the configured theme color value to draw all unchanging static elements on the off-screen canvas at once and cache them as bitmaps, avoiding repeated drawing of static content during subsequent animation rendering.

[0068] In some embodiments, calculating the global and segmented progress values ​​of the animation based on the current system timestamp includes: Get the system's current timestamp and preset animation speed coefficient; Based on the system's current timestamp and animation speed coefficient, calculate the global animation progress and the segmented progress value between each node and the next node.

[0069] In some embodiments, the current timestamp = Date.now() × animation speed coefficient; where Date.now() is used to "obtain the current precise time", providing a real-time and reliable time basis for the progress calculation of the timeline animation.

[0070] In some embodiments, global progress = (current timestamp · % · cycle period) / cycle period; where the cycle period can be 8000 milliseconds.

[0071] In some embodiments, the activation node index = floor(global progress × total number of nodes); where the activation node index is used to accurately mark the time node that should be in an active state under the current animation progress; floor is used to convert the floating-point progress calculation result into an integer node index, thereby accurately locating the time node that should be activated at the moment.

[0072] In some embodiments, the segmented progress value includes: Fragment progress = Global progress × Total number of nodes - Current node index; Node progress = clamp(fragment progress, 0, 1); where clamp is a numerical constraint function.

[0073] In the above embodiments, the method can combine the system's real-time time with the preset animation speed to accurately calculate the overall pace of the animation and the local transition progress between each node.

[0074] In some embodiments, animation frames are obtained and output by overlaying and drawing on the main canvas based on a static cache bitmap, the global animation progress, and segmented progress values, including: Copy the static cache bitmap on the main canvas, and draw dynamic elements on the first processing main canvas according to the global and segmented progress values ​​of the animation to obtain an animation frame containing a static background and dynamic progress; wherein, the dynamic elements include at least an active colored progress line, a moving progress point, and a highlighted node. Render and output the animation frames of the main canvas.

[0075] In some embodiments, dynamic elements include an active colored progress line (drawn along a Bézier curve based on the node progress value), moving progress points (drawn by calculating the coordinates corresponding to the progress percentage on the curve), highlighted nodes (nodes with an index ≤ the active index are filled with color), node scaling animations, and icon / text labels.

[0076] In some embodiments, the main Canvas can copy the off-screen Canvas content once using drawImage. Static content is drawn only once to avoid repeated calculations every frame. By utilizing the hardware acceleration capabilities of drawImage, the amount of dynamic content drawn is reduced by about 70%-80%, and the frame rate is stabilized at 60fps.

[0077] In the above embodiments, the method can reuse static cached bitmaps as backgrounds and only overlay dynamic elements such as active progress lines and moving progress points on the main canvas. In this way, while avoiding repeated rendering of static content, the dynamic effects can be precisely controlled through global and segmented progress to achieve smooth animation frame output.

[0078] In some embodiments, after overlaying and drawing on the main canvas based on a static cache bitmap, the global animation progress, and segmented progress values ​​to obtain and output animation frames, the method further includes: If the user inputs mouse coordinates, and an interactive behavior is detected based on the node coordinates and mouse coordinates, then the interactive node corresponding to the interactive behavior is determined, and the hover feedback corresponding to the interactive node is triggered.

[0079] In some embodiments, interactive behavior detection may employ a circular collision detection algorithm. Mouse distance = sqrt((mouse distance X - node distance X)) 2 +(Mouse Y - Node Y) 2 ); If the mouse distance is less than or equal to the node radius multiplied by the hover scaling factor, the hover state is triggered.

[0080] Here, sqrt is an abbreviation for square root, which is a mathematical function in programming used to calculate the square root of a number.

[0081] In some embodiments, hover feedback includes using Canvas transform (transform is a transformation property of the Canvas2D API) to implement a 1.3x node scaling animation, setting cursor (a CSS property used to set the mouse pointer style) to pointer (pointer is the value of this property, representing that when the mouse hovers over the node, the pointer is displayed as a "hand" shape (the default is an arrow shape)), fixed (fixed is the value of the CSS position property, representing that the tooltip is fixedly positioned) and displaying the tooltip with mouse offset (+20px, -40px), and adding CSS transition effects of opacity (a CSS property used to set the transparency of the tooltip) and translateY (a sub-method of the CSS transform property used to set the translation of the element in the Y-axis direction) to the tooltip.

[0082] In some embodiments, click events transmit node data to the parent component via an event emitter, supporting route navigation, detail pop-ups, data linkage, and custom callbacks.

[0083] In the above embodiments, the method can quickly identify node interaction behavior and trigger hover feedback by accurately associating node coordinates with the user's mouse position, enabling the user to more intuitively perceive the target node of the current operation.

[0084] In some embodiments, after overlaying and drawing on the main canvas based on a static cache bitmap, the global animation progress, and segmented progress values ​​to obtain and output animation frames, the method further includes: Upon receiving user input of dynamically modified configuration parameters, the system regenerates the serpentine layout path based on the dynamically modified configuration parameters and time node data, recreates the off-screen canvas and main canvas based on the dynamically modified configuration parameters, and executes the steps of drawing static elements on the off-screen canvas according to the serpentine layout path to obtain a static cache bitmap.

[0085] In some embodiments, dynamically modifying configuration parameters includes wave amplitude, animation speed, theme mode, and icon visibility.

[0086] In some embodiments, this method can implement responses using Vue's `watch` listener (a data listening feature provided by Vue). When the wave amplitude changes, recalculate the node position → update the cache → redraw; Update the time coefficient when the animation speed changes → restart the animation loop; When switching themes, update color values ​​→ update cache → redraw; Switch rendering logic when the icon is shown or hidden → redraw the dynamic layer.

[0087] In some embodiments, the off-screen Canvas caching trigger conditions include when the theme mode is switched and when the configuration parameters (wave amplitude) are updated.

[0088] In some embodiments, the caching process is as follows: create an off-screen Canvas → draw the background → draw connecting lines (gray / inactive) → draw the node background circle → draw the node border → store as a bitmap cache.

[0089] In the above embodiments, the method can automatically update the serpentine layout path, canvas, and static cache bitmap, thus responding to configuration changes in real time without restarting the visualization process.

[0090] In some embodiments, after overlaying and drawing on the main canvas based on a static cache bitmap, the global animation progress, and segmented progress values ​​to obtain and output animation frames, the method further includes: Upon detecting a size change signal in the canvas container, the serpentine layout path is regenerated based on configuration parameters, the size change signal, and time node data. The off-screen canvas and main canvas are also recreated based on configuration parameters and the size change signal. Static elements are then drawn on the off-screen canvas according to the serpentine layout path to obtain a static cache bitmap.

[0091] In some embodiments, this method can listen for changes in the canvas container size using the ResizeObserver API (a native API in front-end development specifically used to listen for changes in element size). Upon triggering a size change signal, the following steps are executed: Get new width and height → Adjust Canvas size → Recalculate node coordinates → Rebuild cache → Redraw.

[0092] In some embodiments, the off-screen Canvas caching trigger condition includes a change in window size, and the caching process is as follows: Create an off-screen Canvas → Draw the background → Draw connecting lines (gray / inactive) → Draw the node background circle → Draw the node border → Save as a bitmap cache.

[0093] In some embodiments, breakpoint adaptation optimization in an adaptive responsive system (for mobile devices (≤768px)) may include: Timeline height changed from 500px to 400px; Control button size changed from 40px to 36px; The width of the notification box was changed from 280px to 200px. Configure panel layout: Fixed width → Adaptive width.

[0094] In the above embodiments, the method can automatically respond to changes in the size of the canvas container by regenerating the serpentine layout path, rebuilding the canvas, and updating the static cache bitmap, ensuring that the node layout always adapts to the new canvas size and avoiding problems such as node overflow and layout disorder.

[0095] To make the purpose, technical solution and advantages of this application clearer, the technical solution in this application is supplemented with illustrations below to make this application clearer and more complete.

[0096] In some embodiments, Figure 4 A flowchart of a dual-Canvas layered rendering process is shown.

[0097] In some embodiments, Figure 5 A schematic diagram of a serpentine path generation algorithm is shown. The corresponding calculation formula is as follows: Node X = leftMargin + (index xspacing); Node Y = centerY + sin(index x wave coefficient) · wave amplitude; Among them, the control points of the Bézier curve include: Starting point: (x1, y1); CP1: (x1 + Δx / 2, y1); CP2: (x1 + Δx / 2, y2); End point: (x2, y2).

[0098] In the Bézier curve, CP1 and CP2 are the ControlPoints of the cubic Bézier curve when drawing a serpentine path.

[0099] Figure 6 A schematic diagram of a node path visualization device is shown. It should be understood that this device is related to... Figure 1 The method executed in the middle corresponds to the steps involved in the aforementioned method. The specific functions and effects of the device can be found in the description above. To avoid repetition, detailed descriptions are omitted here.

[0100] The node path visualization device includes: Acquisition unit 210 is used to acquire time node data and configuration parameters; The generation unit 220 is used to generate a serpentine layout path based on time node data and configuration parameters; Create unit 230 to create an off-screen canvas and a main canvas according to configuration parameters; The first drawing unit 240 is used to draw static elements on the off-screen canvas according to the snake layout path to obtain a static cache bitmap; Calculation unit 250 is used to calculate the global progress and segmented progress values ​​of the animation based on the current timestamp of the system; The second drawing unit 260 is used to overlay and draw on the main canvas based on the static cache bitmap, the global animation progress and the segmented progress values ​​to obtain and output animation frames.

[0101] In some embodiments, the generation unit 220 includes: The first acquisition subunit 221 is used to acquire a list of nodes based on time node data; The first calculation subunit 222 is used to calculate the node coordinates of each node in the node list based on the wave amplitude and canvas size in the configuration parameters. Connecting subunit 223 is used to connect adjacent nodes in the node list according to the node coordinates to obtain a serpentine layout path.

[0102] In some embodiments, the first calculation subunit 222 is specifically configured to: obtain index parameters, wave amplitude, and canvas size according to configuration parameters; determine the horizontal spacing according to the total number of nodes in the node list and the canvas size; calculate the X-axis coordinate of each node in the node list according to the index parameters, horizontal spacing, and total number of nodes; calculate the Y-axis coordinate of the canvas center according to the canvas size; calculate the Y-axis coordinate of each node in the node list according to the Y-axis coordinate of the canvas center, the index parameters, and the wave amplitude; and determine the node coordinates of each node in the node list according to the X-axis and Y-axis coordinates of each node in the node list.

[0103] In some embodiments, the first drawing unit 240 includes: The second acquisition subunit 241 is used to acquire the theme color value according to the configuration parameters; The first drawing subunit 242 is used to draw static elements on the off-screen canvas according to the snake layout path and theme color value, and obtain a static cache bitmap.

[0104] In some embodiments, the computing unit 250 includes: The third acquisition subunit 251 is used to acquire the current system timestamp and the preset animation speed coefficient; The second calculation subunit 252 is used to calculate the global progress of the animation and the segmented progress value between each node and the next node based on the current timestamp of the system and the animation speed coefficient.

[0105] In some embodiments, the second drawing unit 260 includes: The second drawing subunit 261 is used to copy the static cache bitmap on the main canvas and draw dynamic elements on the first processing main canvas according to the global progress and segment progress values ​​of the animation to obtain an animation frame containing a static background and dynamic progress; wherein, the dynamic elements include at least a colored progress line in an active state, a moving progress point, and a highlighted node. Output subunit 262 is used to render and output the animation frames of the main canvas.

[0106] In some embodiments, the node path visualization device further includes: The determining unit 270 is used to determine the interactive node corresponding to the interactive behavior and trigger the hover feedback corresponding to the interactive node if the interactive behavior is detected based on the node coordinates and mouse coordinates, after the second drawing unit 260 performs superimposed drawing on the main canvas according to the static cache bitmap, the global animation progress and segment progress values, and outputs the animation frame.

[0107] In some embodiments, the first drawing unit 240 is further configured to, after the second drawing unit 260 performs superimposed drawing on the main canvas according to the static cache bitmap, the global animation progress and the segmented progress value, obtain animation frames and output them, and, under the condition of receiving the user input of dynamically modified configuration parameters, regenerate the serpentine layout path according to the dynamically modified configuration parameters and time node data, and recreate the off-screen canvas and the main canvas according to the dynamically modified configuration parameters, draw static elements on the off-screen canvas according to the serpentine layout path, and obtain the static cache bitmap.

[0108] like Figure 7As shown, this application provides an electronic device 300, which includes a processor 301 and a memory 302. The processor 301 and the memory 302 are interconnected and communicate with each other through a communication bus 303 and / or other forms of connection mechanism (not shown). The memory 302 stores a computer program that can be executed by the processor 301. When the computing device is running, the processor 301 executes the computer program to perform the method in any of the aforementioned optional implementations.

[0109] This application provides a computer-readable storage medium storing a computer program, which, when executed by a processor, performs the method in any of the aforementioned optional implementations.

[0110] The computer-readable storage medium can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as Static Random Access Memory (SRAM), Electrically Erasable Programmable Read-Only Memory (EEPROM), Erasable Programmable Read Only Memory (EPROM), Programmable Red-Only Memory (PROM), Read-Only Memory (ROM), magnetic storage, flash memory, magnetic disk, or optical disk.

[0111] This application provides a computer program product, which includes a computer program that, when run by a processor, executes the method in any of the aforementioned optional implementations.

[0112] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of this application, and not to limit them. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some or all of the technical features therein. These modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of this application, and they should all be covered within the scope of the claims and specification of this application. In particular, as long as there is no conflict, the various technical features mentioned in the embodiments can be combined in any way. This application is not limited to the specific embodiments disclosed herein, but includes all technical solutions falling within the scope of the claims.

Claims

1. A method of node path visualization, characterized by, The method comprises the following steps: acquiring time node data and configuration parameters; generating a snake-shaped layout path according to the time node data and the configuration parameters; creating an off-screen canvas and a main canvas according to the configuration parameters; drawing static elements on the off-screen canvas according to the snake-shaped layout path to obtain a static cache bitmap; calculating an animation global progress and a segmented progress value according to a system current timestamp; superimposed drawing on the main canvas according to the static cache bitmap, the animation global progress and the segmented progress value to obtain an animation frame and output.

2. The node path visualization method of claim 1, wherein, The method comprises the following steps: acquiring a node list according to the time node data; calculating node coordinates of each node in the node list according to a wave amplitude and a canvas size in the configuration parameters; connecting adjacent nodes in the node list according to the node coordinates to obtain a snake-shaped layout path.

3. The node path visualization method of claim 2, wherein, The method comprises the following steps: acquiring an index parameter, a wave amplitude and a canvas size according to the configuration parameters; determining a horizontal interval according to a total number of nodes in the node list and the canvas size; calculating an X-axis coordinate of each node in the node list according to the index parameter, the horizontal interval and the total number of nodes; calculating a canvas center Y-axis coordinate according to the canvas size; calculating a Y-axis coordinate of each node in the node list according to the canvas center Y-axis coordinate, the index parameter and the wave amplitude; determining the node coordinates of each node in the node list according to the X-axis coordinate and the Y-axis coordinate of each node in the node list.

4. The node path visualization method of claim 1, wherein, The method comprises the following steps: acquiring a theme color value according to the configuration parameters; drawing static elements on the off-screen canvas according to the snake-shaped layout path and the theme color value to obtain a static cache bitmap.

5. The node path visualization method of claim 1, wherein, The method comprises the following steps: acquiring a system current timestamp and a preset animation speed coefficient; calculating an animation global progress and a segmented progress value between each node and the next node according to the system current timestamp and the animation speed coefficient.

6. The node path visualization method of claim 1, wherein, The method comprises the following steps: copying the static cache bitmap on the main canvas and superimposed drawing dynamic elements on the first processing main canvas according to the animation global progress and the segmented progress value to obtain an animation frame containing a static background and dynamic progress; wherein the dynamic elements at least include a colored progress line in an activated state, a moving progress point and a highlighted node; rendering and outputting the animation frame of the main canvas.

7. The node path visualization method of claim 1, wherein, After the step of superimposed drawing on the main canvas according to the static cache bitmap, the animation global progress and the segmented progress value to obtain an animation frame and output, the method further comprises the following steps: Under the condition that the mouse coordinates input by the user are received, if an interaction behavior is detected according to the node coordinates and the mouse coordinates, a corresponding interaction node of the interaction behavior is determined, and a hovering feedback corresponding to the interaction node is triggered.

8. The node path visualization method of claim 1, wherein, After the superimposed drawing on the main canvas according to the static cache bitmap, the animation global progress and the segment progress value is performed to obtain an animation frame and output, the method further comprises: Under the condition that a dynamic modification configuration parameter input by the user is received, a snake-shaped layout path is regenerated according to the dynamic modification configuration parameter and the time node data, an off-screen canvas and a main canvas are recreated according to the dynamic modification configuration parameter, and the steps of drawing static elements on the off-screen canvas according to the snake-shaped layout path to obtain a static cache bitmap are performed.

9. The node path visualization method of claim 1, wherein, After the superimposed drawing on the main canvas according to the static cache bitmap, the animation global progress and the segment progress value is performed to obtain an animation frame and output, the method further comprises: Under the condition that a size change signal of the canvas container is detected, a snake-shaped layout path is regenerated according to the configuration parameter, the size change signal and the time node data, an off-screen canvas and a main canvas are recreated according to the configuration parameter and the size change signal, and the steps of drawing static elements on the off-screen canvas according to the snake-shaped layout path to obtain a static cache bitmap are performed.

10. A node path visualization apparatus, characterized by, The node path visualization device comprises: An acquisition unit is configured to acquire time node data and configuration parameters; A generation unit is configured to generate a snake-shaped layout path according to the time node data and the configuration parameters; A creation unit is configured to create an off-screen canvas and a main canvas according to the configuration parameters; A first drawing unit is configured to draw static elements on the off-screen canvas according to the snake-shaped layout path to obtain a static cache bitmap; A calculation unit is configured to calculate an animation global progress and a segment progress value according to a current timestamp of a system; A second drawing unit is configured to perform superimposed drawing on the main canvas according to the static cache bitmap, the animation global progress and the segment progress value to obtain an animation frame and output.

Images