Webpage end formula visualization method, system and product based on abstract syntax tree

Abstract

The invention provides a webpage end formula visualization method, system and product based on an abstract syntax tree, and relates to the technical field of Internet. The method comprises the following steps: creating a canvas at a webpage end and setting a canvas size and a drawing tool; obtaining a to-be-visualized mathematical formula character string, and performing lexical analysis on the mathematical formula character string to obtain a lexical unit sequence; constructing an abstract syntax tree based on the lexical unit sequence; according to a mathematical formula character string and the size of the canvas, determining a coordinate system and a scaling ratio of the mathematical formula character string in the size of the canvas, and obtaining a drawing area; and performing recursive traversal from a root node of the abstract syntax tree, calling a corresponding drawing tool, and drawing a character element corresponding to each tree node in a drawing area according to a traversal path, so that a mathematical formula character string is completely presented in a canvas of a webpage end. According to the method, the problem that the current visualization process is complex and low in efficiency is solved.

Description

Technical Field

[0001] The present invention relates to the field of Internet technology, and in particular to a web page formula visualization method, system and product based on an abstract syntax tree. Background Art

[0002] Currently, formula visualization tends to be used in client desktop software.

[0003] However, although the formula visualization in desktop software is stable and easy to use, it is more suitable for professionals who understand formulas. The visualization process is complicated and inefficient. In addition, the formula visualization in desktop software is too simple or too complicated to be displayed directly on the web page quickly and efficiently. Summary of the invention

[0004] Based on this, it is necessary to provide a web-based formula visualization method, system and product based on an abstract syntax tree to address the above technical problems. By visualizing the formula on the web page, the problem of complex and inefficient visualization process can be solved.

[0005] In a first aspect, the present invention provides a web page formula visualization method based on an abstract syntax tree, the method comprising: Create a canvas on the web page and set the canvas size and drawing tools; Acquire a mathematical formula string to be visualized, perform lexical analysis on the mathematical formula string to obtain a lexical unit sequence; and construct an abstract syntax tree based on the lexical unit sequence; According to the mathematical formula string and the canvas size, determining the coordinate system and scaling ratio of the mathematical formula string in the canvas size to obtain a drawing area; Recursively traverse the root node of the abstract syntax tree, call the corresponding drawing tool, and draw the character elements corresponding to each tree node in the drawing area according to the traversal path, so that the mathematical formula string is completely presented in the canvas of the web page.

[0006] Furthermore, obtaining the lexical unit sequence includes: The numerical formula string is matched with a set regular expression, the numerical formula string is decomposed into separate lexical units, and a plurality of lexical units are arranged in the order of the numerical formula string to obtain a lexical unit sequence.

[0007] Furthermore, constructing an abstract syntax tree includes: According to the context-free grammar and syntax analysis method, the hierarchical structure and operation priority of the lexical unit series are obtained, and the operators in the lexical unit series are used as corresponding tree nodes in the abstract syntax tree to generate an abstract syntax tree reflecting the logical structure of the mathematical formula character string.

[0008] Furthermore, the method further comprises: When a character element is drawn for the first time, the drawing result of the character element is stored in a cache object; when the same character element is drawn again, the character element is directly obtained from the cache object and directly loaded onto the canvas.

[0009] Furthermore, the character elements corresponding to each tree node are drawn according to the traversal path, including: When drawing the mathematical formula string on the canvas, only the key part of the mathematical formula string or the character elements in the area currently visible to the user are drawn; For character elements in non-critical parts or areas temporarily invisible to the user, the drawing operation is delayed until the user performs an interactive operation to make the character elements enter the visible area, and then the character elements are gradually drawn.

[0010] Furthermore, the lexical units include: numbers, operators, function names, variables, and brackets.

[0011] Furthermore, the method further includes: adding an event listener to the canvas element, and in the event processing function, performing interaction by hovering the mouse or clicking the mouse.

