Core Graphics之Patterns

本文基于Swift 2.0,看完,你將會:

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

新建一個Swift的Single View Application -> 新建一個名為CoolPatternView的Swift文件,繼承自UIView。

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

Snip20160413_4.png

在CoolPatternView里面添加radians方法,用來將角度轉(zhuǎn)為弧度,后面會用到:

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

現(xiàn)在,可以在drawRect方法里面畫畫了!

給View繪制一個背景

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

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

Snip20160413_5.png

用放大鏡查看,可以看到一個簡單的圖案:

GripZoomed.jpg

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

從最終的實現(xiàn)效果來看,可以通過獲取View的尺寸,計算在View的x軸和y軸上有多少個矩形(有2圓圈),通過代碼循環(huán)在View上放置圓圈圖案。

這樣做是復(fù)雜、低效的,Core Graphics提供了方法來繪制重復(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類型,定義的方法有2種,而且要注意:必須放在class外部。
1、

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

2、

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

這里用方法1實現(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)
}

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

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

沒有以上代碼,運行的代碼將看不到繪制的圖案。

代碼下載
參考資料

最后編輯于
?著作權(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)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,187評論 25 708
  • 在前面一篇文章中,我們分析了Android應(yīng)用程序窗口的繪圖表面的創(chuàng)建過程。Android應(yīng)用程序窗口的繪圖表面在...
    一個不掉頭發(fā)的開發(fā)閱讀 5,017評論 0 14
  • 最好的愛情是,我剛好成熟你剛好沉穩(wěn) 文/轉(zhuǎn) 愛一個人啊,從來都不是虛與委蛇,而是腳踏實地的。 01 很久之前,我以...
    Lancy藍(lán)汐閱讀 249評論 0 0
  • 第一次用著個軟件寫東西,這感覺就像是從eclipse轉(zhuǎn)到AS一樣的不習(xí)慣,就當(dāng)是本人學(xué)習(xí)的日常吧,不用說,排版我自...
    破音男閱讀 252評論 0 1
  • 自己學(xué)校在很遠(yuǎn)的郊區(qū),離市里差不多兩個小時的車程,無奈的是今天回家的人很多,我只能在公交車上站一路回家。 ...
    九月sunshine閱讀 297評論 0 0

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