Swift 绘制圆形头像

2016-10-29  本文已影响456人  chenyu1520

使用 Swift 绘制圆形头像,代码如下:

//
//  ViewController.swift
//  CircleFavicon
//
//  Created by chenyu on 2016/10/29.
//  Copyright © 2016年 ChenYu. All rights reserved.
//

/*
    图片原本是矩形,回执成圆形头像
*/

import UIKit


class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        //第一种
        let circleFavicon1 = UIImageView.init(frame: CGRect.init(x: 100, y: 100, width: 50, height: 50))
        circleFavicon1.image = self.circleFaviconWithFromQuqrtz2D(name: "qiqi.JPG", borderWidth: 2.0, borderColor: .purple)
        
        self.view.addSubview(circleFavicon1)
        self.view.backgroundColor = UIColor.darkGray
        
        //第二种
        let circleFavicon2 = UIImageView.init(frame: CGRect.init(x: 100, y: 200, width: 50, height: 50))
        circleFavicon2.image = UIImage.init(named: "qiqi.JPG")
        self.circleFaviconFromCALayer(imageView: circleFavicon2)
        self.view.addSubview(circleFavicon2)
        
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    /// Swift2.3以前
    /// 使用 quartz2D 绘制圆形头像
    ///
    /// - parameter name:        图片名字
    /// - parameter borderWidth: 绘制后的图片边框
    /// - parameter borderColor: 边框颜色
    ///
    /// - returns: 绘制后的图片
    func circleFaviconWithFromQuqrtz2D(name: String, borderWidth: CGFloat, borderColor: UIColor) -> UIImage {
        
        //加载原图
        let original = UIImage.init(named: name)
        
        //开启上下文
        let imageW: CGFloat = (original?.size.width)! + 22 * borderWidth
        let imageH: CGFloat = (original?.size.height)! + 22 * borderWidth
        let imageSize = CGSize.init(width: imageW, height: imageH)
        UIGraphicsBeginImageContextWithOptions(imageSize, false, 0.0)
        
        //取得当前的上下文,这里得到的就是上面刚创建的图片上下文
        let context = UIGraphicsGetCurrentContext()
        
        //画边框(大圆)
        borderColor.set()
        let bigRadius: CGFloat = imageW * 0.5 //大圆半径
        let centerX = bigRadius //圆心
        let centerY = bigRadius //圆心
        let center = CGPoint.init(x: centerX, y: centerY)
        let endAngle = CGFloat(M_PI*2)
        
        context?.addArc(center: center, radius: bigRadius, startAngle: 0, endAngle: endAngle, clockwise: false)
        context?.fillPath()
        
        //小圆
        let smallRadius = bigRadius - borderWidth
        context?.addArc(center: center, radius: smallRadius, startAngle: 0, endAngle: endAngle, clockwise: false)
        context?.clip()
        
        //画圆
        original?.draw(in: CGRect.init(x: borderWidth, y: borderWidth, width: (original?.size.width)!, height: (original?.size.height)!))
        
        //取图
        let circleFavicon = UIGraphicsGetImageFromCurrentImageContext()
        
        //结束上下文
        UIGraphicsEndImageContext()
        
        return circleFavicon!
    }
    
    
    /// 使用 CALayer 绘制圆形头像
    ///
    /// - parameter imageView: 要被绘制的 imageView
    func circleFaviconFromCALayer(imageView: UIImageView) -> Void {
        let imageView = imageView
        imageView.layer.masksToBounds = true
        
        imageView.layer.cornerRadius = imageView.bounds.size.width * 0.5
        
        imageView.layer.borderWidth = 5.0
        
        imageView.layer.borderColor = UIColor.white.cgColor
        
    }

}

Swift2.3 版本的写法(写在 UIImage 的扩展中)

/**

     * param: radius            圆角半径

     * 注意:只有当imageView.image不为nil时,调用此方法才有效果

     */
   func cornerRadius(bounds: CGRect ,radius:CGFloat) -> UIImage{
        
        //开始图形上下文
        UIGraphicsBeginImageContextWithOptions(CGSizeMake(bounds.size.width, bounds.size.height), false, UIScreen.mainScreen().scale)

        //获取图形上下文
        let ctx = UIGraphicsGetCurrentContext()
        //根据一个rect创建一个椭圆
        CGContextAddEllipseInRect(ctx!, bounds)
        //裁剪
        CGContextClip(ctx!)
        //将原照片画到图形上下文
        self.drawInRect(bounds)
        //从上下文上获取剪裁后的照片
        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        //关闭上下文
        UIGraphicsEndImageContext()
        
        return newImage!
    }

Swift3.0 版本,(写在 UIImageView 的扩展中)

/**

     * param: radius            圆角半径

     * 注意:只有当imageView.image不为nil时,调用此方法才有效果

     */
    func cornerRadius(radius:CGFloat){

        //开始图形上下文
        UIGraphicsBeginImageContextWithOptions(self.bounds.size, false, UIScreen.main.scale)
        //获取图形上下文
        let ctx = UIGraphicsGetCurrentContext()
        //根据一个rect创建一个椭圆
        ctx!.addEllipse(in: self.bounds)
        //裁剪
        ctx!.clip()
        //将原照片画到图形上下文
         self.image!.draw(in: self.bounds)
        //从上下文上获取剪裁后的照片
        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        //关闭上下文
        UIGraphicsEndImageContext()

        self.image = newImage
    }
}

Swift 一版一点变化,有小变化也有大变化,真的要哭了。。。。

上一篇下一篇

猜你喜欢

热点阅读