目前的一个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. Spring Boot整合Dubbo框架demo

    Dubbo框架原理见之前的博文:http://www.cnblogs.com/umgsai/p/5836925.html 首先启动zookeeper Server端 Pom配置如下 <?xml ...

  2. 学习MySQL之多表操作(三)

    ##多表查询 ##使用数据库 mytest USE mytest; ##删除,并重新创建表 t_dept DROP TABLE t_dept; CREATE TABLE t_dept ( deptno ...

  3. 一个java源文件中为什么只能有一个public类。

    我们都遇到过一个源文件中有多个java类,但当第一个类使用public修饰时,如果下面还有类使用public修饰,会报错.也就是是说一个java源文件最多只能有一个public类. 当有一个publi ...

  4. 关于手机的内置SD卡与外置SD卡

    对于安卓2.3的系统来说,Environment.getExternalStorageDirectory()获取的目录是内置SD卡还是外置SD卡是无法保证的, 和手机厂商的修改有关,只能通过Envir ...

  5. JS学习:第二周——NO.1回调函数

    [回调函数] 定义:把一个函数的定义阶段,作为参数,传给另一个函数: 回调函数调用次数,取决于条件: 回调函数可以传参: 回调函数可以给变this指向,默认是window: 回调函数没有返回值,for ...

  6. Java Native Interface 五 JNI里的多线程与JNI方法的注册

    本文是<The Java Native Interface Programmer's Guide and Specification>读书笔记 JNI里的多线程 在本地方法里写有关多线程的 ...

  7. Mysql 存储引擎中InnoDB与Myisam的主要区别

    一直以为我spring事物没有配置好,结果发现是mysql的表本身设置成了Myisam 引擎.改成innodb就支持事物了. 1, 事务处理 innodb 支持事务功能,myisam 不支持. Myi ...

  8. DevExpress 程序运行后 layoutView 卡片大小发生变化

    设置属性前效果:  将layoutView1.CardMinSize 的属性更改为(0, 0) 后 效果:

  9. 设计模式--桥接模式Bridge(结构型)

    一.概述 在软件系统中,某些类型由于自身的逻辑,它具有两个或者多个维度的变化,如何应对这种"多维度的变化",就可以利用桥接模式. 引例: 设想如果要绘制矩形.圆形.椭圆.正方形,我 ...

  10. spark 快速入门 java API

    Spark的核心就是RDD,对SPARK的使用入门也就是对RDD的使用,包括action和transformation 对于Java的开发者,单单看文档根本是没有办法理解每个API的作用的,所以每个S ...