(UWP)通过编写算法实现在地图中的渐变路径

Posted 2020-08-21 RodChong

　　目前的一个App中需要实现这个需求，但是在UWP自带的Bing Map中，绘制的MapPolyline的StrokeColor的类型是Windows.UI.Color，也就是说一条MapPolyline只支持一种颜色，想要实现渐变是根本不可能的……但是我又不想说去拒绝视觉的需求，因为我觉得就算是系统提供的渐变画刷底层肯定也是通过相关的算法实现颜色渐变的，所以只要我们认真研究一下，最终一样可以达到我们想要的需求。
说个题外话，在这次的思路之前我还产生了其他的思路。当时是想在后台代码中实例化一个新的Polyline类型的对象(不是地图元素MapElement中的MapPolyline)，因为Polyline的Fill属性是Brush类型的，而LinearGradientBrush同样是派生自Brush属性的，因此可以通过这种方法更为简单的实现颜色渐变。但是这样做了之后发现了一个问题：首先这些Polyline是Xaml元素，他们会不断向上叠加，这样会遮挡住用来标记用户所在位置的“小圆点”。其次这些Polyline不能够随着地图的缩放而调整长度或位置，用户体验非常差，因为不可能一个地图不支持缩放吧……

　　绕了一个大坑之后，我最后采用并实现了以下的算法实现MapPolyline的StrokeColor属性的渐变：

　　1.首先我们先整理一下思路。按照视觉姐姐给的图，渐变的初始颜色值和最终颜色值是确定的。也就是说我们的渐变色只能在这两个值之间变化。但是我们无法判定用户最终会跑多长的距离，也就意味着我们不能通过得到一个确定的距离之后进行等段线性渐变。那么就要换一种思路，也就是说我们可以设定一个确定的范围长度，第一段这个长度中的MapPolyline的StrokeColor的色值从初始值线性渐变到最终值，第二段这个长度中的MapPolyline的StrokeColor的色值再从最终值线性渐变到初始值，以此类推。更简单的说，就是这个确定长度的偶数倍从初始值渐变到最终值，奇数倍从最终值渐变到初始值。

 

　　2.明确了以上的思想之后，我们就可以开始编写渐变算法了。此处我将简便算法写成一个Helper类的静态方法，目的是与实际的业务逻辑解耦和，该Helper类如下：

 1         public class GradualChangedHelper
 2     {
 3         public static int _distance = 500; //颜色渐变的范围距离，单位m
 4         private static readonly Color _color1 = Color.FromArgb(255, 246, 100, 135);
 5         private static readonly Color _color2 = Color.FromArgb(255, 241, 99, 133);
 6         private static readonly Color _color3 = Color.FromArgb(255, 148, 93, 179);
 7         private static readonly Color _color4 = Color.FromArgb(255, 135, 81, 168);
 8 
 9         private static int delta_R = _color1.R - _color4.R;
10         private static int delta_G = _color1.G - _color4.G;
11         private static int delta_B = _color4.B - _color1.B;
12 
13         private static int[] delta_rgb = new int[] { delta_R, delta_G, delta_B };
14 
15         public static Color GetGradientBrush(double total_distance)
16         {
17             double rate = ((double)((int)total_distance % _distance) / _distance); //目前的距离在_distance中的比例
18             int[] current_colors = new int[3];
19             int max_value = 0, min_value = 0;
20             for (int i = 0; i < 3; i++)
21             {
22                 switch (i)
23                 {
24                     case 0:
25                         {
26                             min_value = _color4.R; max_value = _color1.R;
27                             current_colors[i] = (((int)total_distance / _distance) % 2 == 0) ? (max_value - (int)(delta_rgb[i] * rate)) : ((min_value) + (int)(delta_rgb[i] * rate)); //对R值进行颜色值的增减，在色域中循环
28                         }; break;
29                     case 1:
30                         {
31                             min_value = _color4.G; max_value = _color1.G;
32                             current_colors[i] = (((int)total_distance / _distance) % 2 == 0) ? (max_value - (int)(delta_rgb[i] * rate)) : ((min_value) + (int)(delta_rgb[i] * rate)); //对G值进行颜色值的增减，在色域中循环
33                         }; break;
34                     case 2:
35                         {
36                             min_value = _color1.B; max_value = _color4.B;
37                             current_colors[i] = (((int)total_distance / _distance) % 2 == 0) ? ((min_value) + (int)(delta_rgb[i] * rate)) : (max_value - (int)(delta_rgb[i] * rate)); //对B值进行颜色值的增减，在色域中循环
38                         }; break;
39                 }
40             }
41             return Color.FromArgb(255, (byte)current_colors[0], (byte)current_colors[1], (byte)current_colors[2]);
42         }
43     }

　　3.最后我们编写在地图中添加MapPolyline的代码：

 1                 private async void AddNewPolyline(BasicGeoposition new_position) //在地图中绘制新的路径
 2         {
 3                 await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
 4                 {
 5                     lines.Add(new_position); //将新的位置添加到点集合中
 6                     MapPolyline temp_line = new MapPolyline() //创建新的MapPolyline以绘制路径
 7                     {
 8                         StrokeColor = Helper.GradualChangedHelper.GetGradientBrush(TotalDistance),
 9                         StrokeThickness = 5,
10                         StrokeDashed = false
11                     };
12                     temp_line.Path = new Geopath(new List<BasicGeoposition>() //添加起始点和终点以设置MapPolyline的路径
13                     {
14                         lines[lines.Count - 2],
15                         lines[lines.Count - 1]
16                     });
17                     maps.MapElements.Add(temp_line); //将MapPolyline添加到地图控件中
18                 });
19         }