[0012] Furthermore, for character elements, the fill color is set using the ctx.fill Style tool; the font and font size are set using the ctx.font tool; and the character elements are drawn to the coordinate positions calculated according to the mathematical formula string using the ctx.fillText tool.

[0013] In a second aspect, the present invention provides a web-based formula visualization system based on an abstract syntax tree, comprising a memory, a processor, and a computer program stored in the memory, wherein the processor executes the computer program to implement the steps of any of the above methods.

[0014] In a third aspect, the present invention provides a computer program product, comprising a computer program / instruction, which implements the steps of any of the above methods when executed by a processor.

[0015] In general, the present invention provides a web page formula visualization method, system and product based on an abstract syntax tree, which can achieve the following beneficial effects compared with the prior art: (1) The present invention constructs an abstract syntax tree, obtains drawing parameters according to the mathematical formula string and the canvas size, and at the same time, traverses the abstract syntax tree, calls the corresponding drawing parameters and draws the character elements corresponding to each tree node according to the traversal path. It can use the set regular expression to match the digital formula string, accurately identify various character elements, increase the accuracy of drawing, and make the mathematical formula string completely presented in the canvas of the web page. With simple configuration and data format, users only need to load the corresponding files and construct the corresponding data format to see the corresponding effect. It is not only easy to use, but also can simply and efficiently display the corresponding formula effect on the web page, which is convenient for formula display on the web page and user reading.

[0016] (2) The present invention obtains the hierarchical structure and operation priority of the lexical unit series based on context-free grammar and syntax analysis. Such a hierarchical structure clearly represents the grammatical information and semantic information of the digital formula string, providing accurate guidance for the subsequent character element drawing.

[0017] (3) For complex character elements with high drawing costs, the present invention introduces character cache technology. When the same character element is drawn again, the character element can be directly obtained from the cache object and loaded directly onto the canvas, avoiding repeated complex calculation and drawing processes, greatly reducing the amount of calculation and drawing time. In particular, for complex formula visualization scenes containing a large number of repeated character elements, the visualization efficiency and performance can be significantly improved.

[0018] (4) For large or complex mathematical formula strings, the present invention adopts a lazy loading strategy to optimize loading performance. When drawing the mathematical formula string on the canvas, only the key parts of the mathematical formula string or the character elements in the user's current visible area are drawn, which reduces the resource consumption and drawing time during the initial loading and improves the visualization response speed and user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] In order to more clearly illustrate the technical solutions in the present invention or the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. The drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0020] Figure 1 It is a method flow diagram of a web page formula visualization method, system and product based on an abstract syntax tree provided by the present invention. DETAILED DESCRIPTION

[0021] In order to make the purpose, technical solution and advantages of the present invention clearer, the technical solution of the present invention will be clearly and completely described below in combination with the drawings and embodiments of the present invention. Obviously, the described embodiments are partial embodiments of the present invention, not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work belong to the scope of protection of the present invention.

[0022] It should be noted that, in the description of the embodiments of the present invention, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a method, step or system including a series of elements includes not only those elements, but also includes other elements not explicitly listed, or also includes elements inherent to such method, step or system. In the absence of further restrictions, an element defined by the sentence "includes a ..." does not exclude the existence of other identical elements in the method, step or system including the element.

[0023] In order to solve the problem of complex and inefficient visualization process, the present invention provides a web page formula visualization method, system and product based on abstract syntax tree, such as Figure 1 As shown, the specific methods include: Step 101: Create a canvas on the web page and set the canvas size and drawing tools.

[0024] In other words, you can create a canvas in an HTML page, set the canvas size and drawing tools. The drawing tools can be obtained by using canvas.get Context('2d') to get the 2D drawing context object ctx of the canvas, which is used for subsequent character element drawing operations.

