Swift中CGContextRef畫圖用法

Graphics Context是圖形上下文,可以將其理解為一塊畫布,我們可以在上面進行繪畫操作,繪制完成后,將畫布放到我們的view中顯示即可,view我們可以把它看作是一個畫框.下面是我學習的時候小Demo,給大家分享一下,希望對大家在這方便學習有所幫助,具體實現過程我就直接貼出代碼, 代碼中我寫了注釋一目了然.下面我們先看部分的效果圖:

效果圖_1.png

代碼實現:
① 文字

 let magentaColor = UIColor.greenColor()
    let myString:NSString = "我的劍就是你的劍"
    let helveticaBold = UIFont.init(name: "HelveticaNeue-Bold", size: 30.0);
    myString.drawAtPoint(CGPoint(x: 20, y: 100), withAttributes:[NSFontAttributeName: helveticaBold!,  NSForegroundColorAttributeName: magentaColor])

② 直線

 // 獲取畫布
    let context = UIGraphicsGetCurrentContext()
    // 線條顏色
    CGContextSetStrokeColorWithColor(context, UIColor.redColor().CGColor)
    // 設置線條平滑,不需要兩邊像素寬
    CGContextSetShouldAntialias(context, false)
    // 設置線條寬度
    CGContextSetLineWidth(context, 2.0)
    // 設置線條起點
    CGContextMoveToPoint(context, 30, 200)
    // 線條結束點
    CGContextAddLineToPoint(context, 150, 200)
    // 開始畫線
    CGContextStrokePath(context)

③ 矩形

///  無框的
    // 獲取畫布
    let context = UIGraphicsGetCurrentContext()
    // 設置矩形填充顏色: 藍色
    CGContextSetRGBFillColor(context, 1.0, 0.0, 0.0, 1.0)
    //填充矩形
    CGContextFillRect(context, CGRect(x: 30, y: 260, width: 100, height: 60))
    //執行繪畫
    CGContextStrokePath(context);
    
    /// 有框的
    // 矩形填充顏色:紅色
    CGContextSetRGBFillColor(context, 1.0, 0.0, 0.0, 1.0)
    // 填充矩形
    CGContextFillRect(context, CGRect(x: 30, y: 350, width: 100, height: 60))
    // 畫筆顏色:黑色
    CGContextSetRGBStrokeColor(context, 0, 0, 0, 1)
    // 畫筆線條粗細
    CGContextSetLineWidth(context, 1.0)
    // 畫矩形邊框
    CGContextAddRect(context,CGRect(x: 30, y: 350, width: 100, height: 60))
    // 執行繪畫
    CGContextStrokePath(context)

④ 圓

// 獲取畫布
    let context = UIGraphicsGetCurrentContext()
    // 畫圓
    CGContextAddEllipseInRect(context, CGRectMake(50,420,100,100))
    // 畫筆顏色
    CGContextSetRGBStrokeColor(context, 0.3, 0.7, 0, 1.0)
    // 關閉路徑
    CGContextStrokePath(context)

⑤ 扇形與橢圓

// 獲取畫布
    let context = UIGraphicsGetCurrentContext()
    
    //畫扇形,也就畫圓,只不過是設置角度的大小,形成一個扇形
    CGContextSetFillColorWithColor(context, UIColor.brownColor().CGColor)//填充顏色
    //以10為半徑圍繞圓心畫指定角度扇形
    CGContextMoveToPoint(context, 160, 180)
    CGContextAddArc(context, 180, 180, 30, 120, 200, 2)
    CGContextClosePath(context);
    CGContextDrawPath(context, CGPathDrawingMode.FillStroke) //繪制路徑
    
    //畫橢圓
    CGContextAddEllipseInRect(context, CGRectMake(200, 230, 100, 30)) //橢圓
    CGContextDrawPath(context, CGPathDrawingMode.FillStroke)

⑥ 貝塞爾曲線

// 獲取畫布
    let context = UIGraphicsGetCurrentContext()
    // 二次曲線
    CGContextMoveToPoint(context, 240, 380) // 設置path的起點
    CGContextAddQuadCurveToPoint(context, 200, 300, 240, 420) //設置貝塞爾曲線的控制點坐標和終點坐標
    
    CGContextStrokePath(context)
    //三次曲線函數
    CGContextMoveToPoint(context, 200, 300) //設置Path的起點
    CGContextAddCurveToPoint(context,250, 280, 250, 400, 280, 300) //設置貝塞爾曲線的控制點坐標和控制點坐標終點坐標
    CGContextStrokePath(context)

⑦ 圖片添加水印
效果圖:

效果圖_2.png

代碼實現部分

 override func drawRect(rect: CGRect) {

 imageView.image = UIImage(named:"bg")?
      .waterMarkedImage("學習就要學會分享", corner: .TopLeft,
                        margin: CGPoint(x: 20, y: 20),
                        waterMarkTextColor: UIColor.blackColor(),
                        waterMarkTextFont: UIFont.systemFontOfSize(20),
                        backgroundColor: UIColor.clearColor())
    imageView.frame = CGRect(x: 100, y: 100, width: 200, height: 300)
    self.addSubview(imageView)
}

// 擴展UIImage
extension UIImage{
  
  //水印位置枚舉
  enum WaterMarkCorner{
    case TopLeft
    case TopRight
    case BottomLeft
    case BottomRight
  }
  
  //添加水印方法
  func waterMarkedImage(waterMarkText:String, corner:WaterMarkCorner = .BottomRight,
                        margin:CGPoint = CGPoint(x: 20, y: 20),
                        waterMarkTextColor:UIColor = UIColor.whiteColor(),
                        waterMarkTextFont:UIFont = UIFont.systemFontOfSize(20),
                        backgroundColor:UIColor = UIColor.clearColor()) -> UIImage{
    
    let textAttributes = [NSForegroundColorAttributeName:waterMarkTextColor,
                          NSFontAttributeName:waterMarkTextFont,
                          NSBackgroundColorAttributeName:backgroundColor]
    let textSize = NSString(string: waterMarkText).sizeWithAttributes(textAttributes)
    var textFrame = CGRectMake(0, 0, textSize.width, textSize.height)
    
    let imageSize = self.size
    switch corner{
    case .TopLeft:
      textFrame.origin = margin
    case .TopRight:
      textFrame.origin = CGPoint(x: imageSize.width - textSize.width - margin.x, y: margin.y)
    case .BottomLeft:
      textFrame.origin = CGPoint(x: margin.x, y: imageSize.height - textSize.height - margin.y)
    case .BottomRight:
      textFrame.origin = CGPoint(x: imageSize.width - textSize.width - margin.x,
                                 y: imageSize.height - textSize.height - margin.y)
    }
    
    // 開始給圖片添加文字水印
    UIGraphicsBeginImageContext(imageSize)
    self.drawInRect(CGRectMake(10, 0, imageSize.width, imageSize.height))
    NSString(string: waterMarkText).drawInRect(textFrame, withAttributes: textAttributes)
    
    let waterMarkedImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    
    return waterMarkedImage
  }
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容