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);

完全可以,效果如图:

旋转图片

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

- (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图片。先后顺序不能颠倒。可以手动改改这些代码,实践出真知。运行效果如下:

圆形水印图片

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

综合理解下:

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

文章来自 http://skymonkey.cn/

高能广告区

暂无广告哦=^^=。继续看看其它文章吧!