SVG在iOS中使用总结

SVG简介

SVG是一种用XML定义的语言，用来描述二维矢量及矢量/栅格图形。SVG提供了3种类型的图形对象：矢量图形（vectorgraphicshape例如：由直线和曲线组成的路径）、图象(image)、文本(text)。图形对象还可进行分组、添加样式、变换、组合等操作，特征集包括嵌套变换（nestedtransformations）、剪切路径（clippingpaths）、alpha蒙板（alphamasks）、滤镜效果（filtereffects）、模板对象（templateobjects）和其它扩展（extensibility）。SVG图形是可交互的和动态的，可以在SVG文件中嵌入动画元素或通过脚本来定义动画。

SVG优势

1. SVG 可被非常多的工具读取和修改（比如记事本）
2. SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
3. SVG 是可伸缩的
4. SVG 图像可在任何的分辨率下被高质量地打印
5. SVG 可在图像质量不下降的情况下被放大
6. SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
7. SVG 可以与 Javascript 技术一起运行
8. SVG 是开放的标准
9. SVG 文件是纯粹的 XML 

SVG在iOS中的运用

SVG在iOS中可以用UIWebView来加载：

NSString *svgName = @"fruit_map.svg";NSString *svgPath = [[NSBundle mainBundle] pathForResource:svgName ofType:nil];NSData *svgData = [NSData dataWithContentsOfFile:svgPath];NSString *reasourcePath = [[NSBundle mainBundle] resourcePath];NSURL *baseUrl = [[NSURL alloc] initFileURLWithPath:reasourcePath isDirectory:true];UIWebView *webView = [[UIWebView alloc] init];webView.frame = CGRectMake(0, CGRectGetMaxY(htpBtn.frame)+50, self.view.bounds.size.width, 300);[webView loadData:svgData MIMEType:@"image/svg+xml" textEncodingName:@"UTF-8" baseURL:baseUrl];[self.view addSubview:webView];

这种方法来加载SVG，虽然也可以，但是却存在诸如放大缩小、点击交互等问题。所以一般更加推荐使用SVGKit。

SVGKit使用

1、SVG创建

SVGKImage *svgImage = [SVGKImage imageNamed:svgName];SVGKFastImageView *svgView = [[SVGKFastImageView alloc] initWithSVGKImage:svgImage];svgView.frame = CGRectMake(0, CGRectGetMaxY(htpBtn.frame)+50, self.view.bounds.size.width, 300);[self.view addSubview:svgView];

2、实现SVG放大缩小功能

- (void)viewDidLoad {[super viewDidLoad];self.view.backgroundColor = [UIColor whiteColor];UIScrollView *scrollViewForSVG = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 200, self.view.bounds.size.width, self.view.bounds.size.height-200)];scrollViewForSVG.delegate = self;[self.view addSubview:scrollViewForSVG];_scrollViewForSVG = scrollViewForSVG;SVGKFastImageView *cOntentView= [[SVGKFastImageView alloc] initWithFrame:scrollViewForSVG.frame];[scrollViewForSVG addSubview:contentView];self.cOntentView= contentView;SampleFileInfo *info = [SampleFileInfo sampleFileInfoWithFilename:@"12.svg"];[self loadSVGFrom:info.source];
}-(void)loadSVGFrom:(SVGKSource *) svgSource{[SVGKImage imageWithSource:svgSourceonCompletion:^(SVGKImage *loadedImage, SVGKParseResult* parseResult){dispatch_async(dispatch_get_main_queue(), ^{loadedImage.DOMDocument.title = @"123";[self internalLoadedResource:svgSource parserOutput:parseResult createImageViewFromDocument:loadedImage];});}];
}-(void) internalLoadedResource:(SVGKSource*) source parserOutput:(SVGKParseResult*) parseResult createImageViewFromDocument:(SVGKImage*) document
{SVGKImageView* newCOntentView= nil;newCOntentView= [[SVGKFastImageView alloc] initWithSVGKImage:document];((SVGKFastImageView*)newContentView).disableAutoRedrawAtHighestResolution = TRUE;[self didLoadNewResourceCreatingImageView:newContentView];
}-(void)didLoadNewResourceCreatingImageView:(SVGKImageView*) newContentView{if (newContentView != nil) {self.cOntentView= newContentView;self.contentView.showBorder = YES;[self.scrollViewForSVG addSubview:self.contentView];[self.scrollViewForSVG setContentSize: self.contentView.frame.size];float screenToDocumentSizeRatio = self.scrollViewForSVG.frame.size.width / self.contentView.frame.size.width;self.scrollViewForSVG.minimumZoomScale = MIN( 2.5, screenToDocumentSizeRatio );self.scrollViewForSVG.maximumZoomScale = MAX( 2.5, screenToDocumentSizeRatio );[self.scrollViewForSVG setZoomScale:1.00 animated:YES];}
}


