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

  绕了一个大坑之后,我最后采用并实现了以下的算法实现MapPolylineStrokeColor属性的渐变:

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

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

         public class GradualChangedHelper
{
public static int _distance = ; //颜色渐变的范围距离,单位m
private static readonly Color _color1 = Color.FromArgb(, , , );
private static readonly Color _color2 = Color.FromArgb(, , , );
private static readonly Color _color3 = Color.FromArgb(, , , );
private static readonly Color _color4 = Color.FromArgb(, , , ); private static int delta_R = _color1.R - _color4.R;
private static int delta_G = _color1.G - _color4.G;
private static int delta_B = _color4.B - _color1.B; private static int[] delta_rgb = new int[] { delta_R, delta_G, delta_B }; public static Color GetGradientBrush(double total_distance)
{
double rate = ((double)((int)total_distance % _distance) / _distance); //目前的距离在_distance中的比例
int[] current_colors = new int[];
int max_value = , min_value = ;
for (int i = ; i < ; i++)
{
switch (i)
{
case :
{
min_value = _color4.R; max_value = _color1.R;
current_colors[i] = (((int)total_distance / _distance) % == ) ? (max_value - (int)(delta_rgb[i] * rate)) : ((min_value) + (int)(delta_rgb[i] * rate)); //对R值进行颜色值的增减,在色域中循环
}; break;
case :
{
min_value = _color4.G; max_value = _color1.G;
current_colors[i] = (((int)total_distance / _distance) % == ) ? (max_value - (int)(delta_rgb[i] * rate)) : ((min_value) + (int)(delta_rgb[i] * rate)); //对G值进行颜色值的增减,在色域中循环
}; break;
case :
{
min_value = _color1.B; max_value = _color4.B;
current_colors[i] = (((int)total_distance / _distance) % == ) ? ((min_value) + (int)(delta_rgb[i] * rate)) : (max_value - (int)(delta_rgb[i] * rate)); //对B值进行颜色值的增减,在色域中循环
}; break;
}
}
return Color.FromArgb(, (byte)current_colors[], (byte)current_colors[], (byte)current_colors[]);
}
}

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

                 private async void AddNewPolyline(BasicGeoposition new_position) //在地图中绘制新的路径
{
await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
{
lines.Add(new_position); //将新的位置添加到点集合中
MapPolyline temp_line = new MapPolyline() //创建新的MapPolyline以绘制路径
{
StrokeColor = Helper.GradualChangedHelper.GetGradientBrush(TotalDistance),
StrokeThickness = ,
StrokeDashed = false
};
temp_line.Path = new Geopath(new List<BasicGeoposition>() //添加起始点和终点以设置MapPolyline的路径
{
lines[lines.Count - ],
lines[lines.Count - ]
});
maps.MapElements.Add(temp_line); //将MapPolyline添加到地图控件中
});
}

