目前的一个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. 配置hadoop

    1.$ tar -zxvf  hadoop-1.0.3.tar.gz 2.添加hadoop到环境变量 root登陆: sudo su 修改环境变量:vi  /etc/environment 添加: / ...

  2. 三种执行SQL语句的的JAVA代码

    问题描述: 连接数据库,执行SQL语句是必不可少的,下面给出了三种执行不通SQL语句的方法. 1.简单的Statement执行SQL语句.有SQL注入,一般不使用. public static voi ...

  3. SQL语句生成指定范围内随机数

    1.生成随机实型数据 create procedure awf_RandDouble @min dec(14,2), @max dec(14,2), @result dec(14,2) output ...

  4. [Tomcat] Tomcat的classloader

    定义 同其他服务器应用一样,tomcat安装了各种classloader(classes that implement java.lang.ClassLoader) Bootstrap | Syste ...

  5. Maven的环境搭建及新建web项目

    第一次接触maven,做一个简单的记录 一.下载maven及环境变量的配置 下载地址 http://maven.apache.org/download.cgi 配置其环境变量  MAVEN_HOME= ...

  6. Unix网络单词汇总

    Chrome开发者工具 Elements(元素).Network(网络).Sources(源代码:调试JS的地方).Timeline(时间线).Profiles(性能分析).Resources(资源: ...

  7. BluetoothChat用于蓝牙串口通信的修改方法

    本人最近在研究嵌入式的串口通信,任务是要写一个手机端的遥控器用来遥控双轮平衡小车.界面只用了一个小时就写好了,重要的问题是如何与板子所带的SPP-CA蓝牙模块进行通信. SPP-CA模块自带代码,在这 ...

  8. HTML5复习整理

    一.推出的目标 web浏览器兼容性低:文档结构不明确:web应用程序的功能受限 二.语法的改变 内容类型(html或htm):DOCTYPE声明简化:指定字符编码简化:可以省略标记的元素:具有Bool ...

  9. 保存emoji到数据库

    /// <summary> /// <summary> /// 字符串转Unicode /// </summary> /// <param name=&quo ...

  10. asp.net 文件下载(txt,rar,pdf,word,excel,ppt)

    aspx 文件下载说起来一点都不难,但是在做的过程中还是遇到了一些小小的问题,就是因为这些小小的问题,导致解决起来实在是太难了,其中一个就是Response.End();导致下载文件出现线程终止的情况 ...