MKMapView实时绘画渐变线条运动轨迹

首先你要看官方项目Breadcrumb，Breadcrumb项目中就是实时画运动轨迹的（项目中得到下一个点就移除覆盖物重新绘画所有的点连线）；

下面讲下Core Graphics的基本使用

使用Core Graphics来绘图，最简单的就是自定义一个继承UIView类，重写

/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
// Drawing code
}
*/

这个方法就可以了，然后在这个方法了写绘画代码就可以了；

//这里看下官方项目Quartz2D for iOS 

最简单的画一条直线

- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();//获取上下文
CGContextMoveToPoint(ctx, 20, 20);
CGContextAddLineToPoint(ctx, 100, 200);
CGContextSetLineWidth(ctx, 50);
//注意，线条只能画成是空心的
CGContextStrokePath(ctx);
}

画一个渐变图形Quartz2D for iOS部分代码

-(void)drawInContext:(CGContextRef)context
{
// Draw the colored pattern. Since we have a CGColorRef for this pattern, we just set
// that color current and draw.
CGContextSetFillColorWithColor(context, self.coloredPatternColor);
CGContextFillRect(context, CGRectMake(10.0, 10.0, 90.0, 90.0));

// You can also stroke with a pattern.
CGContextSetStrokeColorWithColor(context, self.coloredPatternColor);
CGContextStrokeRectWithWidth(context, CGRectMake(120.0, 10.0, 90.0, 90.0), 8.0);

// Since we aren't encapsulating our pattern in a CGColorRef for the uncolored pattern case, setup requires two steps.
// First you have to set the context's current colorspace (fill or stroke) to a pattern colorspace,
// indicating to Quartz that you want to draw a pattern.
CGContextSetFillColorSpace(context, self.uncoloredPatternColorSpace);
// Next you set the pattern and the color that you want the pattern to draw with.
CGFloat color1[] = {1.0, 0.0, 0.0, 1.0};
CGContextSetFillPattern(context, self.uncoloredPattern, color1);
// And finally you draw!
CGContextFillRect(context, CGRectMake(10.0, 120.0, 90.0, 90.0));
// As long as the current colorspace is a pattern colorspace, you are free to change the pattern or pattern color
CGFloat color2[] = {0.0, 1.0, 0.0, 1.0};
CGContextSetFillPattern(context, self.uncoloredPattern, color2);
CGContextFillRect(context, CGRectMake(10.0, 230.0, 90.0, 90.0));

// And of course, just like the colored case, you can stroke with a pattern as well.
CGContextSetStrokeColorSpace(context, self.uncoloredPatternColorSpace);
CGContextSetStrokePattern(context, self.uncoloredPattern, color1);
CGContextStrokeRectWithWidth(context, CGRectMake(120.0, 120.0, 90.0, 90.0), 8.0);
// As long as the current colorspace is a pattern colorspace, you are free to change the pattern or pattern color
CGContextSetStrokePattern(context, self.uncoloredPattern, color2);
CGContextStrokeRectWithWidth(context, CGRectMake(120.0, 230.0, 90.0, 90.0), 8.0);
}

-(void)dealloc
{
CGColorRelease(_coloredPatternColor);
CGPatternRelease(_uncoloredPattern);
CGColorSpaceRelease(_uncoloredPatternColorSpace);
}

来到这里出现一个不解的地方，线条那怎么画呢？

开始实现思路：ab两点线条，画一个ABCD连线矩形

实现代码：
CGContextSaveGState(context);
//水平长度
int i=0;
float level=MAX([self pointForMapPoint:points[i]].x, [self pointForMapPoint:points[i+1]].x)-MIN([self pointForMapPoint:points[i]].x,[self pointForMapPoint:points[i+1]].x);
//垂直长度
float vertical=MAX([self pointForMapPoint:points[i]].y, [self pointForMapPoint:points[i+1]].y)-MIN([self pointForMapPoint:points[i]].y,[self pointForMapPoint:points[i+1]].y);
//两点直线长度
float distance=sqrt(pow(level, 2)+pow(vertical, 2));
float minlevel=vertical/distance*10;
float minvertical=level/distance*10;
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, [self pointForMapPoint:points[i]].x+minlevel, [self pointForMapPoint:points[i]].y-minvertical);
CGPathAddLineToPoint(path, NULL, [self pointForMapPoint:points[i+1]].x+minlevel, [self pointForMapPoint:points[i+1]].y-minvertical);
CGPathAddLineToPoint(path, NULL, [self pointForMapPoint:points[i+1]].x-minlevel, [self pointForMapPoint:points[i+1]].y+minvertical);
CGPathAddLineToPoint(path, NULL, [self pointForMapPoint:points[i]].x-minlevel, [self pointForMapPoint:points[i]].y+minvertical);
CGPathCloseSubpath(path);
CGContextAddPath(context, path);
CGFloat locations[2] = {0.0,1.0};
CGColorRef startColor;
CGColorRef endColor;
startColor=[UIColor greenColor].CGColor;
endColor=[UIColor redColor].CGColor;
NSArray *colors = @[(__bridge id) startColor, (__bridge id) endColor];
colors=@[(__bridge id) startColor, (__bridge id) endColor];
CGGradientRef gradient=CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef) colors, locations);
//渐变区域裁剪
CGContextClip(context);
//绘制渐变
CGContextDrawLinearGradient(context, gradient, sPoint, ePoint, kCGGradientDrawsAfterEndLocation);
CGContextRestoreGState(context);// 恢复到之前的context
//释放对象
CGColorSpaceRelease(colorSpace);
CGGradientRelease(gradient);
CGPathRelease(path);

最后如何在地图上画渐变的线条（思路来源）

渐变线条如下：

CGContextRef ctx=UIGraphicsGetCurrentContext();
CGColorRef startColor;
CGColorRef endColor;
startColor=[UIColor greenColor].CGColor;
endColor=[UIColor redColor].CGColor;
NSArray *colors = @[(__bridge id) startColor, (__bridge id) endColor];
CGColorSpaceRef baseSpace = CGColorSpaceCreateDeviceRGB();
CGGradientRef gradient = CGGradientCreateWithColors(baseSpace, (__bridge CFArrayRef)colors, NULL);
CGColorSpaceRelease(baseSpace), baseSpace = NULL;
CGContextMoveToPoint(ctx, 30, 30);
CGContextAddLineToPoint(ctx, 300, 300);
//注意，线条只能画成是空心的
CGContextSetLineWidth(ctx, 50);
CGContextSetLineJoin(ctx, kCGLineJoinRound);
CGContextSetLineCap(ctx, kCGLineCapRound);
CGContextReplacePathWithStrokedPath(ctx);
CGContextClip(ctx);
CGContextDrawLinearGradient(ctx, gradient, CGPointMake(30, 30), CGPointMake(300, 300), 0);
CGGradientRelease(gradient), gradient = NULL;

到这里渐变线条就会画了，地图上绘画就OK！