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

  目前的一个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类如下:

 1         public class GradualChangedHelper
 2     {
 3         public static int _distance = 500; //颜色渐变的范围距离,单位m
 4         private static readonly Color _color1 = Color.FromArgb(255, 246, 1
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值