[0025] For example, drawing tools (ctx tools) may include: ctx.fill Style, ctx.font, ctx.fill Text, etc. ctx.fill Style is used to set the fill color of character elements; ctx.font is used to set the font and size of character elements and adjust the position of character elements; ctx.fill Text is used to draw character elements to the coordinate position in the canvas.

[0026] It should be noted that the canvas size includes the width attribute and the height attribute. For example, the width attribute is set to width="800" and the height attribute is set to height="600".

[0027] Step 102: Obtain a mathematical formula string to be visualized, perform lexical analysis on the mathematical formula string to obtain a lexical unit sequence; and construct an abstract syntax tree based on the lexical unit sequence.

[0028] The mathematical formula string includes multiple elements such as numbers, operators, function names, variables, brackets, etc., for example, "3*(2+x)^2-5 / sin(y)".

[0029] The mathematical formula string to be visualized can be obtained by the user through a text input box, file upload, image recognition or other methods.

[0030] Furthermore, lexical units include: numbers, operators, function names, variables, and brackets.

[0031] As an embodiment, obtaining the lexical unit sequence includes: matching the numerical formula string with a set regular expression, decomposing the numerical formula string into separate lexical units, and arranging the multiple lexical units in the order of the numerical formula string to obtain the lexical unit sequence.

[0032] It should be noted that regular expressions are a powerful text processing tool that uses predefined character sequence patterns to search, match, and manipulate text. They can be used for various text processing tasks such as data validation, data extraction, string parsing, complex text replacement, etc.

[0033] For example, decompose "3*(2+x)^2-5 / sin(y)" into multiple separate tokens: the number "3", operator "*", left bracket "(", number "2", operator "+", variable "x", right bracket ")", operator "^", number "2", operator "-", number "5", operator " / ", function name "sin", left bracket "(", variable "y", right bracket ")".

[0034] Then, the lexical units are sorted in sequence according to “3*(2+x)^2-5 / sin(y)”, and the lexical unit sequence is obtained = [3,*,(,2,+,x,),^,2,-,5, / ,sin,(,y,),].

[0035] As an embodiment, constructing an abstract syntax tree includes: obtaining the hierarchical structure and operation priority of the lexical unit series according to the context-free grammar and the syntax analysis method, and using the operators in the lexical unit series as the corresponding tree nodes in the abstract syntax tree to generate an abstract syntax tree that reflects the logical structure of the mathematical formula string.

[0036] Context-free grammar is a part of formal language theory, which is used to describe the grammatical structure of programming languages. Its characteristic is that there is only one non-terminal symbol on the left side of the production rule, which means that no matter what context the non-terminal symbol appears in, it can be replaced by the corresponding production rule on the right side. The simplicity of this grammar makes it possible to use various analysis algorithms to determine whether a string belongs to a specific language.

[0037] Syntax analysis methods, such as recursive descent analysis, are to identify whether the correct string of formula symbols conforms to the grammatical rules of the language during lexical analysis.

[0038] For example, for the token sequence = [3,*,(,2,+,x,),^,2,-,5, / ,sin,(,y,),], the first level is: operator “^”; the second level is: operator “*” and operator “ / ”; the third level is: operator “^”; and the fourth level is: operator “+”.

[0039] In other words, the root node of the abstract syntax tree is the node representing the entire subtraction operator; its left subtree is the multiplication operation node, including the number "3" and the power operation node, the power operation node includes the bracket expression node and the number "2", the bracket expression node is the addition operation node, and the addition operation node includes the number "2" and the variable "x"; the right subtree is the division operation node, including the number "5" and the function call node, and the function call node includes the function name "sin" and the variable "y"; in this way, an abstract syntax tree is generated.

[0040] Such a hierarchical structure clearly represents the grammatical and semantic information of the formula, providing accurate guidance for the drawing of subsequent character elements.

[0041] Step 103: According to the mathematical formula string and the canvas size, the coordinate system and scaling ratio of the mathematical formula string in the canvas size are determined to obtain a drawing area.

