美文网首页苹果开发iOS开发知识小集
iOS下实现图片加文字(缩放&旋转)

iOS下实现图片加文字(缩放&旋转)

作者: 侯志桐 | 来源:发表于2018-09-17 14:58 被阅读97次

    最近有一个需求是要在图片上加文字,第三方实现的很多,但是不想用SDK.打算用代码自己写.
    最初的方案是自己在画布上绘制,记录用户的旋转角度和缩放倍数,计算文字的位置,然后依次绘制到CGContext上.下边是基本代码.
    但是这个实现方式有一个问题就是位置需要精确计算.并且因为进行了transform之后.UIView的frame整体值是有问题的.x值不是左上角,而是最靠左侧点的位置.y值为最靠上点的位置.导致整个坐标系需要进行计算.并且容易出错.

    NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
            [paragraphStyle setLineBreakMode:NSLineBreakByWordWrapping];
            //等比例缩放的话这里宽高都可以
            CGFloat fltImageScale = self.imagePanle.image.size.width / self.imagePanle.width;
            CGFloat fltTextScale = lblText.scale;
            NSDictionary *dicAttribute = @{NSForegroundColorAttributeName:[UIColor redColor],NSFontAttributeName:[UIFont fontWithName:DP_FONTNAME size:17 * fltTextScale * fltImageScale],NSParagraphStyleAttributeName:paragraphStyle};
            
            CGPoint textOrigin = [lblText convertPoint:CGPointZero toView:lblText.superview];
            textOrigin = CGPointMake(textOrigin.x * fltImageScale, textOrigin.y * fltImageScale);
            CGSize textSize = CGSizeMake(lblText.bounds.size.width * lblText.scale * fltImageScale, lblText.bounds.size.height * lblText.scale * fltImageScale);
            CGRect textRect = CGRectMake(textOrigin.x, textOrigin.y, textSize.width, textSize.height);
            
            
            //旋转角度
            CGFloat fltRotate = lblText.angle;
            
            
            //      [lblText.text drawInRect:textRect withAttributes:dicAttribute];
            
            
            CGPoint translateOrignal =CGPointMake(textOrigin.x + textSize.width * 0.5,textOrigin.y + textSize.height * 0.5);
            textOrigin = CGPointMake(-textSize.width * 0.5,-textSize.height * 0.5);
            
            textRect.origin = CGPointMake(textOrigin.x, textOrigin.y);
            
            CGContextTranslateCTM(context, translateOrignal.x,translateOrignal.y);
            CGContextRotateCTM(context,radians(fltRotate));
            
            [lblText.text drawInRect:textRect withAttributes:dicAttribute];
            
            //复原
            CGContextRotateCTM(context,radians(-fltRotate));
            CGContextTranslateCTM(context, -translateOrignal.x,-translateOrignal.y);
    

    最后的实现方式是在页面上加了一个UIView,放置所有添加的UILable,在生成图时选择先绘制背景图,然后将UIView生成一个图片直接追加上去,不需要进行位置的计算.唯一的一个需要注意的点就是CGContext的大小和位置问题.我这里选择使用image和它所在的UIImageView的缩放比例作为CGContext的scale使用.

    CGFloat fltImageScale = self.image.size.width / self.imageView.bounds.size.width;
        UIGraphicsBeginImageContextWithOptions(self.viewTextPanle.size, NO,fltImageScale);
        CGContextRef context = UIGraphicsGetCurrentContext();
        [self.image drawInRect:self.viewTextPanle.bounds];
        [self.viewTextPanle.layer renderInContext:context];
        UIImage *resultImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        while (self.viewTextPanle.subviews.firstObject) {
            [self.viewTextPanle.subviews.firstObject removeFromSuperview];
        }
        self.imageView.image = resultImage;
    

    有些功能实现起来很复杂.但是换一个思路其实特别简单,这里将自己的坑写出来,希望能帮助到其他人

    相关文章

      网友评论

        本文标题:iOS下实现图片加文字(缩放&旋转)

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