Wuyue Ant Financial Service · Data Experience technology team
In the browser, any two-dimensional graph can be described in the form of a path. The underlying API is then drawn statically directly. But if you want to draw a path dynamically, the browser does not directly support the way. This article is to solve this problem, for the browser to complete this function, so that the static path can be convenient for dynamic drawing.
The final result
Let’s take a look at the final result
Chip description:
Face scanning:
Manual writing:
The effect is still pretty cool, the implementation of the entire development process from the requirements to start talking about it.
demand
Discussed n multiple postures with design students:
- The fading
- Particle effect, fragmentation combination
- There’s small enlargement, fancy rotation, distortion
- .
But design students insist on their own posture, is to restore the real scene, is to scan!
So I had to:
All right, enough bullshit. Back to business
The browser dynamic drawing came up with the following two schemes:
Plan a
Browsers don’t provide a way to draw dynamically, but SVG provides an important property called stroke, which is called stroke in Chinese. The first thought was to use stroke-dasharray to set the dotted line stroke, and then use animation to change stroke-dashoffset to draw the dynamic copy. This can achieve the effect of dynamic drawing. But there are the following shortcomings.
- Each path has to be animated in CSS to control it.
- Drawing process is single, can only use the browser to provide a few animation algorithms, can not control their own drawing process
- Subsequent to such a demand, the front-end need a lot of development
Based on the above points, this scheme was abandoned.
Scheme 2
Can we control the drawing process of SVG and implement its dynamic drawing? As if… Yes!!
Analysis of SVG
Start with SVG. Irregular graphs can be matted by using the PEN tool of PS, and then exported to the AI to obtain the path information of the graph. Or simply ask the design students to provide images in SVG format. Finally, we can obtain the path information of the graph, for example:
The above picture is the SVG format of the face I captured. Through the analysis of the format, we can see that there are several key information:
- Layout information, viewBox can be thought of as the original size.
- The style section is the style, which controls line thickness, color, etc.
- The third red box part is path information, here is a fixed format, specific reference here at https://developer.mozilla.org/en-US/docs/Web/SVG
Finally, we can convert the above information into instructions in the following form, which is convenient for subsequent code parsing.
The command parsing
The problem is to split the path directive. Parse each command, then count points according to each command and trace lines in the corresponding style. The specific process is as follows:
The key code of the parse instruction part is as follows:
The idea is to enumerate all the delimiters, and then implement the parsing part for each delimiter. The exhaustive delimiter is as follows:
Instructions to draw
Then there is the execution part of each instruction:
Finally, for each instruction, it comes down to whether to draw a straight line or a curve, calculate the corresponding points according to the corresponding curve equation, and then dynamically connect the points, draw line segments continuously, and finally combine a large number of small line segments into complex graphics. The core code is as follows:
Trace point line to do animation part:
Then you have achieved the effect at the beginning of this article
conclusion
For complex graph, we first obtain its path information through various means. Then divide the path information into each micro instruction, for each instruction, to achieve animation. Through the form of line tracing points to achieve, finally all points connected lines, a large number of lines combined to dynamically draw a complex graph.
In addition, we can provide the drawing speed and other open configuration to the design students. If there is such a requirement, the design students only need to provide SVG images with paths. Then you can adjust the configuration, the liberation of the front-end students development amount.
If you are interested, you can follow the column or send your resume to ‘wuyue.lwy####alibaba-inc.com’. Replace (‘####’, ‘@’)
Original link: github.com/ProtoTeam/b…