[0042] Determine the appropriate coordinate system and scaling ratio based on the complexity of the math formula string and the canvas size to ensure that the math formula string can be displayed completely and beautifully in the canvas.

[0043] As an embodiment, the coordinate origin is moved to the center of the canvas through ctx.translate (canvas.width / 2, canvas.height / 2), and according to the expected display range and complexity of the math formula string, the ctx.scale tool is used to set an appropriate scaling ratio ctx.scale(0.8, 0.8) to obtain the drawing area of ​​the math formula string, thereby ensuring that the math formula string can be displayed completely and beautifully in the canvas.

[0044] Step 104: recursively traverse the root node of the abstract syntax tree, call the corresponding drawing tool, and draw the character elements corresponding to each tree node in the drawing area according to the traversal path, so that the mathematical formula string is completely presented in the canvas of the web page.

[0045] It should be noted that character elements are consistent with lexical units, including numbers, operators, function names, variables, and brackets. Drawing parameters include: font, size, color, and line style. The drawing size is set according to the drawing area, while the font, color, and line style are set according to user needs.

[0046] As an embodiment, for a character element, the fill color is set using the ctx.fill Style tool; the font and font size are set using the ctx.font tool; and the character element is drawn to the coordinate position calculated according to the mathematical formula string using the ctx.fillText tool.

[0047] For numeric elements and operator elements, use the ctx.fill Style tool to set the fill color, such as black; use the ctx.font tool to set the font and font size, such as ctx.font = '14px Arial'; use the ctx.fillText tool to draw the numeric elements or operator elements to the coordinate position calculated according to the mathematical formula string.

[0048] For example, when drawing the number "3", the appropriate x and y coordinates are calculated based on the mathematical formula string and the canvas size. Assume that x = -50 and y = 0, and then call ctx.fillText('3', -50, 0) to draw the number "3" at the corresponding coordinate position in the drawing area.

[0049] For more complex formula structures such as powers, fractions, and radicals, they are drawn according to the set mathematical rules.

[0050] For example, to draw the power "(2 + x)^2", first draw the expression "2 + x" in the brackets according to the addition operation and the drawing rules of numbers and variables, and then draw the superscript "2" at the appropriate position. The visualization effect of the power can be achieved by reducing the font size and adjusting the y coordinate to shift upward by a certain number of pixels, such as ctx.font = '10px Arial', y -= 5, etc.

[0051] When drawing a fraction, draw the fraction line first. You can use the ctx.beginPath, ctx.moveTo, and ctx.lineTo methods to determine the starting and ending coordinates of the fraction line and draw it. Then draw the expression graphics of the numerator and denominator separately to ensure that the numerator is above the fraction line and the denominator is below the fraction line and the layout is reasonable and beautiful.

[0052] For variable elements, you can also set an appropriate font style, such as italics, to distinguish them from numeric elements and operator elements.

[0053] For function name elements, first draw the function name, and then recursively draw the function's parameter expression. For example, for the function "sin(y)", first draw "sin", then call the corresponding drawing tool to draw the variable "y" according to the syntax tree structure of the variable "y" in the brackets, and at the same time arrange the position relationship between the function name and the parameter reasonably, such as the left bracket following the function name, and the parameter expression in the brackets should be drawn with an appropriate offset. For function curves, determine the coordinates of the sampling points on the curve according to the mathematical definition of the function. For example, for y = sin(x), after a given x value range, such as x from -2 * Math.PI to 2 * Math.PI, with a step size of 0.1, calculate the y value corresponding to each x, that is, y = Math.sin(x), and then convert these coordinate points to the current Canvas coordinate system. Considering the scaling and translation factors, coordinate transformation is performed, ctx.beginPath is used to open the path, and the coordinates of the starting point of the curve are set through ctx.moveTo. Then, smoother curve drawing methods such as ctx.lineTo or ctx.bezierCurveTo are used in a repetitive manner to connect each coordinate point in turn. Finally, the ctx.stroke method is used to draw the function curve, and the curve color (such as blue) and line width (such as 2 pixels) are set through ctx.strokeStyle and ctx.lineWidth, respectively, to enhance the visualization of the curve.

