SVG简介
SVG是一种用XML定义的语言，用来描述二维矢量及矢量/栅格图形。SVG提供了3种类型的图形对象：矢量图形（vectorgraphicshape例如：由直线和曲线组成的路径）、图象(image)、文本(text)。图形对象还可进行分组、添加样式、变换、组合等操作，特征集包括嵌套变换（nestedtransformations）、剪切路径（clippingpaths）、alpha蒙板（alphamasks）、滤镜效果（filtereffects）、模板对象（templateobjects）和其它扩展（extensibility）。SVG图形是可交互的和动态的，可以在SVG文件中嵌入动画元素或通过脚本来定义动画。
SVG优势
- SVG 可被非常多的工具读取和修改（比如记事本）
- SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
- SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
- SVG 可以与 JavaScript 技术一起运行
- SVG 是开放的标准
- 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:svgSource
onCompletion:^(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];
}
效果如下：
