DDGScreenShot--iOS 圖片裁剪,切圓角,加邊框,你還用cornerRadius,還有更高級的用法

寫在前面

我們肯定做過這樣的需求,給一個圖片切圓角,
當然我們大多采用簡單粗暴的方法
myIcon.layer.cornerRadius = 16.5
myIcon.layer.masksToBounds = true
如果是靜態(tài)的頁面也無關(guān)緊要,要是可以滑動的頁面,
有很多需要裁剪的圖片,那么就要考慮性能了。接下來的方法就是其中一種不錯的方法,
此代碼已經(jīng)上傳到githup[DDGScreenShot](https://github.com/dudongge/DDGScreenShot)
歡迎查看[DDGScreenShot](https://github.com/dudongge/DDGScreenShot)
當然這只是這個庫的功能的一小部分
想看更多功能,可以去github上下載,如果對您有幫助,希望您不吝給個star.
功能代碼如下:

具體代碼

1,采用UIBezierPath繪制路徑的方法
let image = UIImage(named: imageName)
 //開啟上下文
 UIGraphicsBeginImageContext((image?.size)!)
 //設(shè)置一個圓形的裁剪區(qū)域
 let path = UIBezierPath(ovalIn: CGRect(x: 0,
                                        y: 0,
                                        width: (image?.size.width)!,
                                        height: (image?.size.height)!))
        
//把路徑設(shè)置為裁剪區(qū)域(超出裁剪區(qū)域以外的內(nèi)容會被自動裁剪掉)
path.addClip()
//把圖片繪制到上下文當中
image?.draw(at: CGPoint.zero)
//從上下文當中生成一張圖片
let newImage = UIGraphicsGetImageFromCurrentImageContext()
//關(guān)閉上下文
UIGraphicsEndImageContext()
newImage 就是我們需要的圖片

可能你會懷疑性能,好,可以,我們放在子線程里進行,代碼如下

DispatchQueue.global().async{
            //將上述代碼發(fā)放進去即可
            let image = UIImage(named: imageName)
 //開啟上下文
 UIGraphicsBeginImageContext((image?.size)!)
 //設(shè)置一個圓形的裁剪區(qū)域
 let path = UIBezierPath(ovalIn: CGRect(x: 0,
                                        y: 0,
                                        width: (image?.size.width)!,
                                        height: (image?.size.height)!))
        
//把路徑設(shè)置為裁剪區(qū)域(超出裁剪區(qū)域以外的內(nèi)容會被自動裁剪掉)
path.addClip()
//把圖片繪制到上下文當中
image?.draw(at: CGPoint.zero)
//從上下文當中生成一張圖片
let newImage = UIGraphicsGetImageFromCurrentImageContext()
//關(guān)閉上下文
UIGraphicsEndImageContext()
            DispatchQueue.main.async(execute: {
            //拿到 newImage 到主線程更新UI
                completed(newImage)
            })
        }

似乎已經(jīng)完美的解決了這個問題,可是截取圓角固定的圓角該怎么辦呢,繼續(xù)往下看,代碼如下

  /**
     ** 用異步繪圖方式將圖片進行任意圓角裁剪
     - imageName --傳頭頭像名稱
     - cornerRadius --傳頭頭像名稱
     */
    public func tailoringImage(_ imageName: String,withRadius radius: CGFloat) -> UIImage? {
        let image = UIImage(named: imageName)
        if image == nil {
            return UIImage()
        }
        //開啟上下文
        UIGraphicsBeginImageContext((image?.size)!)
        //設(shè)置一個圓形的裁剪區(qū)域
        let path = UIBezierPath(roundedRect: CGRect(x: 0,
                                                    y: 0,
                                                    width: (image?.size.width)!,
                                                    height: (image?.size.height)!), cornerRadius: radius)
        
        //把路徑設(shè)置為裁剪區(qū)域(超出裁剪區(qū)域以外的內(nèi)容會被自動裁剪掉)
        path.addClip()
        //把圖片繪制到上下文當中
        image?.draw(at: CGPoint.zero)
        //從上下文當中生成一張圖片
        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        //關(guān)閉上下文
        UIGraphicsEndImageContext()
        return newImage
    }

當然也可以在子線程中進行

/**
     ** 用異步繪圖方式將圖片進行任意圓角裁剪
     - imageName --傳頭頭像名稱
     - cornerRadius --要設(shè)置圓角的大小
     - parameter completed:    異步完成回調(diào)(主線程回調(diào))
     */
    public func async_tailoringImage(_ imageName: String,withRadius radius: CGFloat,completed:@escaping (UIImage?) -> ()) -> Void {
        DispatchQueue.global().async{
            let newImage = self.tailoringImage(imageName, withRadius: radius)
            DispatchQueue.main.async(execute: {
                completed(newImage)
            })
        }
    }
    //當然你還不滿意,因為產(chǎn)品一句:加上個邊框吧,總有辦法實現(xiàn),不信,請看代碼:

切圓角,加邊框

/**
     ** 繪圖方式將圖片裁剪成圓角并添加邊框
     - imageName --傳頭頭像名稱
     - borderWidth --邊框大小
     - borderColor --邊框顏色
     */
    public func tailoringImageLayer(_ image: UIImage,borderWidth width:CGFloat,borderColor color: UIColor ) -> UIImage? {
        //1.先開啟一個圖片上下文 ,尺寸大小在原始圖片基礎(chǔ)上寬高都加上兩倍邊框?qū)挾?
        let imageSize = CGSize(width: image.size.width + width * 2 , height: image.size.height + width * 2)
        UIGraphicsBeginImageContext(imageSize)
        //2.填充一個圓形路徑.這個圓形路徑大小,和上下文尺寸大小一樣.
        //把大圓畫到上下文當中.
        let path = UIBezierPath(ovalIn: CGRect(x: 0,
                                               y: 0,
                                               width: imageSize.width,
                                               height: imageSize.height))
        //顏色設(shè)置
        color.set()
        //填充
        path.fill()
        //3.添加一個小圓,小圓,x,y從邊框?qū)挾任恢瞄_始添加,寬高和原始圖片一樣大小.把小圓設(shè)為裁剪區(qū)域.
        let clipPath = UIBezierPath(ovalIn: CGRect(x: width, y: width, width: image.size.width, height: image.size.height))
        //把小圓設(shè)為裁剪區(qū)域.
        clipPath.addClip()
        //4.把圖片給繪制上去.
        image.draw(at: CGPoint(x: width, y: width))
        //5.從上下文當中生成一張圖片
        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        //6.關(guān)閉上下文
        UIGraphicsEndImageContext()
        return  newImage
    }
    /**
     ** 異步繪圖方式將圖片裁剪成圓角并添加邊框
     - imageName --傳頭頭像名稱
     - borderWidth --邊框大小
     - borderColor --邊框顏色
     - parameter completed:    異步完成回調(diào)(主線程回調(diào))
     */
    public func async_tailoringImageLayer(_ image: UIImage,borderWidth width:CGFloat,borderColor color: UIColor ,completed:@escaping (UIImage?) -> ()) -> Void {
        DispatchQueue.global().async{
            let newImage = self.tailoringImageLayer(image, borderWidth: width, borderColor: color)
            DispatchQueue.main.async(execute: {
                completed(newImage)
            })
        }
    }

上圖片

image

結(jié)束語

總算大功告成,此代碼已經(jīng)上傳到githup[DDGScreenShot](https://github.com/dudongge/DDGScreenShot)
[link](https://github.com/dudongge/DDGScreenShot)
當然這只是這個庫的功能的一小部分
想看更多功能,可以去github上下載,如果對您有幫助,希望您不吝給個star.

歡迎查看DDGScreenShot

其余功能如下

  1. (一)DDGScreenShot — 復(fù)雜屏幕截屏(如view ScrollView webView wkwebView)
  2. (二)DDGScreenShot--iOS 圖片處理--多圖片拼接
  3. (三)DDGScreenShot--iOS 圖片裁剪,切圓角,加邊框,你還用cornerRadius,還有更高級的用法
  4. (四)DDGScreenShot—圖片擦除功能
  5. (五)DDGScreenShot—截取圖片的任意部分
  6. (六)DDGScreenShot —圖片加各種濾鏡高逼格操作
  7. (七)DDGScreenShot —圖片加高斯模糊,老電影效果
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容