本文基于Swift 2.0，看完，你將會(huì)：

• 1、對(duì)繪制arc和shadow，更加得心應(yīng)手
• 2、學(xué)會(huì)使用Core Graphics內(nèi)置的繪圖功能，繪制重復(fù)圖案

新建一個(gè)Swift的Single View Application -> 新建一個(gè)名為CoolPatternView的Swift文件，繼承自UIView。

為了實(shí)時(shí)看到繪制的View的效果，CoolPatternView實(shí)現(xiàn)@IBDesignable，然后在Storyboard里面設(shè)置隨便一個(gè)View的Class為CoolPatternView，如圖所示：

Snip20160413_4.png

在CoolPatternView里面添加radians方法，用來(lái)將角度轉(zhuǎn)為弧度，后面會(huì)用到：

func radians(degrees:Double) -> Double {
        return degrees * M_PI / 180
    }

現(xiàn)在，可以在drawRect方法里面畫(huà)畫(huà)了！

給View繪制一個(gè)背景

let ctx = UIGraphicsGetCurrentContext()
let bgColor = UIColor(red: 0.0, green: 0.0, blue: 0.15, alpha: 1.0)
        
CGContextSetFillColorWithColor(ctx, bgColor.CGColor)
CGContextFillRect(ctx, self.bounds)

效果如圖所示：

Snip20160413_6.png

這里要實(shí)現(xiàn)的最終效果是這樣子的：

Snip20160413_5.png

用放大鏡查看，可以看到一個(gè)簡(jiǎn)單的圖案：

GripZoomed.jpg

如圖中矩形虛線所示，可以看到矩形中有2個(gè)圖案，呈對(duì)角線布局，一個(gè)在左上角，一個(gè)在右下角，這2個(gè)小圖案是帶陰影的圓圈。

從最終的實(shí)現(xiàn)效果來(lái)看，可以通過(guò)獲取View的尺寸，計(jì)算在View的x軸和y軸上有多少個(gè)矩形（有2圓圈），通過(guò)代碼循環(huán)在View上放置圓圈圖案。

這樣做是復(fù)雜、低效的，Core Graphics提供了方法來(lái)繪制重復(fù)圖案，易用并且高效。

繪制代碼如下：

let patternSpace = CGColorSpaceCreatePattern(nil)
        
CGContextSetFillColorSpace(ctx, patternSpace)
        
var callbacks:CGPatternCallbacks = CGPatternCallbacks(version: 0, drawPattern: drawPattern, releaseInfo: nil)
        
let pattern = CGPatternCreate(nil,
                              rect,
                              CGAffineTransformIdentity,
                              24,
                              24,
                              CGPatternTiling.ConstantSpacing,
                              true,
                              &callbacks)
var alpha:CGFloat = 1.0
        
CGContextSetFillPattern(ctx, pattern, &alpha)
CGContextFillRect(ctx, self.bounds)

這里要注意下callbacks里面的drawPattern參數(shù)，繪制工作就在這里面操作，drawPattern是CGPatternDrawPatternCallback類(lèi)型，定義的方法有2種，而且要注意：必須放在class外部。
1、

//繪制帶陰影圓圈
func drawPattern(info: UnsafeMutablePointer<Void>, context: CGContextRef?) {
        
}

2、

//繪制帶陰影圓圈
let drawPattern: CGPatternDrawPatternCallback = { (_, context) in
    
}

這里用方法1實(shí)現(xiàn)，代碼如下：

func drawPattern(info: UnsafeMutablePointer<Void>, context: CGContextRef?) {
    let dotColor = UIColor(colorLiteralRed: 0.0, green: 0.0, blue: 0.07, alpha: 1.0)
    let shadowColor = UIColor(colorLiteralRed: 1.0, green: 1.0, blue: 1.0, alpha: 0.1)
    
    CGContextSetFillColorWithColor(context, dotColor.CGColor)
    CGContextSetShadowWithColor(context, CGSizeMake(0, 1), 1, shadowColor.CGColor)
    
    CGContextAddArc(context, 3, 3, 4, 0, CGFloat(radians(360)), 0)
    CGContextFillPath(context)
    
    CGContextAddArc(context, 16, 16, 4, 0, CGFloat(radians(360)), 0)
    CGContextFillPath(context)
}

上面代碼中使用顏色來(lái)繪制模式單元格。必須設(shè)置基本的模式顏色空間為nil，以確保Quartz使用繪制路徑指定的顏色來(lái)繪制。如drawRect中以下代碼所示：

let patternSpace = CGColorSpaceCreatePattern(nil)
        
// 在模式顏色空間中設(shè)置填充顏色
CGContextSetFillColorSpace(ctx, patternSpace)

沒(méi)有以上代碼，運(yùn)行的代碼將看不到繪制的圖案。

代碼下載
參考資料