iOS绘图基础(图像相关)

前篇地址：iOS绘图基础(图形文字曲线相关)

这篇主要是记录记录iOS绘图与图像有关的一些处理。包括绘制图片，裁剪图片，给图片增加水印等常用功能。

绘制图片

作为图片来说，也有两套方式去绘制图片。UIKit的方式、CoreGraphics的API方式。

第一种：(非常快速)

- (void)drawRect:(CGRect)rect {
    /*  绘制图片    */
    UIImage *image = [UIImage imageNamed:@"Vokie"];
    [image drawInRect:CGRectMake(10, 10, 100, 100)];
}

第二种：(稍显复杂)

- (void)drawRect:(CGRect)rect {
    /*  绘制图片    */
    CGRect imageRect = CGRectMake(10, -10, 100, 100);
    
    //获取上线文context
    CGContextRef context = UIGraphicsGetCurrentContext();

    /*图片绘制时的上下颠倒问题，具体原因不明，可能与底层的绘制API及其镜像相关，待深入研究。
      所以做了下面的一次翻转，一次平移的操作来修正*/
    //翻转context
    CGContextScaleCTM(context, 1, -1);
    //平移context
    CGContextTranslateCTM(context, 0, -imageRect.size.height);
    
    UIImage *cgImage = [UIImage imageNamed:@"Vokie"];
    //绘图
    CGContextDrawImage(context, imageRect, cgImage.CGImage);
}

对第二种方法，稍开脑洞。既然可以对context进行操作平移，缩放操作，也就可以旋转咯？

动手试试：

在上面代码的基础上增加CGContextRotateCTM(context, M_PI_2 / 3.0);

完全可以，效果如图：

rotate.png

裁剪圆角图片(原先图片)

- (void)drawRect:(CGRect)rect {
    /*  裁剪图片    */
    
    //imageSize的设置，决定图片裁剪后的导出大小
    CGSize imageSize = CGSizeMake(100, 100);
    
    UIGraphicsBeginImageContextWithOptions(imageSize, NO, UIScreen.mainScreen.scale);
    
    UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 100, 100)];
    [circlePath addClip];
    
    UIImage *clipImage = [UIImage imageNamed:@"Vokie"];
    [clipImage drawInRect:CGRectMake(0, 0, 100, 100)];
    
    /*  绘制水印    */
    NSString *waterMark = @"@vokie";
    [waterMark drawAtPoint:CGPointMake(25, 20) withAttributes:@{
        NSFontAttributeName:[UIFont systemFontOfSize:13],
        NSForegroundColorAttributeName:[UIColor whiteColor]
                                                                }];
    
    //此时导出的图片的大小是受imageSize的影响。
    UIImage *clipedImage = UIGraphicsGetImageFromCurrentImageContext();
    //将裁剪后的图片圆形图片返回出去给外部调用
    //return clipedImage;
    
    UIGraphicsEndImageContext();
    
    //将裁剪后的图片放大并展示到context画布上。
    [clipedImage drawInRect:CGRectMake(30, 10, 140, 140)];
}

需要注意的是，必须要先调用addClip方法，然后在draw图片。先后顺序不能颠倒。可以手动改改这些代码，实践出真知。运行效果如下：

wm.png

基于上面的圆形裁剪的代码，也就可以一定程度上写出类似于上传图片前的矩形裁剪的代码。基本原理是一致的。

综合理解下：

熟练掌握了iOS绘制的相关内容(图形文字图像等的绘制、context的平移缩放旋转，图像尺寸缩放裁剪等)，便可以解决实际开发中遇到的各种问题。因为在开发中，经常会和图片打交道。当然更重要的是了解其背后的底层知识。这两篇也就是学习笔记加上入门会写。还要继续在这个文章分类下添加更多的深入篇。