实现UIScrollView的代理方法：

//代理方法，告诉ScrollView要缩放的是哪个视图
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{return self.contentView;
}
-(void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)finalScale
{view.transform = CGAffineTransformIdentity; view.bounds = CGRectApplyAffineTransform(view.bounds, CGAffineTransformMakeScale(finalScale, finalScale));[view setNeedsDisplay];self.scrollViewForSVG.minimumZoomScale /= finalScale;self.scrollViewForSVG.maximumZoomScale /= finalScale;
}

3、SVG上进行路线规划

SVG上的线路规划，需要从服务器中拿取相关的坐标点，然后将其绘制在SVG上。具体实现如下：

-(void) didLoadNewResourceCreatingImageView:(SVGKImageView*) newContentView
{if( newContentView != nil ){self.cOntentView= newContentView;self.contentView.showBorder = YES;/** Move the gesture recognizer onto the new one */if( self.tapGestureRecognizer == nil ){self.tapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTapGesture:)];}[self.contentView addGestureRecognizer:self.tapGestureRecognizer];[self.contentView addSubview:self.imageView];[self.scrollViewForSVG addSubview:self.contentView];[self.scrollViewForSVG setContentSize: self.contentView.frame.size];float screenToDocumentSizeRatio = self.scrollViewForSVG.frame.size.width / self.contentView.frame.size.width;self.scrollViewForSVG.minimumZoomScale = MIN( 2.5, screenToDocumentSizeRatio );self.scrollViewForSVG.maximumZoomScale = MAX( 2.5, screenToDocumentSizeRatio );[self.scrollViewForSVG setZoomScale:1.00 animated:YES];}UIBezierPath * path = [[UIBezierPath alloc]init];path.lineWidth = 1.0;[path moveToPoint:CGPointMake( 0, 527 )];[path addLineToPoint:CGPointMake( 90, 527 )];[path addLineToPoint:CGPointMake( 99.96, 541.85 )];[path addLineToPoint:CGPointMake( 153.13, 546.03 )];[path addLineToPoint:CGPointMake( 204.96, 560.85 )];[path addLineToPoint:CGPointMake( 250.96, 585.85 )];[path addLineToPoint:CGPointMake( 310.87, 636.47 )];[path addLineToPoint:CGPointMake( 336.96, 662.85 )];[path addLineToPoint:CGPointMake( 402.5, 641.5 )];[path addLineToPoint:CGPointMake( 485.5, 647.5 )];CAShapeLayer *lineChartLayer = [CAShapeLayer layer];lineChartLayer.path = path.CGPath;lineChartLayer.strokeColor = [UIColor redColor].CGColor;lineChartLayer.fillColor = [[UIColor clearColor] CGColor];// 默认设置路径宽度为0，使其在起始状态下不显示lineChartLayer.lineWidth = 1;[self.contentView.layer addSublayer:lineChartLayer];
}


效果如下：