目前的一個App中需要實現(xiàn)這個需求,但是在UWP自帶的Bing Map中,繪制的MapPolylineStrokeColor的類型是Windows.UI.Color,也就是說一條MapPolyline只支持一種顏色,想要實現(xiàn)漸變是根本不可能的……但是我又不想說去拒絕視覺的需求,因為我覺得就算是系統(tǒng)提供的漸變畫刷底層肯定也是通過相關的算法實現(xiàn)顏色漸變的,所以只要我們認真研究一下,最終一樣可以達到我們想要的需求。
說個題外話,在這次的思路之前我還產生了其他的思路。當時是想在后臺代碼中實例化一個新的Polyline類型的對象(不是地圖元素MapElement中的MapPolyline),因為Polyline的Fill屬性是Brush類型的,而LinearGradientBrush同樣是派生自Brush屬性的,因此可以通過這種方法更為簡單的實現(xiàn)顏色漸變。但是這樣做了之后發(fā)現(xiàn)了一個問題:首先這些PolylineXaml元素,他們會不斷向上疊加,這樣會遮擋住用來標記用戶所在位置的“小圓點”。其次這些Polyline不能夠隨著地圖的縮放而調整長度或位置,用戶體驗非常差,因為不可能一個地圖不支持縮放吧……

  繞了一個大坑之后,我最后采用并實現(xiàn)了以下的算法實現(xiàn)MapPolylineStrokeColor屬性的漸變:

  1.首先我們先整理一下思路。按照視覺姐姐給的圖,漸變的初始顏色值和最終顏色值是確定的。也就是說我們的漸變色只能在這兩個值之間變化。但是我們無法判定用戶最終會跑多長的距離,也就意味著我們不能通過得到一個確定的距離之后進行等段線性漸變。那么就要換一種思路,也就是說我們可以設定一個確定的范圍長度,第一段這個長度中的MapPolylineStrokeColor的色值從初始值線性漸變到最終值,第二段這個長度中的MapPolylineStrokeColor的色值再從最終值線性漸變到初始值,以此類推。更簡單的說,就是這個確定長度的偶數(shù)倍從初始值漸變到最終值,奇數(shù)倍從最終值漸變到初始值。

&