[0054] For the character elements of mathematical formula strings that are complex and costly to draw, such as complex function curve elements and sub-formula elements that appear repeatedly, graphic caching technology is introduced.

[0055] As an embodiment, the method further includes: when drawing a character element for the first time, storing the drawing result of the character element in a cache object; when drawing the same character element again, directly obtaining the character element from the cache object and directly loading it onto the canvas.

[0056] That is to say, when drawing these character elements for the first time, the drawing results are stored in the cache object in the memory, including the drawing path, style information, and the final generated character elements. The unique identifier of the character element is used as an index, so that when the same element is drawn again, the character element is directly obtained from the cache according to the unique identifier, and the draw Image tool is used to quickly draw it on the canvas, avoiding repeated complex calculations and drawing processes, and significantly improving drawing efficiency and performance. The unique identifier can be a hash value generated based on key information such as the element type, parameters, and style.

[0057] For example, for a complex trigonometric function element that appears multiple times in a math formula string, it is cached after the first drawing is completed. Each time the element needs to be drawn, it is directly read and copied from the cache, which greatly reduces the amount of calculation and drawing time. The performance improvement is particularly obvious for complex formula visualization scenes containing a large number of repeated elements.

[0058] Furthermore, after obtaining the mathematical formula string and completing the drawing, the drawn mathematical formula string and the corresponding abstract syntax tree and the drawn character elements can also be cached; when the mathematical formula string is obtained later, it is first searched in the cache database to find the mathematical formula string and the corresponding abstract syntax tree and character element closest to the current mathematical formula string, and the current mathematical formula character is directly changed in the most similar abstract syntax tree to obtain the abstract syntax tree of the current mathematical formula character without having to redraw an abstract syntax tree. Existing character elements can also be directly read and copied in the cache, which greatly reduces the amount of calculation and drawing time, and significantly improves the efficiency of building the abstract syntax tree.

[0059] As another embodiment of the present invention, character elements corresponding to each tree node are drawn according to the traversal path, including: when drawing a mathematical formula string on a canvas, only the key part of the mathematical formula string or the character elements in the current visible area of ​​the user are drawn; and for the character elements in the non-key part or the area temporarily invisible to the user, the drawing operation is delayed until the user performs an interactive operation to make the character elements enter the visible area, and then the character elements are gradually drawn.

[0060] For large or complex mathematical formula strings, the present invention adopts a lazy loading strategy to optimize the initial loading performance. That is to say, during the page loading or formula visualization initialization stage, only the key parts of the formula or the character elements in the user's current visible area are drawn, such as the outer structure of the formula, the main operators and some core functions, etc., and for sub-formulas and complex graphic elements that are temporarily invisible or in non-critical positions, their drawing operations are delayed until the user performs interactive operations (such as scrolling, zooming in and out) to make them enter the visible area, and then these elements are gradually loaded and drawn as needed. In this way, resource consumption and drawing time during initial loading are reduced, and the system response speed and user experience are improved.

[0061] At the same time, it is also possible to combine dynamic monitoring and preloading technology of the visible area to predict and load formula elements that may need to be displayed before the user is about to scroll to a certain drawing area or perform a specific operation, thereby further improving the smoothness and response speed of the interaction.

[0062] For example, in a complex formula visualization that contains multiple nested functions and a large number of calculations, only the outermost expression and the main function framework are drawn initially. When the user scrolls to view the nested sub-formulas inside, the graphics of these sub-formulas are dynamically loaded and drawn, avoiding the long wait caused by loading all elements at once, making the formula visualization process smoother and more efficient.

