年年有"余"

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 3197|回复: 5

Quartz2D的基本使用(第四讲:图片裁剪-QQ圆形头像制作)

[复制链接]
  • TA的每日心情
    奋斗
    2022-12-13 21:26
  • 签到天数: 371 天

    [LV.9]以坛为家II

    发表于 2014-12-1 14:37:40 | 显示全部楼层 |阅读模式
    本帖最后由 Sian 于 2015-7-13 09:22 编辑

    一、基本思路

        1、开启位图上下文(UIGraphicsGetCurrentContext()为普通图层上下文,即view的layer层),位图上下文使用函数UIGraphicsBeginImageContext(CGSize size)或UIGraphicsBeginImageContextWithOptions(CGSize size, BOOL opaque, CGFloat scale)开启;

        2、描述一个原图加边框大小的圆形区域;(假设原图为正方形,原图边长为10,边框为2,则新区域边长为14)

        3、将该区域填充为白色并渲染上去

        4、以原图片大小描述一个新的圆形区域并设置合适的大小尺寸使其居于上一个白色圆形的正中心

        5、裁剪该圆形区域

        6、将原图片渲染到新的圆形区域,由于上面的剪裁关系,超出圆形区域自动不可见

        7、获取上下文渲染出来的图片设置某个UIImageView上查看效果

        8、为方便使用,将上述方面封装成UIImage的Category,传入图片名及边框大小即可返回新的圆形头像图片

    二、关键代码

    [Objective-C] 纯文本查看 复制代码
    //
    //  UIImage+SA.m
    //  Quartz2D
    //
    //  Created by 余西安 on 14/12/1.
    //  Copyright (c) 2014年 Sian. All rights reserved.
    //
    
    #import "UIImage+SA.h"
    
    @implementation UIImage (SA)
    
    + (instancetype)roundCutImage:(NSString *)imageName edgeWidth:(float)width
    {
        // 0、新图片的大小为原有图片基本上加外边框宽度
        UIImage *image = [UIImage imageNamed:imageName];
        CGSize newSize = CGSizeMake(image.size.width + width * 2, image.size.height + width * 2);
        
        // 1、开启位图上下文
        UIGraphicsBeginImageContextWithOptions(newSize, NO, 0.0);
        
        // 2、获取位图上下文
        CGContextRef c = UIGraphicsGetCurrentContext();
        
        // 3、以新图片大小画底色为白色的圆
        CGContextAddEllipseInRect(c, (CGRect){CGPointZero, newSize});
        CGContextSetFillColorWithColor(c, [UIColor whiteColor].CGColor);
        CGContextFillPath(c);
        
        // 4、在图像上下文中描述一个原图大小的圆
        CGRect imageRect = (CGRect){width, width, image.size};
        CGContextAddEllipseInRect(c, imageRect);
        
        // 5、对描述进行裁剪,即其他区域不可渲染
        CGContextClip(c);
        
        // 6、将原图片渲染到上下文(被裁剪区域不可见)
        [image drawInRect:imageRect];
        
        // 7、获取上下文渲染出来的图片
        UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
        
        // 8、关闭上下文描述
        UIGraphicsEndImageContext();
        
        return newImage;
    }
    
    @end
    

    三、效果展示
        左图:self.iconView.image = [UIImage imageNamed:@"sian.png"];
        右图:self.iconView.image = [UIImage roundCutImage:@"sian.png" edgeWidth:5];

    iOS 模拟器屏幕快照“2014年12月1日 下午2.31.53”.png    iOS 模拟器屏幕快照“2014年12月1日 下午2.32.03”.png


    四、Demo下载
    游客,如果您要查看本帖隐藏内容请回复

    该用户从未签到

    发表于 2015-2-3 15:17:28 | 显示全部楼层
    好东西,现在正需要呢
  • TA的每日心情
    奋斗
    2015-3-30 11:25
  • 签到天数: 4 天

    [LV.2]偶尔看看I

    发表于 2015-3-23 10:47:31 | 显示全部楼层
    非常棒的教程啊···楼主 我要拜你为师··

    该用户从未签到

    发表于 2015-4-15 22:16:33 | 显示全部楼层
    下载下来看看@
  • TA的每日心情
    犯困
    2015-1-11 14:36
  • 签到天数: 5 天

    [LV.2]偶尔看看I

    发表于 2015-6-26 10:50:51 | 显示全部楼层
    下载看一看

    该用户从未签到

    发表于 2015-7-1 15:36:53 | 显示全部楼层
    支持一下:)
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    手机版|小黑屋|Archiver|iOS开发笔记 ( 湘ICP备14010846号 )

    GMT+8, 2024-3-28 22:42 , Processed in 0.050766 second(s), 21 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表