CN114648603B - Method and system for realizing fly-line dynamic effect based on canvas and echarts - Google Patents
Method and system for realizing fly-line dynamic effect based on canvas and echarts Download PDFInfo
- Publication number
- CN114648603B CN114648603B CN202210541889.9A CN202210541889A CN114648603B CN 114648603 B CN114648603 B CN 114648603B CN 202210541889 A CN202210541889 A CN 202210541889A CN 114648603 B CN114648603 B CN 114648603B
- Authority
- CN
- China
- Prior art keywords
- flying
- line
- canvas
- echarts
- arc
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 101
- 230000000694 effects Effects 0.000 title claims abstract description 53
- 238000009877 rendering Methods 0.000 claims abstract description 28
- 230000000007 visual effect Effects 0.000 claims abstract description 12
- 125000004122 cyclic group Chemical group 0.000 claims description 8
- 238000003491 array Methods 0.000 claims description 6
- 238000012544 monitoring process Methods 0.000 claims description 6
- 239000003795 chemical substances by application Substances 0.000 claims description 5
- 238000005562 fading Methods 0.000 claims description 4
- 238000013079 data visualisation Methods 0.000 abstract description 4
- 239000003086 colorant Substances 0.000 abstract description 3
- 238000010586 diagram Methods 0.000 description 4
- 230000004075 alteration Effects 0.000 description 2
- 208000018747 cerebellar ataxia with neuropathy and bilateral vestibular areflexia syndrome Diseases 0.000 description 2
- 238000013459 approach Methods 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 239000000463 material Substances 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 238000010408 sweeping Methods 0.000 description 1
- 238000012800 visualization Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T13/00—Animation
- G06T13/80—2D [Two Dimensional] animation, e.g. using sprites
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Processing Or Creating Images (AREA)
Abstract
The invention discloses a method and a system for realizing fly line dynamic effect based on canvas and echarts, wherein the method comprises the following steps: step S1, determining a tree structure of the document object model, wherein the tree structure comprises a parent element and two child elements; step S2, appointing a scalable vector graphics renderer to generate a visual chart through an echarts instance; step S3, obtaining canvas elements and setting the canvas elements to be positioned relative to parent elements, wherein the width and the height of the canvas elements are set to be the same as those of echarts container elements and those of the parent elements; step S4, acquiring a set of point coordinates on the fly-line trajectory according to the path elements of the scalable vector graphics; step S5, according to the 2D rendering context of the Canvas, calling a method of a Canvas 2D API for drawing an arc path to draw a 360-degree arc on the Canvas and filling colors; and step S6, declaring a flying line moving animation method to realize the flying line moving effect. The method and the system can meet the high requirement of the flying line special effect, and improve the visual experience of the client in the data visualization large-screen display.
Description
Technical Field
The invention relates to the technical field of computers and data processing, in particular to a method and a system for realizing fly-line dynamic effect based on canvas and echarts.
Background
When the visualization large screen is constructed, if the fly-line moving effect moving along a specific path needs to be realized, an echarts tool can be used for generating a specified chart, but the fly-line moving effect is only a path chart lines, and a simple fly-line moving effect can be displayed by configuring a series-lines object. Also, the configuration of animation intervals for the fly-line special effect, delay special effect start time, moving speed of the fly-line, color of the fly-line, and whether to loop is supported. However, the fly-line special effect can only be made on a point-to-point connection line, and the fly-line special effect cannot be set for a bezier curve, an svg path or other charts, such as a smooth broken line chart, a map frame, a pie chart and other visual graphs. Nor does it support setting the length of the fly line, the gradation color of the fly line. The special effect diversity of constructing a visual large screen cannot be met.
However, such approaches have drawbacks: on the first hand, echarts only supports the configuration of flying lines on a path diagram such as a bus route, and cannot be applied to all diagrams of echarts; in the second aspect, even if the echarts own fly-line effect configuration is used, since echarts fly lines are set by setting the special effect pattern and the wake length thereof as percentages, the length of the fly lines cannot be set. Because the echarts flying line can only set the color for the special effect graph, the real color gradual change and the transparent gradual change cannot be set for the whole flying line; in the last aspect, the start position and the end position of the flying line cannot be set even more.
Disclosure of Invention
Aiming at the problems in the prior art, the invention aims to provide a chart generated by using echarts based on canvas to support a special effect of a flying line and the configuration of the special effect of the flying line, so that the special effect of building a visual large screen has various visual changes such as thickness, length, color, shadow, initial position, end position, cycle, delay and the like, and the customer experience is improved.
In order to achieve the above object, the present invention provides a method for realizing fly-line animation effect based on canvas and echarts, which comprises the following steps:
step S1, determining a tree structure of the document object model, wherein the tree structure comprises a parent element and two child elements, the parent element refers to a block-level tag element of the hypertext markup language, and the child elements refer to a block-level element and a canvas element of the hypertext markup language respectively (the elements refer to all codes from the start tag to the end tag);
step S2, generating a visual chart by using a scalable vector graphics renderer through an echarts instance, monitoring a rendering completion event, and acquiring path elements of the echarts chart in a scalable vector graphics corresponding to the hypertext markup language in the chart rendering completion event;
step S3, obtaining canvas elements and setting the canvas elements to be positioned relative to parent elements, setting the distance between the canvas elements and the top and the left of the parent elements to be zero, setting the width and the height of the canvas elements to be the same as those of echarts container elements and those of the parent elements, and obtaining 2D rendering context of the canvas through JavaScript language;
step S4, according to the path element in the scalable vector graphics obtained in step S2, call the svgpathelement. gettotallength () method existing in the JavaScript language, and this method returns the calculated value of the total path length (in units of user units) by the user agent, that is, the total length of the fly-wire trajectory path. (the SVGPathElement interface corresponds to a path element in a scalable vector graph), then calling a getPoint AtLength () method to return point coordinates of a given distance on a flight path, calculating the distance corresponding to each different point coordinate according to the number of point coordinate sets, transmitting the distance into an existing getPoint Length () method in a JavaScript language, obtaining corresponding point coordinates, and putting the point coordinates into a point coordinate set to obtain a point coordinate set on a flight path;
step S5, calculating a set of adjacent point coordinates initialized by flying wires according to the number of the point coordinates of default flying wires (generally thirty percent of the total length of the flying wire track), circulating the set of the points, then calling a Canvas 2D API method for drawing an arc path according to the 2D rendering context of the Canvas to draw a 360-degree arc on the Canvas and filling colors, wherein the adjacent arc can form a line segment visually on the Canvas;
step S6, declaring a flying wire moving animation method, wherein the initial value of a declaration variable is the number of point coordinates of a flying wire, so that the variable automatically increases the flying wire moving speed each time, then a point coordinate set required by each flying wire is taken out from a point coordinate set of a flying wire track, the operations are repeatedly executed through the existing frame animation window.
Further, in step S2, a path element in the scalable vector graphics of the echarts-generated graphics is obtained, an echarts instance is initialized using a scalable vector graphics renderer, then a chart rendering completion event is monitored by configuring an echarts graphics configuration item, and a path element in the generated scalable vector graphics is obtained in a callback method by calling a document in JavaScript language getelementbytagnamens () method. Wherein the echarts graphic configuration items are required parameters for generating graphics in an echarts library;
further, in step S3, it is necessary to set the absolute positioning in the cascading style sheet for the parent element first, the width and height of the child element echarts container (one block level element of the hypertext markup language) and the child element canvas element are set to be the same as those of the parent element, and the relative positioning in the cascading style sheet is set, and the distance to the top and left of the parent element is set to be zero; and ensuring that the canvas element and the echarts container element are completely covered, and acquiring the 2D rendering context of the canvas by a getContext () method in the JavaScript language.
Further, in step S4, according to the path element in the chart scalable vector graphics obtained in step 2, the path element in the scalable vector graphics is the flying trace track that the flying line needs to pass through, step S4 includes the following sub-steps:
step S41, call the svgpathelement.gettotallength () method in the JavaScript language according to the path element in the scalable vector graphics, and return the calculated value of the total path length (in units of users) by the user agent, that is, the total length of the fly-line trajectory path. (the SVGPathElement interface corresponds to a path element in a scalable vector graph), the getTotalLength method returns the total length of the flying-line track, then a getPoint AtLength () method in a JavaScript language is called to return point coordinates of a given distance on the path of the flying-line track, the value range of the parameter of the method is 0 to the total length of the flying-line track, and the getPoint AtLength () method returns the coordinates of a point of the given distance on the path; therefore, the coordinates of any point on the flying trace can be obtained according to the values of the parameters which are continuously changed;
step S42, defining the number of point coordinate sets of the flying trace, which is generally defined as the total length of the flying trace, because the flying trace enters the flying trace from the head and leaves the flying trace from the tail in consideration of the effect of flying trace movement, the number of point coordinate sets is the total length of the flying trace plus twice the length of the flying trace rounded downwards;
step S43, defining the number of point coordinate sets of the actual flying line segments, the number of circulating point coordinate sets, setting the number of point coordinate sets of the flying line segments with negative circulating variables, wherein each circulating variable is increased by 1, the circulating variable is transmitted into the getPoint AtLength method in each circulation to obtain the point coordinates of the corresponding distance, then each point coordinate is put into the point coordinate set of the flying line track, when the circulating variable is larger than the number of the point coordinate sets defined in the step S42, the current circulation is ended, and the set of continuous point coordinates on the flying line track can be obtained after the circulation.
Further, in step S5, attributes of the circular arc are defined according to the characteristics of the flying line, where the attributes include a horizontal axis coordinate, a vertical axis coordinate, a radius of the circular arc, a filling color of the circular arc, and a transparency in a rectangular coordinate system, and a method for rendering and drawing the circular arc on the canvas through a canvas rendering context is created according to the attributes of the circular arc, so as to facilitate cyclic call for creating different circular arcs.
Further, the method for creating the generated arc comprises the following steps:
firstly, defining an arc array for caching different arc information on a flying line; the length of the flying line is determined, so that the number of points formed by the flying line is also determined, whether the arc attribute information exists at the index position of the current array can be judged according to the indexes of the arcs in the arc array, and if the arc attribute information exists, only the horizontal and vertical coordinate values of the current arc are replaced; if the circular arc does not exist, storing all attribute information of the circular arc to the current array index position;
secondly, determining that the arc array has attribute information of all arcs, and adding the arcs with the specified attribute information on the canvas according to the attribute information and canvas api; and defining the number of flying line arcs, circulating the number of flying line arcs, assigning coordinate information in a point coordinate set of a flying line track to circular arc attribute horizontal coordinates and vertical coordinates in a flying line point coordinate array, and obtaining an initial flying line arc array.
Further, in step S6, the movement of the line segment along the path is realized by calling a method for generating an arc and a method for generating a line from an arc; the method comprises the steps of defining a flying wire moving speed variable, defining an initial value of a loop variable as the number of flying wire point coordinate sets, automatically increasing the flying wire moving speed variable every time, then calling a method of generating a line by an arc, completely displaying a flying wire consisting of adjacent arcs on a canvas, performing emptying operation of the canvas before the method of generating the line by the arc is called by automatic increase every time, emptying a line segment consisting of the adjacent arcs rendered and drawn on the canvas last time, starting a window.
Further, in order to achieve the effect of head entering and tail gradually exiting of the flying line, a point coordinate set of the flying line track is required, the horizontal and vertical coordinates inside all the point coordinates of the number of flying line point coordinate arrays before the flying line are set as a point outside the canvas, and the horizontal and vertical coordinates inside all the point coordinates of the number of flying line point coordinate arrays behind the flying line are also set as a point outside the canvas, so that the effect of head entering and tail gradually exiting is achieved.
Further, when the loop variables are accumulated to the number which is larger than the sum of the total track circular arcs and the number of the flying line circular arc sets which is twice, the number of the flying line circular arc sets is reset, and canvas clearing operation is performed once after the frame animation is completed each time, so that flying lines formed by point connection move along the track generated by the echarts chart.
On the other hand, the invention also provides a system for realizing the flying line moving effect based on the canvas and the echarts, and the system is used for realizing the method for realizing the flying line moving effect based on the canvas and the echarts.
The invention can solve the technical problem of single flying line special effect style and poor visual experience in the prior art, and provides a canvas-based method, wherein most of charts generated by echarts support the flying line special effect and the configuration of the flying line special effect meets higher requirements, the charts generated by echarts all support the flying line moving effect, and can meet basic attribute settings of the flying line, such as thickness, length, color, shadow, initial position, end position, circulation, delay and the like, and the visual experience of a client is improved in data visualization large-screen display.
Drawings
FIG. 1 is a schematic flow chart illustrating a method and a system for implementing flying-line animation based on canvases and echarts according to an embodiment of the present invention;
FIG. 2 is a schematic flow chart illustrating the acquisition of flying lead trajectory according to an embodiment of the present invention;
FIG. 3 is a diagram illustrating a tree structure of a document object model in accordance with an exemplary embodiment of the present invention;
FIG. 4 illustrates a graphical representation of a line graph generated in accordance with an exemplary embodiment of the present invention;
FIG. 5 shows a schematic representation of a flying wire segment after one second of movement in accordance with a specific embodiment of the invention;
FIG. 6 shows a schematic representation of the line-of-flight behavior during motion in accordance with a specific embodiment of the present invention;
fig. 7 shows a schematic diagram of the line-of-flight effect at the end of a movement according to a specific embodiment of the invention.
Detailed Description
The technical solutions of the present invention will be described clearly and completely with reference to the accompanying drawings, and it is to be understood that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
In the description of the present invention, it should be noted that the terms "center", "upper", "lower", "left", "right", "vertical", "horizontal", "inner", "outer", etc., indicate orientations or positional relationships based on the orientations or positional relationships shown in the drawings, and are only for convenience of description and simplicity of description, but do not indicate or imply that the device or element being referred to must have a particular orientation, be constructed and operated in a particular orientation, and thus, should not be construed as limiting the present invention. Furthermore, the terms "first," "second," and "third" are used for descriptive purposes only and are not to be construed as indicating or implying relative importance.
In the description of the present invention, it should be noted that, unless otherwise explicitly specified or limited, the terms "mounted," "connected," and "connected" are to be construed broadly, e.g., as meaning either a fixed connection, a removable connection, or an integral connection; can be mechanically or electrically connected; they may be connected directly or indirectly through intervening media, or they may be interconnected between two elements. The specific meanings of the above terms in the present invention can be understood by those skilled in the art according to specific situations.
The following describes in detail a specific embodiment of the present invention with reference to fig. 1 to 7. It should be understood that the detailed description and specific examples, while indicating the present invention, are given by way of illustration and explanation only, not limitation.
The invention discloses a method and a system for realizing flying line dynamic effect based on canvas and echarts. Echarts is a JavaScript-based data visualization chart library, and provides a data visualization chart which is intuitive, vivid, interactive and customizable. The canvas element draws an image on a web page using JavaScript. canvases have a variety of drawing paths, rectangles, circles, characters, and methods of adding images that can create rich graphical references.
As shown in fig. 1, the basic flow of the method for realizing the fly-line effect based on canvas and echarts is as follows:
step S1, determining the tree structure of the document object model;
wherein the tree structure comprises a parent element and two child elements, the parent element refers to a block-level tag element of the hypertext markup language, and the child elements are respectively a block-level element of the hypertext markup language and a canvas element (elements refer to all codes from a start tag to an end tag);
step S2, generating a visual chart through an echarts instance scalable vector graphics renderer, monitoring a rendering completion event, and acquiring path elements of the echarts chart in the scalable vector graphics corresponding to the hypertext markup language in the chart rendering completion event;
step S3, setting the absolute positioning in the cascading style sheet for the father element, setting the width and height of the child element echarts container (a block level element of the hypertext markup language) and the canvas element of the child element to be the same as the width and height of the father element, setting the relative positioning in the cascading style sheet, and setting the distance between the top and the left side of the father element to be zero; ensuring that canvas elements and echarts container elements are completely covered, and acquiring a 2D rendering context of the canvas by an existing getContext () method in a JavaScript language;
step S4, according to the path element in the scalable vector graphics obtained in step S2, call the svgpathelement. gettotallength () method existing in the JavaScript language, and this method returns the calculated value of the total path length (in units of user units) by the user agent, that is, the total length of the fly-wire trajectory path. (the SVGPathElement interface corresponds to a path element in a scalable vector graph), then calling a getPoint AtLength () method to return point coordinates of a given distance on a flight path, calculating the distance corresponding to each different point coordinate according to the number of point coordinate sets, transmitting the distance into an existing getPoint Length () method in a JavaScript language, obtaining corresponding point coordinates, and putting the point coordinates into a point coordinate set to obtain a point coordinate set on a flight path;
step S5, calculating a set of adjacent point coordinates initialized by flying wires according to the number of the point coordinates of default flying wires (generally thirty percent of the total length of the flying wire track), circulating the set of the points, then calling a Canvas 2D API method for drawing an arc path according to the 2D rendering context of the Canvas to draw a 360-degree arc on the Canvas and filling colors, wherein the adjacent arc can form a line segment visually on the Canvas;
step S6, declaring a flying wire moving animation method, wherein the initial value of a declaration variable is the number of point coordinates of a flying wire, so that the variable automatically increases the flying wire moving speed each time, then a point coordinate set required by each flying wire is taken out from the point coordinate set of the flying wire track, the operation is repeatedly executed by calling the existing frame animation window.
Specifically, in step S2, a scalable vector graphics path element of the echarts-generated graphics is obtained, a scalable vector graphics renderer is used to initialize an echarts instance, and then an echarts configuration item is configured, for example, a line graph is generated, as follows:
and then monitoring a chart rendering completion event, and acquiring the generated scalable vector graphic path element by calling a document. Wherein the echarts configuration items are parameters required for generating the graphics in the echarts library.
Specifically, in step S3, it is necessary to set the absolute position in the cascading style sheet for the parent element, set the width and height of the child element echarts container (one block level element of the hypertext markup language) and the child element canvas element to be the same as the width and height of the parent element, and set the relative position in the cascading style sheet, and set the distance to the top and left of the parent element to be zero; ensuring that the canvas element and the echarts container element are completely covered, and acquiring a 2D rendering context of the canvas by a getContext () method in a JavaScript language;
specifically, in step S4, according to the chart scalable vector graphic path element obtained in step S2, that is, the fly line trajectory through which the fly line needs to pass, in step S41, the method calls the existing getTotalLength method in the JavaScript language according to the scalable vector graphic path element, returns the total length (unit pixel) of the fly line trajectory, and then calls the existing method getpointlength (L) in the JavaScript language, where L represents the length, and has a value ranging from 0 to the total length of the fly line trajectory, and this method returns the coordinates of the point of the specified distance on the path. Therefore, according to the length of the L which is continuously changed (more than 0 and less than the total length of the track), the coordinates of any point on the flying line track can be obtained. In step S42, it is necessary to define how many points of the flying trace consist (generally defined as the total length of the flying trace), but since the effect of the flying trace is that the tail disappears as the head enters, the number of point coordinate sets is rounded down to the number of flying trace plus twice the number of arc sets of flying trace. In step S43, to obtain the point coordinate set of the actual fly-line trajectory, the number of point coordinate sets of the actual fly-line segment needs to be defined first, the number of point coordinate sets of the fly-line segment with a negative cyclic variable is set, the cyclic variable increases by 1 for each cycle, the cyclic variable is transmitted to the existing getPointAtLength method in JavaScript language in each cycle to obtain the point coordinates of the corresponding distance, and then the point coordinates of each cycle are put into the point coordinate set of the fly-line trajectory, when the cyclic variable is greater than the number of point coordinate sets defined in step S42, the current cycle is ended, and through the above cycles, the set of continuous point coordinates on the actual fly-line trajectory can be obtained. The flow chart is shown in FIG. 2;
the pseudo code is as follows:
the specific point coordinate set on the actual flying line track is taken, so that the circular arc can be moved along the flying line track simply, one circular arc moving implementation step is to declare a global variable to record the percentage value of the circular arc, so that the global variable value increases the moving speed by itself, for example, 0.3, each time the circular arc moves, then the percentage of the global variable is calculated and multiplied by the total length of the flying line track, and the result is transmitted into an existing path.
This completes the circular motion of the circular arc on the path generated by the echarts charts.
Specifically, in step S5, according to the idea of completing the circular arc moving on the trajectory in step S4, the attribute of the circular arc needs to be defined according to the characteristics of the flying line, the abscissa and the ordinate of the rectangular coordinate system are needed, the thickness of the flying line is related to the radius of the circular arc, so the radius of the circular arc needs to be defined, and the color and the tail-sweeping effect of the flying line are related to the filling and the transparency of the circular arc, so the filling color and the transparency of the circular arc attribute are needed to be defined, so the attribute of the circular arc is as follows:
after the attributes required by the circular arc are defined, a method for generating the circular arc can be created, and the method is defined to facilitate the cyclic calling for creating different circular arcs. Firstly, defining a circular arc array set for caching the created different circular arc information. The length of the flying line is determined, so that the number of points formed by the flying line is also determined, whether the arc attribute information exists at the index position of the current array can be judged according to the index of the arc in the arc array, if so, only the horizontal and vertical coordinate values of the current arc are replaced, and if not, all the information of the arc is stored to the index position of the current array.
If all the arc attribute information exists in the arc array forming the flying line, the specified arc of the attribute information can be added to the canvas according to the attribute information and the canvas api. The arc generation method pseudo code is as follows:
defining the number of arcs forming the flying line, circularly forming the number of arcs forming the flying line, assigning coordinate information in a point coordinate set of a flying line track to an arc attribute abscissa and an ordinate in a flying line point coordinate set, taking an initial flying line arc array of the flying line, and circularly calling a generating arc method _ drawCircle (), so that a generating line method pseudo code is as follows:
the variables in the method for generating the line comprise the number of arcs forming the flying line, a coordinate set of track points of the flying line and the variable of the current position of the recording line. The method generates an initial flying line segment by forming an array set of flying line arcs and drawing and rendering adjacent point connections on canvas.
Specifically, in step S6, the method for generating the arc and the method for generating the line in step S5 are obtained from step S4, so that the line segment can be moved along the path by calling the two methods in step S6. Since a moving speed variable S needs to be defined when a line segment can move, and the initial value of a variable P defined above is the number i of arcs forming a flying line, if the variable P is made to increase the moving speed variable S by itself, and then the arc generating method is called, arcs on the flying line trajectory can be completely displayed on a canvas, so that the canvas needs to be emptied before the method for drawing a line is called by itself, namely, the existing clearRec () method in canvas is called, and the above operation is repeated by starting the existing frame animation method requestAnimationFrame () in JavaScript language, so that the moving of the flying line segment on the flying line trajectory can be realized, and the pseudo code is as follows:
considering the effect of head entering and tail fading out of the flying line, a point coordinate set of the flying line track is needed, the horizontal and vertical coordinates in all the point coordinates of the number of flying line point coordinate arrays in front of the set are set as a point outside the canvas, and the horizontal and vertical coordinates in all the point coordinates of the number of flying line point coordinate arrays in back of the set are also needed to be set as a point outside the canvas, so that the effect of head entering and tail fading out is achieved.
And when the loop variables of each time are accumulated to be more than the sum of the total track circular arc number and twice of the number of the flying line circular arc sets, resetting the number of the flying line circular arc sets, and performing canvas clearing operation once after the frame animation is completed each time to enable the flying lines formed by point connection to move along the track generated by the echarts chart.
In general, when the loop variables are accumulated to a number greater than the total track circular arc number plus twice the number of the flying line circular arc sets, the number is reset to the number of the flying line circular arc sets (the flying line length is increased by two times so that the flying line has the effect of entering from the head and ending at the tail), the canvas is cleared once after the drawing of the graph is finished, namely after each frame of animation is finished, the line formed by the circular arcs drawn last time is cleared, the circular arcs drawn on the canvas this time are connected into a line, each frame of the frame animation is called to perform the repeated operation, and the line formed by the circular arcs moves along the track generated by the echarts chart, so that the flying line moving effect is formed.
The method has the advantages that the attribute of the flying line is changed simply, the attributes such as color, thickness and the like corresponding to the flying line can be changed only by changing the attributes such as the color size and the like of the circular arc, the circular arc array of the trajectory of the flying line is recombined or changed, the starting point and the ending point of the flying line can be changed, and the length of the flying line is changed by changing the number of the circular arcs forming the flying line.
The charts generated by echarts all support fly-line dynamics and can satisfy basic property settings of the fly-line such as thickness, length, color, shading, start position, end position, loop, delay, and the like.
Various visual charts are obtained through echarts, and the fly-line effect can be added to various charts without specifying a specific chart.
In one embodiment, after sales data of a certain commodity in 1-12 months of a year is represented by a line drawing of echarts, an arc flying line which accounts for thirty percent of the length of a flying line track of the line drawing needs to be manufactured on the line drawing of echarts, the flying line speed is 15 pixels per second, the flying line width is 2 pixels, the flying line is white, the flying line enters from the head of the line drawing, and the tail gradually comes out of the line drawing to achieve the effect of cyclic reciprocation.
The result of step S1 according to the present invention is to add a layer of block-level parent elements and a layer of sibling elements that are hierarchically identical to itself outside the echarts line graph container elements, and the tree structure of the document object model is shown in fig. 3.
Setting the absolute positioning of a parent element, and setting the relative positioning of an echarts line chart container element and a canvas element; if the parent element is set to be 300 pixels wide and 150 pixels high, then the echarts line drawing container element and canvas element also need to be set to be 300 pixels wide and 150 pixels high; according to the above step S2, according to the echarts usage method, using a scalable vector graphics renderer to initialize an echarts instance, rendering a line graph, and generating a line graph according to actual data as shown in fig. 4, where the abscissa represents a time axis of 1 to 12 months and the ordinate represents sales data volume of a certain commodity in the month, and making a fly-line special effect along the line graph, the steps are as follows:
monitoring a graph rendering completion event of a line graph according to an existing event in echarts, calling a getElementsByTagNamenNS () method of a JavaScript language to obtain a scalable vector graph path element set after monitoring that the rendering of the line graph is completed, wherein the specific codes are as follows:
according to the step S3, the canvas element is obtained at present, and then the context of the canvas element is obtained by calling the JavaScript existing method getContext according to the canvas element, wherein the codes are as follows:
according to the step S4, the scalable vector graphic path element, that is, the trajectory path on which the fly line is to run, calls the existing method gettotaltength of the scalable vector graphic path element to obtain the total length of the line graph, and then the number of arcs forming the fly line is the total length of thirty percent, so the number of point coordinate sets of the fly line trajectory is the total length plus twice the number of arc coordinate sets forming the fly line, and the number of cycles is determined, the variable of the cycle is set as the negative value of the number of arc coordinate sets forming the fly line, the cycle variable increases by 1 after each cycle, calls the existing method getpointlength () of the scalable vector graphic path element, and transmits the cycle variable as a parameter into the above method, so as to obtain the point coordinate corresponding to the actual distance of the graphic, and the point coordinate obtained each time is stored in the point coordinate set of the fly line trajectory to be cached, after the circulation is finished, a point coordinate value set of the finished flying trace track is obtained;
according to the step S5, because the flying line forming thought is a line segment formed by connecting adjacent arcs, a method of drawing an arc on a canvas needs to be created first, the color of the arc is initialized to be white, because the thickness of the flying line is 2 pixels, the radius of the arc is set to be 1 pixel, and the horizontal and vertical coordinates take values from the point coordinate value set of the flying line track; the method for drawing the single arc on the canvas needs to be circularly called until the number of the arcs forming the flying line is circularly finished; the points where the initialized flying line is the circular arc at the time of the gradual entry from the head should all be invisible outside the canvas, and if the flying line moving speed is set to 15 pixels per second, the flying line segment one second after that movement is shown in fig. 5, and the box is shown as the flying line just entered. At the moment, the flying line just enters the track with the length of 15 pixels, namely other arcs are drawn outside the canvas, and the line at any position on the line graph can be drawn only by drawing 15 arcs on the canvas and covering the track of the line graph;
according to the step S6, a JavaScript frame animation is called, a loop variable is changed, so that a variable is incremented by 15 pixels each time the frame animation is executed, that is, the horizontal and vertical coordinate position of the arc can be continuously changed, and then a corresponding arc can be drawn on the canvas according to the horizontal and vertical coordinates of the arc, and when the arcs forming the flying line are all drawn, a line is visually formed, but only all points on the trajectory of the flying line are drawn on the canvas, so that all arcs on the canvas at the previous time need to be cleared at each frame animation, and the flying line effect is achieved, as shown in fig. 6 and 7.
On the other hand, the invention also provides a system for realizing the flying line moving effect based on the canvas and the echarts, and the system is used for realizing the method for realizing the flying line moving effect based on the canvas and the echarts.
In the description herein, references to the description of the terms "embodiment," "example," etc., mean that a particular feature, structure, material, or characteristic described in connection with the embodiment or example is included in at least one embodiment or example of the invention. In this specification, the schematic representations of the terms used above are not necessarily intended to refer to the same embodiment or example. Furthermore, various embodiments or examples described in this specification and features thereof may be combined or combined by those skilled in the art without contradiction.
Although embodiments of the present invention have been shown and described, it is understood that the above embodiments are illustrative and not to be construed as limiting the present invention, and that modifications, alterations, substitutions, and alterations may be made to the above embodiments by those of ordinary skill in the art without departing from the scope of the present invention.
Claims (10)
1. A method for realizing fly-line animation effect based on canvas and echarts is characterized by comprising the following steps:
step S1, determining a tree structure of the document object model, wherein the tree structure comprises a parent element and two child elements, the parent element refers to a block-level tag element of the hypertext markup language, and the two child elements are respectively a block-level element and a canvas element of the hypertext markup language;
step S2, generating a visual chart through an echarts instance scalable vector graphics renderer, monitoring a rendering completion event, and acquiring path elements of the echarts chart in the scalable vector graphics corresponding to the hypertext markup language in the chart rendering completion event;
step S3, obtaining canvas elements and setting the canvas elements to be positioned relative to parent elements, setting the distance between the canvas elements and the top and the left of the parent elements to be zero, setting the width and the height of the canvas elements to be the same as the width and the height of echarts container elements and the width and the height of the parent elements, and obtaining 2D rendering context of the canvas;
step S4, according to the path elements in the scalable vector graphics obtained in step S2, returning the calculated value of the total path length by the user agent, returning the point coordinates of the given distance on the fly-line trajectory path, calculating the distance corresponding to each different point coordinate according to the number of the point coordinate sets to obtain the corresponding point coordinates, and putting the corresponding point coordinates into the point coordinate sets to obtain the point coordinate sets on the fly-line trajectory;
step S5, calculating a set of adjacent point coordinates initialized by the flying line according to the number of the point coordinates of the default flying line, and circulating the set of the points to form a line segment visually on the canvas by the adjacent points;
and step S6, declaring a flying line moving animation method, wherein the initial value of a declaration variable is the number of point coordinates of flying lines, so that the variable increases the moving speed of the flying lines each time, then taking out the point coordinate set required by each flying line from the point coordinate set of the flying line track, repeatedly executing the operations, drawing arcs through circulating the point coordinate set of the flying lines according to the 2D rendering context of the canvas each time, calling the operation of emptying the canvas after each circulation to empty the arcs drawn on the canvas last time, and changing the color and the transparency of each arc so that line segments formed by the connected arcs form the flying line moving effect.
2. The method for achieving fly-line animation based on canvas and echarts as claimed in claim 1, wherein in step S2, obtaining path elements in scalable vector graphics of echarts-generated graphics, initializing echarts instances using a scalable vector graphics renderer, then obtaining path elements in the generated scalable vector graphics by calling document.getelementbytagnamens () method in the JavaScript language by configuring echarts configuration items, then listening for chart rendering completion events, and in the callback method.
3. The method for realizing fly-line effect based on canvas and echarts as claimed in claim 2, wherein in step S3, it is required to set the absolute position in the cascading style sheet for the parent element first, the width and height of the child element echarts container and the child element canvas element are set to be the same as the width and height of the parent element, and the relative positions in the cascading style sheet are set, and the distances to the top and left of the parent element are set to be zero; ensuring that the canvas element and echarts container element are completely covered, and acquiring the 2D rendering context of the canvas by a getContext ('2D') method in JavaScript language.
4. The method for realizing flying-line animation based on canvas and echarts as claimed in claim 3, wherein in step S4, according to the path element in the scalable vector graphics obtained in step S2, the path element in the scalable vector graphics is the flying-line trajectory path that the flying line needs to pass through, step S4 includes the following sub-steps:
step S41, according to the path element in the scalable vector graphics, invoking the SVG PathElement. getTotalLength () method in the JavaScript language, which returns the calculated value of the total path length by the user agent, returning the total length of the fly-line track through the getTotalLength () method, then invoking the getPoint AtLength () method in the JavaScript language to return the point coordinates of the given distance on the fly-line track path, wherein the value range of the getPoint AtLength () method parameter is 0 to the total length of the fly-line track, and the getPoint AtLength () method returns the coordinates of the point of the given distance on the path; therefore, the coordinates of any point on the flying trace can be obtained according to the values of the parameters which are continuously changed;
step S42, defining the number of point coordinate sets of the flying trace track, wherein the flying trace moving effect has the realization effect that the flying trace enters the flying trace track from the head and leaves the flying trace track from the tail, and the number of the point coordinate sets is the sum of the total length of the flying trace track and twice of the length of the flying trace and is rounded downwards;
step S43, defining the number of point coordinate sets of the actual flying line segments, the number of circulating point coordinate sets, setting the number of point coordinate sets of the flying line segments with negative circulating variables, wherein each circulating variable is increased by 1, the circulating variable is transmitted into the getPoint AtLength method in each circulation to obtain the point coordinates of the corresponding distance, then each point coordinate is put into the point coordinate set of the flying line track, when the circulating variable is larger than the number of the point coordinate sets defined in the step S42, the current circulation is ended, and the set of continuous point coordinates on the flying line track can be obtained after the circulation.
5. The method for achieving flying line animation based on canvas and echarts as claimed in claim 4, wherein in step S5, the attributes of the circular arc are defined according to the characteristics of the flying line, the attributes include the abscissa axis coordinate, the ordinate axis coordinate, the radius of the circular arc, the filling color and the transparency of the circular arc in the rectangular coordinate system, and the method for rendering and drawing the circular arc on the canvas through the canvas rendering context is created according to the attributes, so as to create different circular arcs through cyclic calling.
6. The canvas and echarts-based fly-line animation method as claimed in claim 5, wherein the method for rendering the drawing arc on the canvas comprises the following steps:
firstly, defining an arc array for caching different arc information on a flying line; the length of the flying line is determined, so that the number of points formed by the flying line is also determined, whether the arc attribute information exists at the index position of the current array can be judged according to the indexes of the arcs in the arc array, and if the arc attribute information exists, only the horizontal and vertical coordinate values of the current arc are replaced; if the circular arc does not exist, storing all attribute information of the circular arc to the current array index position;
secondly, determining that the arc array has attribute information of all arcs, and adding the arcs with the specified attribute information on the canvas according to the attribute information and canvas api; and defining the number of the flying line arcs, circulating the number of the flying line arcs, assigning coordinate information in a point coordinate set of a flying line track to circular arc attribute abscissa and ordinate in a flying line point coordinate array, and obtaining an initial flying line arc array.
7. The method for realizing fly-line animation based on canvas and echarts as claimed in claim 6, wherein in step S6, the line segment is moved along the path by calling the method for generating the circular arc and the method for generating the line from the circular arc; the method comprises the steps of defining a flying wire moving speed variable, defining an initial value of a loop variable as the number of flying wire point coordinate sets, automatically increasing the flying wire moving speed variable by the loop variable every time, then calling a method of generating a line by an arc, completely displaying a flying wire consisting of adjacent arcs on a canvas, performing emptying operation of the canvas before the method of generating the line by the arc is called by the loop each time, emptying a line segment consisting of the adjacent arcs rendered and drawn on the canvas last time, starting a window.
8. The method for realizing flying wire moving effect based on canvas and echarts as claimed in claim 7, wherein in order to realize the flying wire head entering and tail fading effect, a point coordinate set of flying wire track is required, the horizontal and vertical coordinates inside all the point coordinates of the number of flying wire point coordinate arrays before the set are set as a point outside the canvas, and the horizontal and vertical coordinates inside all the point coordinates of the number of flying wire point coordinate arrays after the set are also required to be set as a point outside the canvas, so as to achieve the effect of head entering and tail fading.
9. The method for realizing flying-line animation based on canvas and echarts as claimed in claim 8, wherein each time the loop variables are accumulated to a sum of more than the total number of trajectory arcs plus two times of the number of flying-line arc sets, the sum is reset to the number of flying-line arc sets, and a canvas clearing operation is performed after each frame animation is completed, so that the flying lines formed by connecting points move along the trajectory generated by the echarts chart.
10. A system for realizing flying-line animation based on canvas and echarts, which is used for realizing the method for realizing flying-line animation based on canvas and echarts according to any one of claims 1 to 9.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210541889.9A CN114648603B (en) | 2022-05-19 | 2022-05-19 | Method and system for realizing fly-line dynamic effect based on canvas and echarts |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210541889.9A CN114648603B (en) | 2022-05-19 | 2022-05-19 | Method and system for realizing fly-line dynamic effect based on canvas and echarts |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN114648603A CN114648603A (en) | 2022-06-21 |
| CN114648603B true CN114648603B (en) | 2022-08-05 |
Family
ID=81997249
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210541889.9A Active CN114648603B (en) | 2022-05-19 | 2022-05-19 | Method and system for realizing fly-line dynamic effect based on canvas and echarts |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114648603B (en) |
Families Citing this family (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115375789B (en) * | 2022-10-24 | 2023-03-10 | 山东捷瑞数字科技股份有限公司 | Method and system for generating dynamic texture based on scalable vector graphics |
| CN116051627B (en) * | 2023-02-02 | 2023-06-13 | 杭州比智科技有限公司 | Method and system for realizing graphic self-adaption based on svg and Lottie |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106708896A (en) * | 2015-11-17 | 2017-05-24 | 北京国双科技有限公司 | ECharts map displaying method and device |
| CN110659026A (en) * | 2019-08-02 | 2020-01-07 | 深圳市优必选科技股份有限公司 | Method, device and equipment for generating graphic control |
| CN111553129A (en) * | 2020-04-21 | 2020-08-18 | 广东电网有限责任公司 | SVG and echarts graph fusion method based on canvas |
| CN111815736A (en) * | 2019-04-11 | 2020-10-23 | 阿里巴巴集团控股有限公司 | Flying line construction method and device, flying line display method and device, computer storage medium and electronic equipment |
Family Cites Families (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US9524647B2 (en) * | 2015-01-19 | 2016-12-20 | The Aerospace Corporation | Autonomous Nap-Of-the-Earth (ANOE) flight path planning for manned and unmanned rotorcraft |
| US10304225B2 (en) * | 2016-12-30 | 2019-05-28 | Microsoft Technology Licensing, Llc | Chart-type agnostic scene graph for defining a chart |
| CN111666007A (en) * | 2020-04-28 | 2020-09-15 | 平安科技（深圳）有限公司 | Method and device for realizing mouse following special effect, computer equipment and storage medium |
| CN112102437B (en) * | 2020-08-04 | 2021-09-03 | 中科三清科技有限公司 | Canvas-based radar map generation method and device, storage medium and terminal |
-
2022
- 2022-05-19 CN CN202210541889.9A patent/CN114648603B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106708896A (en) * | 2015-11-17 | 2017-05-24 | 北京国双科技有限公司 | ECharts map displaying method and device |
| CN111815736A (en) * | 2019-04-11 | 2020-10-23 | 阿里巴巴集团控股有限公司 | Flying line construction method and device, flying line display method and device, computer storage medium and electronic equipment |
| CN110659026A (en) * | 2019-08-02 | 2020-01-07 | 深圳市优必选科技股份有限公司 | Method, device and equipment for generating graphic control |
| CN111553129A (en) * | 2020-04-21 | 2020-08-18 | 广东电网有限责任公司 | SVG and echarts graph fusion method based on canvas |
Non-Patent Citations (3)
| Title |
|---|
| ECharts: a declarative framework for rapid construction of web-based visualization;Deqing Li;Honghui Mei;Yi Shen;《Visual Informatics》;20180714;第2卷(第2期);第136-146页 * |
| 基于Ajax技术的ECharts实时图形报表实现;王菲露等;《黑龙江工业学院学报(综合版)》;20191220(第12期);第85-89页 * |
| 基于延迟着色技术的大场景反走样渲染架构设计;罗德宁等;《工程科学与技术》;20170720(第04期);第161-169页 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN114648603A (en) | 2022-06-21 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN114648603B (en) | Method and system for realizing fly-line dynamic effect based on canvas and echarts | |
| CN109646955B (en) | Game interface generation method, device and storage medium | |
| US11449661B2 (en) | System and method for extended dynamic layout | |
| US20100235769A1 (en) | Smooth layout animation of continuous and non-continuous properties | |
| US5999195A (en) | Automatic generation of transitions between motion cycles in an animation | |
| US10089715B2 (en) | System for parametric generation of custom scalable animated characters on the web | |
| CN109656654B (en) | Editing method of large-screen scene and computer-readable storage medium | |
| US20080055315A1 (en) | Method and System to Establish and Animate a Coordinate System for Content on a Display | |
| CN112717414B (en) | Game scene editing method and device, electronic equipment and storage medium | |
| US20110285727A1 (en) | Animation transition engine | |
| CN107707965A (en) | The generation method and device of a kind of barrage | |
| US7663638B2 (en) | Stroked fill | |
| CN114862999A (en) | Dotting rendering method, dotting rendering device, dotting rendering equipment and storage medium | |
| CN112825039B (en) | Canvas-based three-dimensional sphere content display implementation method | |
| CN116912361A (en) | Mapbox-gl-based 3D annotation editing method and system | |
| CN114119821A (en) | Hair rendering method, device and equipment of virtual object | |
| CN114385957A (en) | Landing page creation method and station building platform | |
| CN115311395A (en) | Three-dimensional scene rendering method, device and equipment | |
| CN104715053B (en) | Implementation method, device and the browser that web page contents are shown | |
| CN115329229A (en) | Method for displaying point cloud data at webpage end | |
| CN117765136A (en) | Dynamic page generation method, system, equipment and medium based on path points | |
| JP2949594B2 (en) | Video display device | |
| CN115858069A (en) | Page animation display method and device | |
| CN116738540A (en) | Method for presenting and using BIM data on mobile device through graphic interaction engine | |
| CN112579083A (en) | Image display method and device, electronic equipment and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| EE01 | Entry into force of recordation of patent licensing contract |
Application publication date: 20220621 Assignee: Hangzhou Jintou Finance Leasing Co.,Ltd. Assignor: HANGZHOU BIZHI TECHNOLOGY Co.,Ltd. Contract record no.: X2022980028267 Denomination of invention: A method and system for realizing dynamic effect of flying line based on canvas and eccharts Granted publication date: 20220805 License type: Exclusive License Record date: 20230112 |
|
| EE01 | Entry into force of recordation of patent licensing contract | ||
| PE01 | Entry into force of the registration of the contract for pledge of patent right | ||
| PE01 | Entry into force of the registration of the contract for pledge of patent right |
Denomination of invention: A method and system for realizing dynamic effect of flying line based on canvas and eccharts Effective date of registration: 20230115 Granted publication date: 20220805 Pledgee: Hangzhou Jintou Finance Leasing Co.,Ltd. Pledgor: HANGZHOU BIZHI TECHNOLOGY Co.,Ltd. Registration number: Y2023980031381 |
|
| EC01 | Cancellation of recordation of patent licensing contract | ||
| EC01 | Cancellation of recordation of patent licensing contract |
Assignee: Hangzhou Jintou Finance Leasing Co.,Ltd. Assignor: HANGZHOU BIZHI TECHNOLOGY Co.,Ltd. Contract record no.: X2022980028267 Date of cancellation: 20240327 |
|
| PC01 | Cancellation of the registration of the contract for pledge of patent right | ||
| PC01 | Cancellation of the registration of the contract for pledge of patent right |
Granted publication date: 20220805 Pledgee: Hangzhou Jintou Finance Leasing Co.,Ltd. Pledgor: HANGZHOU BIZHI TECHNOLOGY Co.,Ltd. Registration number: Y2023980031381 |