像畫筆一樣慢慢畫出Path的三種方法(補充第四種) - tsliwei－IT工程師數位筆記本

文章出處

今天大家在群里大家非常熱鬧的討論像畫筆一樣慢慢畫出Path的這種效果該如何實現.

北京-LGL 博客號@ligl007發起了這個話題.然后各路高手踴躍發表意見.最后雷叔上海-雷蒙博客號@雷蒙之星以一種巧妙的思路實現了這個效果使大家受益匪淺

本來這篇博客應該由雷叔來寫的,奈何雷叔忙著寫教材,就委托我來寫了.

我之前也總結過兩種方法,再加上雷叔這第三種方法,一起寫出來,分享給大家.

方法1

這種方法是最容易想到的,但是局限性也比較大,只適用于接近直線的這種Path.但是相對的代碼比較簡單,也適用于動態生成Path的這種情況.仿Echarts地圖用的就是這種方法.

思路:不管什么樣的Path,最終整個控件其實都是一個矩形.實現這個效果就是給Path控件的透明掩碼(OpacityMask)一個線性漸變畫刷(LinearGradientBrush),把標識不透明度的節點用動畫從一個方向推向另一個方向(DoubleAnimation控制GradientStop.Offset由0到1).

需要注意的也只是推的方向,是從左上角推向右下角,還是從右上角推向坐下角......等,那幾種情況.實質就是根據Path起點和終點的坐標判斷改怎樣設置畫刷的StartPoint和EndPoint.總結了一個方法,直接上代碼吧.

 1             //path的起點和終點
 2             Point startPoint = figure1.StartPoint;
 3             Point endPoint = arc1.Point;
 4             //畫刷的起點和終點,默認從左上角推向右下角,也就是X方向從左向右推,Y方向從上向下推
 5             Point start = new Point(0, 0);
 6             Point end = new Point(1, 1);
 7             if (startPoint.X > endPoint.X)
 8             {
 9                 //如果path起點的X大于終點的X,就說明起點在右邊,需要從右向左推
10                 start.X = 1;
11                 end.X = 0;
12             }
13             if (startPoint.Y > endPoint.Y)
14             {
15                 //如果path起點的Y大于終點的Y,就說明起點在下邊,需要從下向上推
16                 start.Y = 1;
17                 end.Y = 0;
18             }