Three methods of drawing Path slowly like a paint brush, three methods of painting Path

Three methods of drawing Path slowly like a paint brush, three methods of painting Path

Today, everyone in the group is very busy discussing how to implement the effect of slowly drawing the Path like a paint brush.

BEIJING-LGL blog number @ ligl007 initiated this topic. then experts from all walks of life expressed their opinions. at last, rayshu's Shanghai-Raymond blog number @ Raymond star has achieved this effect with a clever way of thinking, which has benefited everyone.

This blog was supposed to be written by Uncle Lei, but he was busy writing teaching materials and commissioned me to write it.

I have also summarized the two methods before, and added the third method, Lei Shu, to write it together and share it with you.

Method 1:

This method is the easiest to think of, but its limitations are also relatively large. It is only applicable to the Path close to a straight line. however, the relative code is relatively simple and can also be used to dynamically generate paths. this method is used to simulate Echarts maps.

Idea: regardless of the Path, the entire control is actually a rectangle. to achieve this effect, a linear gradient painting brush (LinearGradientBrush) is provided for the OpacityMask of the Path control. The node that identifies the opacity is pushed from one direction to another using an animation (DoubleAnimation controls GradientStop. offset from 0 to 1 ).

It should be noted that only the push direction is pushed from the upper left corner to the lower right corner, or from the upper right corner to the lower right corner ...... and so on. the essence is to determine how to set the StartPoint and EndPoint of the painter Based on the coordinates of the start and end points of the Path. I have summarized a method, so let's go directly to the code.

1 // start Point and end Point of the path 2 Point startPoint = figure1.StartPoint; 3 Point endPoint = arc1.Point; 4 // click the start Point and end Point of the painter. By default, the image is pushed from the upper left corner to the lower right corner, that is, the X direction is pushed from left to right, And the Y direction is pushed from top to bottom 5 Point start = new Point (0, 0); 6 Point end = new Point (1, 1 ); 7 if (startPoint. x> endPoint. x) 8 {9 // If X at the starting point of path is greater than X at the end point, it indicates that the starting point is on the right and 10 start needs to be pushed from the right to the left. X = 1; 11 end. X = 0; 12} 13 if (startPoint. y> endPoint. y) 14 {15 // if Y at the starting point of path is greater than Y at the end point, it indicates that the starting point is below and 16 start needs to be pushed from bottom up. Y = 1; 17 end. Y = 0; 18}View Code Method 2:

This method is also easy to think of. It can solve the graphics that cannot be solved by the first method. The disadvantage is that the calculation is relatively complicated and requires a geometric knowledge.

Idea: Calculate the end point of the path at each time point, and use frame animation or timer to directly modify the path object.

The example is relatively simple. It is a circle. You only need to know the formula of the circle.

Center o (a, B)
(X-a) ^ 2 + (y-B) ^ 2 = r ^ 2
X = a + r * cos θ
Y = B + r * sin θ

It should be noted that the geometric coordinate system is different from the wpf coordinate system. The wpf coordinate system is in the upper left corner (0, 0), X ++ to the right, and Y ++ down. you only need to rotate the angle of the geometric coordinate system 90 degrees counterclockwise.

The code in the program is more intuitive.

Method 3:

This is the focus of this article. It is the whimsy provided by Lei shu. I have to admire Lei Shu's solid basic skills. I feel like Duncan, the basic skills are not gorgeous, but the soul.

Idea: Set a dotted line for the path, and control the Offset of the dotted line through animation to achieve this effect. the solid line and dotted line of the dotted line are as long as the path, and the Offset is also set to the path length, which is equivalent to the path, which shows the dotted line, the solid line is squeezed out. you can set the animation Offset to 0.

This may be abstract. Let's see the previous figure.

In this way, you can fix any static path on the front-end.

Of course, if it is a dynamic path, you still need to ask for perimeter. However, this is not easy. Please give advice from various experts.

 

Download source code

 

Add the fourth method. Not mine. For more information, see http://www.cnblogs.com/tong-tong/archive/2012/10/19/2730825.html.

 

The approximate meaning is to give the same Sengment, and use the point animation PointAnimation and PointAnimationUsingPath to control the end coordinate.

 

The group mentioned above is a wpf Communication Group. It is really good. I have made great progress here, but it has become very difficult for cainiao. I recommend it to you.

Group number: 152049269 welcome to mengxin, cainiao, experts, and experts. Share your experiences and make progress together.