(UWP)通过编写算法实现在地图中的渐变路径的更多相关文章

  1. 正整数构成的线性表存放在单链表中,编写算法将表中的所有的奇数删除。(C语言)

    /* 正整数构成的线性表存放在单链表中,编写算法将表中的所有的奇数删除 */ #include <stdio.h> #include <stdlib.h> typedef st ...

  2. [python] A*算法基于栅格地图的全局路径规划

    # 所有节点的g值并没有初始化为无穷大 # 当两个子节点的f值一样时,程序选择最先搜索到的一个作为父节点加入closed # 对相同数值的不同对待,导致不同版本的A*算法找到等长的不同路径 # 最后c ...

  3. ZeroMQ接口函数之 :zmq_z85_decode – 从一个用Z85算法生成的文本中解析出二进制密码

    ZeroMQ 官方地址 :http://api.zeromq.org/4-0:zmq_z85_decode zmq_z85_decode(3)         ØMQ Manual - ØMQ/4.1 ...

  4. 相机标定:关于用Levenberg-Marquardt算法在相机标定中应用

    LM算法在相机标定的应用共有三处. (1)单目标定或双目标定中,在内参固定的情况下,计算最佳外参.OpenCV中对应的函数为findExtrinsicCameraParams2. (2)单目标定中,在 ...

  5. 算法效果AB测试中的PV-UV不对称性

    (转载请注明原创于潘多拉盒子) 算法效果的AB测试,是指在相同的应用场景下,对比不同算法的效果.通常的做法是,按照PV或UV随机分配流量到算法上,计算算法的CTR或转化率进行对比.为了表述简单,我们假 ...

  6. 利用HTML5 Geolocation API在百度地图中显示你的位置

    代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <met ...

  7. C++11新特性应用--介绍几个新增的便利算法(不更改容器中元素顺序的算法)

    总所周知.C++ STL中有个头文件,名为algorithm.即算法的意思. The header<algorithm>defines a collection of functions ...

  8. 在地图中调用显示FeatureLayer并进行render、popupTemplate、添加图例等相关内容的设置

    ArcGIS Server发布完FeatureLayer后,就可以在自己的代码中调用并在地图上显示出来了. 一.代码框架 调用FeatureLayer,要在require开头引入"esri/ ...

  9. 机器学习、深度学习、和AI算法可以在网络安全中做什么?

    本文由  网易云发布. 本文作者:Alexander Polyakov,ERPScan的首席技术官和联合创始人.EAS-SEC总裁,SAP网络安全传播者. 现在已经出现了相当多的文章涉及机器学习及其保 ...

随机推荐

  1. Python连接MySQL

    win10.Python2.7.Pycharm import MySQLdb conn = MySQLdb.Connect( host = '127.0.0.1', port = 3306, user ...

  2. windows7下Wamp安装php扩展imagick(转)

    ImageMagick是一套功能强大.稳定而且免费的工具集和开发包,可以用来读.写和处理超过185种基本格式的图片文件,包括流行的TIFF, JPEG, GIF, PNG, PDF以及PhotoCD等 ...

  3. Tomcat性能优化

    1.关闭AJP协议 注释以下配置 <!-- <Connector port="8009" protocol="AJP/1.3" redirectPo ...

  4. 年月日与time的相互转换

    年月日的转换 // 这里就是把时间格式化成你要的 SimpleDateFormat sdf = new SimpleDateFormat("yyyy");//将时间转换为年 Sim ...

  5. js div及table首行顶部吸附示例

    js div顶部吸附示例,例如这样: 以下为DIV顶部吸附示例:(此示例来自于网络,在此记录与分享!感谢原作者!) 示例1:兼容IE6 <div style="height:300px ...

  6. 前端构建工具之gulp(一)「图片压缩」

    前端构建工具之gulp(一)「图片压缩」 已经很久没有写过博客了,现下终于事情少了,开始写博吧 今天网站要做一些优化:图片压缩,资源合并等 以前一直使用百度的FIS工具,但是FIS还没有提供图片压缩的 ...

  7. Quick Cocos (2.2.5plus)CoinFlip解析(MenuScene display AdBar二次封装)

    转载自:http://cn.cocos2d-x.org/tutorial/show?id=1621 从Samples中找到CoinFlip文件夹,复制其中的 res 和 script 文件夹覆盖新建工 ...

  8. 为什么质数检验到 N的开方 就可以结束了

    以为所有N的除数都是以根号N为轴对称的. 例如16的开方为4: 16%1 == 0 则1 与 16 都是16的除数. 16%2 == 0 则2 与 8 都是16的除数. 16%4 ==0 则4 为16 ...

  9. ios显示一个下载banner

    <meta name="apple-itunes-app" content="app-id=432274380" /> 这个标签是告诉iphone的 ...

  10. BZOJ 2096: [Poi2010]Pilots

    Description 求一个最长的序列,最大值最小值之差不超过 \(k\) . Sol 单调队列. 一个队列直接上就行.. Code /******************************* ...