美文网首页iOS
SVG在iOS中使用总结

SVG在iOS中使用总结

作者: 蜗牛非牛 | 来源:发表于2019-09-30 18:05 被阅读0次

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: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];
}

效果如下:


相关文章

网友评论

    本文标题:SVG在iOS中使用总结

    本文链接:https://www.haomeiwen.com/subject/azdhpctx.html