WPF imitation Baidu Echarts population migration map, wpf imitation echarts population

WPF imitation Baidu Echarts population migration map, wpf imitation echarts population

About the famous Baidu Echarts I do not say much do not know friends directly look at the official example of http://echarts.baidu.com/examples.html

A while ago, I joined a WPF technology exchange group to complete the demo. First of all, I would like to thank the Group for its progress. For ten years, he can always make some achievements, so he can't help but think about whether he has any idea to implement or even this demo is available if you want to write or read it.

In this demo, I wrote something. Let's get a picture first, so that you can have an intuitive picture. The relationship between gif recording and recording may seem like a card.

I have never used Baidu Echart, so it may be different from Baidu Echart. This is not the focus. It is to look at the implementation idea and understand the basic animation. If you want to do it yourself, you can summarize the functions and parameters. create a user control

 

About Feasibility: In the past, I often heard people say that when the wpf animation is too open, it will be very difficult, and I have never written a project that contains a large number of animations. I don't know what the reality is. This map is obviously full of animations, so I wrote a small program to test the animation performance, and generated 100 vertices and lines to run the animation. I found there was no problem at all.

Therefore, it is certainly no problem for wpf to do this. If you are interested in this mini-program animation performance test, you can open an animation to check the cpu and memory consumption in the windows Task Manager.

 

Let's talk about the general idea:

 

Next, let's start step by step.

Layout

Initially, we had to consider the layout first. To prevent the map from going out when setting the size once a user control is made.

Map

I have no good experience in finding a map. the purpose is to find a map vector with provincial capitals. As long as it is a vector map, we should have a way to convert it into Xmal.

I found a ppt version of vector map in Baidu Library. 0 download coupon vector map material is downloaded and used to open it with a ppt. Other files may not be saved, right-click map => Save As => select. emf format, open it with Microsoft Expression Design, right-click => Export

In this way, we get the path we want, find the path corresponding to each provincial club, and get their Canvas. left + Width/2 Canvas. top + Height/2 is the coordinate point (x, y ). (I did not calculate this fine, but I probably added it. this job is too boring. This is not the point .)

Let's talk about the map I found. Beijing and Tianjin are connected, Langfang disappears, and the three cities are merged into a path. Therefore, we suggest you try again.

Note that the coordinates of wpf start with (0, 0) in the upper left corner) add the x value to the right and add the y value to the bottom. When positioning the generated image, the x value-its own Width/2 y value-its own Height/2 is required for the center of the image to be located. coordinate point

With maps and coordinates, we can do the following work.

The running point required to generate an animation. The path of the Motion Track indicates the point that is running in the circle of the city.

I used a Grid with a path and an Ellipse.

An Elliptical shadow is used to add a transparent mask OpacityMask in the same color as the trajectory. It contains a radial gradient Paint Brush RadialGradientBrush. the origin GradientOrigin (0.8, 0.5) is set to Opacity at offset0, And the opacity at offset1 is set to 2/16.

The drop-in path is randomly painted with a pen in the blend to get its Data. fill draws a linear gradient image, StartPoint (), EndPoint (), and offset0 give a translucent track color, and offset1 give an opaque pure white.

The IsHitTestVisible value of the Grid can be set to false and does not participate in the hit test. In this way, when the cursor is over the trajectory, the display of the ToolTip of the trajectory will not be interrupted.

If you want to pursue perfection, you are advised to draw a path or write a Path by yourself. The idea can refer to my other blog, WPF, to draw a simple and commonly used path. However, the besell curve is not mentioned. You can study it yourself.

City Circle

He is a circle. There is nothing to say. Just pay attention to the center positioning. Ellipse color and trajectory are the same. ToolTip: write what you want to display.

Trajectory

I used the arc ArcSegment to determine the points of the two cities. Then, we can use the x and y of the two points to calculate the length of the Line Segment Based on the stock theorem. for a point, the point connecting the two cities can form a triangle. The angle opposite the line segment of the two cities can be set as an angle parameter,

This line segment is fixed, and the diagonal angle is fixed. Then, the arc of the corresponding outer circle is fixed. we can obtain the outer circle radius Based on sine Theorem a/sinA = 2r. you can draw this arc. then, you can attach the mouse to The ToolTip of the path to move the content you want to display. just change the ToolTip style.

Animation points running along the track

This part of the animation, I will not say, I am reading the great god of Zhou yinhui blog http://www.cnblogs.com/zhouyinhui/archive/2007/07/31/837893.html

 

City Circle Animation

Add a radial gradient Paint Brush RadialGradientBrush to the transparent mask OpacityMask of Ellipse, and add three nodes. offset0 and offset1 are not transparent. Add a completely transparent node among them, then the animation controls the offset value from 0 to 1 or from 1 to 0, depending on your mood.

Animation during initialization

This part of the animation is actually the calculation time, starting the appropriate animation at the appropriate time.

The presentation of the motion track is to give the transparent mask of the Motion Track path a linear gradient Paint Brush, according to the left, right, top, bottom motion, set StartPoint and EndPoint, then the two nodes are transparent and opaque, and the animation is made from 0 to 1 at the same time. It should be noted that if the first and second motion, the transparent node must be moved in front,

Otherwise, a very strange behavior will occur. Set the animation time to half the time of the running point. in this way, the path is faster than the point, so that the point does not pass, and the path has not yet been shown

About the circle of the city, this part adds more. First, you can use a DoubleAnimation to control the Ellipse transparency. The start time is the time of the trajectory presentation, that is, the point time/2, in this way, when the trajectory is displayed to the circle, the circle begins to be displayed, and the animation time is also set to the trajectory rendering time. In this way, when the point moves to the circle, the circle is completely displayed.

Then add a ColorAnimation to control the second node of the radiation paint brush in the circular transparent mask, that is, the control point, so that it becomes transparent. It takes 0 to complete, in this way, you can continue the radial animation of the circle. the start time is the time from point motion to circle.

Okay, I'm done. The following are some issues with the style of RadioButton, ToolTip, and Path. You just need to make your favorite style.

 

Finally, the Code is attached to the Baidu Echarts population migration diagram.

 

When talking about the WPF technology exchange group mentioned above, I personally feel pretty good and have a good atmosphere and seldom talk about irrelevant topics.

Group number: 152049269

Lei Shu, a group of crouching tigers and dragons, is a very enthusiastic great god. No matter you are a novice veteran or have any problems, he will patiently help you. if you are interested, please come in and check it out.