[0063] In addition, as an embodiment, the method further includes: adding an event listener to the canvas element, and in the event processing function, interacting by hovering the mouse or clicking the mouse to enable the user to draw the mathematical formula string in the canvas of the web page.

[0064] Mouse hover interaction includes: obtaining the coordinates of the mouse on the canvas (event.offsetX and event.offsetY), traversing the drawn character elements, and judging whether the mouse coordinates fall within the range of a certain character element based on the coordinate range information recorded when each character element was drawn.

[0065] Mouse click interaction includes: obtaining the coordinates of the mouse on the canvas (event.offsetX and event.offsetY), traversing the drawn character elements, and judging whether the mouse coordinates fall within the range of a character element based on the coordinate range information recorded when each character element is drawn. Only when the mouse falls within the range of a character element can the corresponding character element be clicked.

[0066] As an embodiment, determining whether the mouse coordinates fall within the range of a character element includes: for each character element, recording its x, y coordinates and width and height information when it is drawn, and determining whether the mouse is hovering over the element by comparing the mouse coordinates with these values.

[0067] If the mouse hovers over an element, you can highlight the element by modifying the drawing parameters of the character element, such as changing the fill color to red using ctx.fillStyle = 'red', using ctx.font = 'bold 14pxArial' to make the font bold, etc., and create a tooltip near the mouse position, and display detailed information about the character element in the tooltip, such as the element type, mathematical meaning, and role in the formula.

[0068] The prompt box can use the HTML div element, and display the prompt box near the mouse through absolute positioning, and set the background color, border, and font style of the prompt box.

[0069] For example, when the mouse hovers over the function name "sin", its color changes to red and is displayed in bold. At the same time, a pop-up prompt box displays "Function name: sin, trigonometric function, represents the sine function relationship, and is used to perform sine operations on the variable [specific variable name] in the current formula", etc., making it easier for users to view and understand the element details.

[0070] If the mouse clicks on a function element, an action can be triggered, such as popping up a new window to display detailed information about the function, including the function's definition, mathematical properties, Taylor series expansion, common application scenarios, etc., or expanding the function to display its detailed expansion, which is convenient for users to further analyze and learn. If the mouse is clicked on a variable element, you can jump to a variable definition description page, or display the relevant constraints, value range and other information of the variable in the current formula in a certain area of ​​the page.

[0071] If the mouse is clicked on a sub-expression, such as an expression in brackets, in a formula editing scenario, further editing operations can be performed on the selected sub-expression, such as modifying operators, adding or deleting elements, etc., to enhance the depth and practicality of interaction between users and visual formulas.

[0072] In a second aspect, the present invention provides a computer system, comprising a memory, a processor, and a computer program stored in the memory, wherein the processor executes the computer program to implement the steps of any one of the above methods.

[0073] In a third aspect, the present invention provides a computer-readable storage medium having a computer program / instruction stored thereon, which implements the steps of any of the above-mentioned methods when executed by a processor.

[0074] The system and storage medium are consistent with the technical solutions of the above method and will not be described in detail here.

[0075] It should be noted that, for the above-mentioned various embodiments, for the sake of simplicity of description, they are all expressed as a series of action combinations, but those skilled in the art should be aware that the present application is not limited by the described order of actions, and according to the present application, certain steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in the specification are all preferred embodiments, and the actions and modules involved are not necessarily required by the present application.

[0076] In the above embodiments, the description of each embodiment has its own emphasis. For parts that are not described in detail in a certain embodiment, please refer to the relevant description of other embodiments. In the several embodiments provided in this application, it should be understood that the disclosed method or system can be implemented in other ways. For example, the embodiments described above are only schematic, such as the division of the units, which is only a logical function division. There may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed.

[0077] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0078] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above-mentioned integrated unit may be implemented in the form of hardware or in the form of software functional units.

