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！