1. 程式人生 > >分享iOS中常用的繪圖, 截圖方法

分享iOS中常用的繪圖, 截圖方法

  1. 設定某些角為圓角, 使用UIBezierPath

         let layer = CAShapeLayer()
         // 這裡byRoundingCorners -> 指定圓角
         layer.path = UIBezierPath(roundedRect: testView.bounds, byRoundingCorners: [UIRectCorner.TopLeft, .TopRight], cornerRadii: CGSize(width: 20, height: 20)).CGPath
         testView.layer.mask = layer
  2. 設定view的四個角都為圓角, 最簡單的方法, 使用當然最簡單的某些情況下肯定就是不適合的, 因為這個方法會觸發離屏渲染, 如果介面中有大量的圓角view的處理, 會出現掉幀的"現象"

         testView.layer.cornerRadius = 20.0
         testView.layer.masksToBounds = true
  3. 縮放圖片

    • 3.1

      // 縮放圖片
      func resizeImage(image: UIImage, toWidth width: CGFloat, withHeight height: CGFloat) -> UIImage {
         let size = CGSize(width: width, height: height)
         // 開啟一個上下文
         /// 設定為false 表示背景不透明 -> 黑色
         /// 設定為 0 -> 可以自適應不同的螢幕的scale顯示
      UIGraphicsBeginImageContextWithOptions(size, false, 0) // 獲取上下文 let context = UIGraphicsGetCurrentContext() // 轉換座標原點到左下角 CGContextTranslateCTM(context, 0.0, height) CGContextScaleCTM(context, 1.0, -1.0) // 設定繪製模式 CGContextSetBlendMode(context, .Copy) // 繪圖 CGContextDrawImage(context, CGRect
      (origin: CGPointZero, size: size), image.CGImage) // 取得圖片 let retrivedImage = UIGraphicsGetImageFromCurrentImageContext() // 結束上下文 UIGraphicsEndImageContext() return retrivedImage }
    • 3.2

      // 縮放圖片
      func resizeImage(image: UIImage, toWidth width: CGFloat, withHeight height: CGFloat) -> UIImage {
         let size = CGSize(width: width, height: height)
         // 開啟一個上下文
         /// 設定為false 表示背景不透明 -> 黑色
         /// 設定為 0 -> 可以自適應不同的螢幕的scale顯示
         UIGraphicsBeginImageContextWithOptions(size, false, 0)
         /// 繪製圖片
         image.drawInRect(CGRect(origin: CGPointZero, size: size))
         // 取得圖片
         let retrivedImage = UIGraphicsGetImageFromCurrentImageContext()
         // 結束上下文
         UIGraphicsEndImageContext()
         return retrivedImage
      }
  4. 截圖功能

    • 4.1

      func snapView(targetView: UIView) -> UIImage {
         UIGraphicsBeginImageContextWithOptions(targetView.bounds.size, false, 0)
         // iOS7.0 之後系統提供的截圖的功能
         targetView.drawViewHierarchyInRect(targetView.bounds, afterScreenUpdates: false)
      
         let snapdImage = UIGraphicsGetImageFromCurrentImageContext()
         UIGraphicsEndImageContext()
         return snapdImage
      
      }
    • 4.2

      //這個方法會返回一個"截圖"後的view
      // withCapInsets  -> 這個和拉伸圖片的image.resizableImageWithCapInsets()使用一樣
        let snapShotView  = view.resizableSnapshotViewFromRect(view.bounds, afterScreenUpdates: false, withCapInsets: UIEdgeInsetsZero)
    • 4.3
     func snapView(targetView: UIView) -> UIImage {
                 UIGraphicsBeginImageContextWithOptions(targetView.bounds.size, false, 0.0)
    // 區分和4.1中的使用
       targetView.layer.renderInContext(UIGraphicsGetCurrentContext()!)
         let image = UIGraphicsGetImageFromCurrentImageContext()
         UIGraphicsEndImageContext()
    
         return image
    
     }
  5. 剪裁圖片的指定部分

    • 5.1

      func cutImage(image: UIImage, cutRect: CGRect) -> UIImage {
      
         UIGraphicsBeginImageContextWithOptions(cutRect.size, false, 0.0)
         // 獲取上下文
         let context = UIGraphicsGetCurrentContext()
         // 轉換座標原點到左下角
         CGContextTranslateCTM(context, 0.0, cutRect.size.height)
         CGContextScaleCTM(context, 1.0, -1.0)
         // 設定繪製模式
         CGContextSetBlendMode(context, .Copy)
         // 繪圖
         CGContextDrawImage(context, cutRect, image.CGImage)
         let image = UIGraphicsGetImageFromCurrentImageContext()
         UIGraphicsEndImageContext()
         return image
      }
    • 5.2

      func cutImage(image: UIImage, cutRect: CGRect) -> UIImage {
      
         UIGraphicsBeginImageContextWithOptions(cutRect.size, false, 0.0)
         // 獲取上下文
         let context = UIGraphicsGetCurrentContext()
         image.drawInRect(cutRect)
         let image = UIGraphicsGetImageFromCurrentImageContext()
         UIGraphicsEndImageContext()
         return image
      }
  6. 將顏色繪製為圖片

    • 6.1

      func imageFromColor(color: UIColor, size: CGSize) -> UIImage {
         UIGraphicsBeginImageContextWithOptions(size, false, 0.0)
         let rect = CGRect(origin: CGPointZero, size: size)
         color.setFill()
         UIRectFill(rect)
      
         let image = UIGraphicsGetImageFromCurrentImageContext()
         UIGraphicsEndImageContext()
         return image
      }
    • 6.2

      func imageFromColor(color: UIColor, size: CGSize) -> UIImage {
         UIGraphicsBeginImageContextWithOptions(size, false, 0.0)
         let rect = CGRect(origin: CGPointZero, size: size)
      //        color.setFill()
      //        UIRectFill(rect)
      
         let context = UIGraphicsGetCurrentContext()
         CGContextSetFillColorWithColor(context, color.CGColor)
         CGContextFillRect(context, rect)
         let image = UIGraphicsGetImageFromCurrentImageContext()
         UIGraphicsEndImageContext()
         return image
      }

如果你覺得平時很少接觸過Quartzs 2D來繪圖, 可能看上面的程式碼不是很明白, 如果想要更清楚, 建議閱讀相關的繪圖教程, 同時下一篇可能會簡單分享一下使用Quartzs 2D來繪圖的相關知識, 歡迎關注