今天大家在群里大家非常熱鬧的討論像畫筆一樣慢慢畫出Path的這種效果該如何實現. 北京-LGL 博客號@ligl007發起了這個話題.然後各路高手踴躍發表意見.最後雷叔 上海-雷蒙 博客號@雷蒙之星 以一種巧妙的思路實現了這個效果 使大家受益匪淺 本來這篇博客應該由雷叔來寫的,奈何雷叔忙著寫教材,就 ...
今天大家在群里大家非常熱鬧的討論像畫筆一樣慢慢畫出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 }
View Code
方法2:
這種方法也很容易想到,能解決第一種方法解決不了的圖形,缺點是計算相對複雜,需要有幾何功底.
思路:計算出每個時刻path的終點,用幀動畫或計時器直接去修改path對象.
例子比較簡單了,就是個圓形.知道圓形的公式就可以了
圓心o(a,b)
(x-a)^2+(y-b)^2=r^2
x=a+r*cosθ
y=b+r*sinθ
需要註意的是幾何的坐標系和wpf的坐標系不一樣,wpf的坐標系是左上角是(0,0),向右X++,向下Y++.只需要把幾何坐標系角度逆時針旋轉90度就可以了.
具體看程式里的代碼吧,比較直觀.
方法3:
這才是本文的重點,是雷叔提供的奇思妙想.不得不佩服雷叔扎實的基本功.感覺雷叔像鄧肯,大基本功,不華麗,卻是靈魂的所在.
思路:給path設置虛線,通過動畫控制虛線的Offset來實現這個效果.把虛線的實線部分和虛線部分都和path設置的一樣長,然後Offset也設置成path的長度,這就相當於path這顯示的是虛線部分,實線部分剛好被擠出去.動畫控制Offset變成0就可以了.
這麼說可能比較抽象,上個圖吧.
這樣的話,在前臺就能搞定任意靜態的path了.
當然了,如果是動態的path還是需要求周長.然而這並不容易.還請各路高手指點.
源碼下載: 像畫筆一樣慢慢畫出Path.rar
額外補充第四種方法吧.不是我的,詳見 http://www.cnblogs.com/tong-tong/archive/2012/10/19/2730825.html
大概意思就是給個一樣的Sengment,通過點動畫 PointAnimation,PointAnimationUsingPath 控制終點坐標
上面提到的這個群是個wpf交流群,真心不錯.我在這裡進步很大,直接從菜鳥變得不怎麼菜鳥了.推薦給大家.
群號碼:152049269 歡迎各位萌新,菜鳥,高手,大神加入.分享心得,共同進步