[0079] The above is only an exemplary embodiment of the present disclosure, and the scope of the present disclosure cannot be limited thereto. That is, any equivalent changes and modifications made according to the teachings of the present disclosure are still within the scope of the present disclosure. After considering the specification and practicing the disclosure here, those skilled in the art will easily think of the implementation scheme of the present disclosure. This application is intended to cover any modification, use or adaptation of the present disclosure, which follows the general principles of the present disclosure and includes common knowledge or customary technical means in the technical field not recorded in the present disclosure. The description and examples are regarded as exemplary only, and the scope and spirit of the present disclosure are defined by the claims.

[0080] 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.

[0081] It will be easily understood by those skilled in the art that the above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions and improvements made within the spirit and principles of the present invention should be included in the protection scope of the present invention.

Claims

1. A web page formula visualization method based on an abstract syntax tree, characterized in that: The method comprises: Create a canvas on the web page and set the canvas size and drawing tools; Acquire a mathematical formula string to be visualized, perform lexical analysis on the mathematical formula string to obtain a lexical unit sequence; and construct an abstract syntax tree based on the lexical unit sequence; According to the mathematical formula string and the canvas size, determining the coordinate system and scaling ratio of the mathematical formula string in the canvas size to obtain a drawing area; Recursively traverse the root node of the abstract syntax tree, call the corresponding drawing tool, and draw the character elements corresponding to each tree node in the drawing area according to the traversal path, so that the mathematical formula string is completely presented in the canvas of the web page.

2. A web page formula visualization method based on an abstract syntax tree according to claim 1, characterized in that: The obtaining of the lexical unit sequence comprises: The numerical formula string is matched with a set regular expression, the numerical formula string is decomposed into separate lexical units, and a plurality of lexical units are arranged in the order of the numerical formula string to obtain a lexical unit sequence.

3. A web page formula visualization method based on an abstract syntax tree according to claim 1, characterized in that: Building an abstract syntax tree includes: According to the context-free grammar and syntax analysis method, the hierarchical structure and operation priority of the lexical unit series are obtained, and the operators in the lexical unit series are used as corresponding tree nodes in the abstract syntax tree to generate an abstract syntax tree reflecting the logical structure of the mathematical formula character string.

4. A web page formula visualization method based on an abstract syntax tree according to claim 1, characterized in that: The method further comprises: When a character element is drawn for the first time, the drawing result of the character element is stored in a cache object; when the same character element is drawn again, the character element is directly obtained from the cache object and directly loaded onto the canvas.

5. The web page formula visualization method based on an abstract syntax tree according to claim 1, characterized in that: Draw the character elements corresponding to each tree node according to the traversal path, including: When drawing the mathematical formula string on the canvas, only the key part of the mathematical formula string or the character elements in the area currently visible to the user are drawn; For character elements in non-critical parts or areas temporarily invisible to the user, the drawing operation is delayed until the user performs an interactive operation to make the character elements enter the visible area, and then the character elements are gradually drawn.

6. A web page formula visualization method based on an abstract syntax tree according to claim 1, characterized in that: The lexical units include: numbers, operators, function names, variables, and brackets.

7. A web page formula visualization method based on an abstract syntax tree according to claim 1, characterized in that: The method further includes: adding an event listener to the canvas element, and in the event processing function, performing interaction by hovering the mouse or clicking the mouse.

8. The web page formula visualization method based on abstract syntax tree according to claim 1, characterized in that: For character elements, use the ctx.fill Style tool to set the fill color; Use the ctx.font tool to set the font and font size; Use the ctx.fillText tool to draw character elements to the coordinate positions calculated according to the mathematical formula string.

9. A web-based formula visualization system based on an abstract syntax tree, comprising a memory, a processor, and a computer program stored in the memory, characterized in that: The processor executes the computer program to implement the steps of the method according to any one of claims 1 to 8.

10. A computer program product comprising a computer program / instructions, characterized in that When the computer program / instruction is executed by a processor, the steps of the method according to any one of claims 1 to 8 are implemented.

Images