您好,登錄后才能下訂單哦!
1.需求
WPF本身沒有直接把點集合繪制成曲線的函數。可以通過貝塞爾曲線函數來繪制。
貝茲曲線由線段與節點組成,節點是可拖動的支點,線段像可伸縮的皮筋,我們在繪圖工具上看到的鋼筆工具就是來做這種矢量曲線的。當然在一些比較成熟的位圖軟件中也有貝塞爾曲線工具,如PhotoShop等。
貝塞爾曲線類是:BezierSegment,三次貝塞爾曲線,通過兩個控制點來控制開始和結束方向。
QuadraticBezierSegment,二次貝塞爾,通過一個控制點來控制彎曲方向。
本文使用的是三次。
圖片來源維基百科
2.思路
大值思路是根據當前點,前一個點,后一個點,再后一個點。共四個點,來生成一條三次貝塞爾曲線。
曲線需要(開始點,結束點,控制點1,控制點2),圖中標識的兩個紅色點即是控制點。
代碼主要是計算兩個紅色的控制點。
先計算相鄰點的中點【橙色】。
再將中點的連線平移到相鄰的位置【藍色點】,取得虛線,得到虛線的端點【紅色】。
紅色,即為控制點。
3.主要代碼
/// <summary> /// 獲得貝塞爾曲線 /// </summary> /// <param name="currentPt">當前點</param> /// <param name="lastPt">上一個點</param> /// <param name="nextPt1">下一個點1</param> /// <param name="nextPt2">下一個點2</param> /// <returns></returns> private BezierSegment GetBezierSegment(Point currentPt, Point lastPt, Point nextPt1, Point nextPt2) { //計算中點 var lastC = GetCenterPoint(lastPt, currentPt); var nextC1 = GetCenterPoint(currentPt, nextPt1); //貝塞爾控制點 var nextC2 = GetCenterPoint(nextPt1, nextPt2); //計算相鄰中點連線跟目的點的垂足 //效果并不算太好,因為可能點在兩個線上或者線的延長線上,計算會有誤差 //所以就直接使用中點平移方法。 //var C1 = GetFootPoint(lastC, nextC1, currentPt); //var C2 = GetFootPoint(nextC1, nextC2, nextPt1); //計算“相鄰中點”的中點 var c1 = GetCenterPoint(lastC, nextC1); var c2 = GetCenterPoint(nextC1, nextC2); //計算【"中點"的中點】需要的點位移 var controlPtOffset1 = currentPt - c1; var controlPtOffset2 = nextPt1 - c2; //移動控制點 var controlPt1 = nextC1 + controlPtOffset1; var controlPt2 = nextC1 + controlPtOffset2; //如果覺得曲線幅度太大,可以將控制點向當前點靠近一定的系數。 controlPt1 = controlPt1 + 0 * (currentPt - controlPt1); controlPt2 = controlPt2 + 0 * (nextPt1 - controlPt2); var bzs = new BezierSegment(controlPt1, controlPt2, nextPt1, true); return bzs; }
效果圖如下:
4.源碼下載
http://xiazai.jb51.net/201804/yuanma/WPF-BezierSegment(jb51.net).rar
總結
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,如果有疑問大家可以留言交流,謝謝大家對億速云的支持。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。