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

寫在前面

咱們確定作過這樣的需求,給一個圖片切圓角,
固然咱們大多采用簡單粗暴的方法
myIcon.layer.cornerRadius = 16.5
myIcon.layer.masksToBounds = true
若是是靜態的頁面也可有可無,要是能夠滑動的頁面,
有不少須要裁剪的圖片,那麼就要考慮性能了。接下來的方法就是其中一種不錯的方法,
此代碼已經上傳到githup[DDGScreenShot](https://github.com/dudongge/DDGScreenShot)
歡迎查看[DDGScreenShot](https://github.com/dudongge/DDGScreenShot)
固然這只是這個庫的功能的一小部分
想看更多功能,能夠去github上下載,若是對您有幫助,但願您不吝給個star.
功能代碼以下:
複製代碼

DDGScreenShot 全部功能演示

image
image

具體代碼

1,採用UIBezierPath繪製路徑的方法
let image = UIImage(named: imageName)
 //開啓上下文
 UIGraphicsBeginImageContext((image?.size)!)
 //設置一個圓形的裁剪區域
 let path = UIBezierPath(ovalIn: CGRect(x: 0,
                                        y: 0,
                                        width: (image?.size.width)!,
                                        height: (image?.size.height)!))
        
//把路徑設置爲裁剪區域(超出裁剪區域之外的內容會被自動裁剪掉)
path.addClip()
//把圖片繪製到上下文當中
image?.draw(at: CGPoint.zero)
//從上下文當中生成一張圖片
let newImage = UIGraphicsGetImageFromCurrentImageContext()
//關閉上下文
UIGraphicsEndImageContext()
newImage 就是咱們須要的圖片

複製代碼

可能你會懷疑性能,好,能夠,咱們放在子線程裏進行,代碼以下

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

彷佛已經完美的解決了這個問題,但是截取圓角固定的圓角該怎麼辦呢,繼續往下看,代碼以下

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

固然也能夠在子線程中進行

/**
     ** 用異步繪圖方式將圖片進行任意圓角裁剪
     - imageName --傳頭頭像名稱
     - cornerRadius --要設置圓角的大小
     - parameter completed:    異步完成回調(主線程回調)
     */
    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)
            })
        }
    }
    //固然你還不滿意,由於產品一句:加上個邊框吧,總有辦法實現,不信,請看代碼:
複製代碼

切圓角,加邊框

/**
     ** 繪圖方式將圖片裁剪成圓角並添加邊框
     - imageName --傳頭頭像名稱
     - borderWidth --邊框大小
     - borderColor --邊框顏色
     */
    public func tailoringImageLayer(_ image: UIImage,borderWidth width:CGFloat,borderColor color: UIColor ) -> UIImage? {
        //1.先開啓一個圖片上下文 ,尺寸大小在原始圖片基礎上寬高都加上兩倍邊框寬度.
        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))
        //顏色設置
        color.set()
        //填充
        path.fill()
        //3.添加一個小圓,小圓,x,y從邊框寬度位置開始添加,寬高和原始圖片同樣大小.把小圓設爲裁剪區域.
        let clipPath = UIBezierPath(ovalIn: CGRect(x: width, y: width, width: image.size.width, height: image.size.height))
        //把小圓設爲裁剪區域.
        clipPath.addClip()
        //4.把圖片給繪製上去.
        image.draw(at: CGPoint(x: width, y: width))
        //5.從上下文當中生成一張圖片
        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        //6.關閉上下文
        UIGraphicsEndImageContext()
        return  newImage
    }
    /**
     ** 異步繪圖方式將圖片裁剪成圓角並添加邊框
     - imageName --傳頭頭像名稱
     - borderWidth --邊框大小
     - borderColor --邊框顏色
     - parameter completed:    異步完成回調(主線程回調)
     */
    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

結束語

總算大功告成,此代碼已經上傳到githup[DDGScreenShot](https://github.com/dudongge/DDGScreenShot)
[link](https://github.com/dudongge/DDGScreenShot)
固然這只是這個庫的功能的一小部分
想看更多功能,能夠去github上下載,若是對您有幫助,但願您不吝給個star.
複製代碼

歡迎查看DDGScreenShotgit

其他功能以下

  1. (一)DDGScreenShot — 複雜屏幕截屏(如view ScrollView webView wkwebView)
  2. (二)DDGScreenShot--iOS 圖片處理--多圖片拼接
  3. (三)DDGScreenShot--iOS 圖片裁剪,切圓角,加邊框,你還用cornerRadius,還有更高級的用法
  4. (四)DDGScreenShot—圖片擦除功能
  5. (五)DDGScreenShot—截取圖片的任意部分
  6. (六)DDGScreenShot —圖片加各類濾鏡高逼格操做
相關文章
相關標籤/搜索