iOS SVG图形裁剪

冰凉的枷锁.

已于 2022-06-21 17:13:40 修改

阅读量553

点赞数

分类专栏： iOS 文章标签： ios

于 2022-06-20 18:38:28 首次发布

本文链接：https://blog.csdn.net/qq_25639809/article/details/125378303

版权

iOS 专栏收录该内容

45 篇文章 2 订阅

订阅专栏

Demo地址：https://github.com/ColdChains/QLSVGClipsImage.git

请添加图片描述

1.项目导入PocketSVG

2.根据svg文件绘制出svg图形


    SVGBezierPath *svgPath = [SVGBezierPath pathsFromSVGAtURL:[NSURL fileURLWithPath:self.filepath]].firstObject;
    
    CGSize svgSize = SVGBoundingRectForPaths(@[svgPath]).size;
    
    // 根据svg图形显示scrollview和imageview
    self.scrollView.frame = CGRectMake(100, 200, 200, 200 * svgSize.height / svgSize.width);
    self.imageView.frame = [self adaptionSize:self.scrollView.bounds.size edgInsets:UIEdgeInsetsZero image:self.imageView.image aspectFit:NO needOrigin:NO];
    self.scrollView.contentSize = self.imageView.frame.size;
    
    CGRect drawRect = self.scrollView.frame;
    CGFloat scaleWidth = drawRect.size.width / svgSize.width;
    CGFloat scaleHeight = drawRect.size.height / svgSize.height;
    CGAffineTransform pathTransform = CGAffineTransformConcat(CGAffineTransformMakeTranslation(drawRect.origin.x / scaleWidth, drawRect.origin.y / scaleHeight), CGAffineTransformMakeScale(scaleWidth , scaleHeight));
    CGPathRef transformedPath = CGPathCreateCopyByTransformingPath(svgPath.CGPath, &pathTransform);
    
    UIBezierPath *clipPath = [UIBezierPath bezierPathWithCGPath:transformedPath];
    
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:UIScreen.mainScreen.bounds];
    [path appendPath:clipPath];
    
    self.maskLayer.path = path.CGPath;

3.计算出图片缩放后需要裁剪的位置


    SVGBezierPath *svgPath = [SVGBezierPath pathsFromSVGAtURL:[NSURL fileURLWithPath:self.filepath]].firstObject;
    
    CGSize svgSize = SVGBoundingRectForPaths(@[svgPath]).size;
    CGFloat imageScale = self.imageView.frame.size.width / self.imageView.image.size.width;
    CGFloat svgWidth = self.scrollView.frame.size.width / imageScale;
    CGFloat svgHeight = svgSize.height * svgWidth / svgSize.width;
    // 计算svg缩放比
    CGAffineTransform pathTransform = CGAffineTransformMakeScale(svgWidth / svgSize.width, svgHeight / svgSize.height);
    CGPathRef transformedPath = CGPathCreateCopyByTransformingPath(svgPath.CGPath, &pathTransform);
    UIBezierPath *path = [UIBezierPath bezierPathWithCGPath:transformedPath];
    
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(svgWidth, svgHeight), NO, 1.0);
    [path addClip];
    
    // 计算绘制位置
    CGFloat svgX = self.scrollView.contentOffset.x / imageScale;
    CGFloat svgY = self.scrollView.contentOffset.y / imageScale;
    [self.imageView.image drawAtPoint:CGPointMake(-svgX, -svgY)];
    
    // 生成裁切后的图片
    UIImage *clipImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();