快捷導(dǎo)航

Swift操作Quartz 2D進(jìn)行簡(jiǎn)單的繪圖與坐標(biāo)變換的教程

更新時(shí)間：2016年04月18日 14:15:51 作者：老初

這篇文章主要介紹了Swift操作Quartz 2D進(jìn)行簡(jiǎn)單的繪圖與坐標(biāo)變換的教程,Quartz 2D是Core Graphics框架中的一個(gè)重要組件,經(jīng)常被Mac OS或和iOS開(kāi)發(fā)者用來(lái)繪圖,需要的朋友可以參考下

Quartz 2D簡(jiǎn)介
Quartz 2D是蘋(píng)果公司開(kāi)發(fā)的一個(gè)二維圖形繪制引擎，同時(shí)支持iOS和Mac系統(tǒng)。

它是一套基于C的API框架，提供了低級(jí)別、輕量級(jí)、高保真度的2D渲染。它能完成的工作有：

繪制圖形 : 線條\三角形\矩形\圓\弧等
繪制文字
繪制\生成圖片(圖像)
讀取\生成PDF
截圖\裁剪圖片
自定義UI控件
…

Quartz 2D進(jìn)行繪圖
iOS繪圖技術(shù)主要有UIKit,Quartz 2D,Core Animation和OpenGL ES。我們平常對(duì)UIKit應(yīng)該不陌生,而Quartz 2D與UIKit的一個(gè)區(qū)別是:
Quartz 2D的坐標(biāo)原點(diǎn)在左下角,而UIKit的坐標(biāo)原點(diǎn)在左上角。
在開(kāi)始前作下準(zhǔn)備工作:創(chuàng)建一個(gè)新的Cocoa Touch Class,繼承自UIView,然后去StoryBoard把view視圖關(guān)聯(lián)下新創(chuàng)建的類。

1.填充和描邊
重寫(xiě)繪圖方法drawRect(),添加代碼:

復(fù)制代碼代碼如下:

 override func drawRect(rect: CGRect) {

     //填充背景

     UIColor.brownColor().setFill()

     //填充矩形

     UIRectFill(rect)

     UIColor.whiteColor().setStroke()

     //矩形描邊

     let frame = CGRectMake(10, 24, 100, 300)

     UIRectFrame(frame)

}

運(yùn)行效果:

2016418140921390.jpg (635×1178)

2.繪制三角形
確定三個(gè)點(diǎn)就能繪制出三角形,當(dāng)然其他的圖形(如矩形)也是類似。
在drawRect()里添加代碼:

復(fù)制代碼代碼如下:

override func drawRect(rect: CGRect) {

    let context = UIGraphicsGetCurrentContext()

    //繪制起始點(diǎn)

    CGContextMoveToPoint(context, 120, 104)

    //從起始點(diǎn)到這一點(diǎn)

    CGContextAddLineToPoint(context, 150, 204)

    CGContextAddLineToPoint(context, 200, 104)

    //閉合路徑

    CGContextClosePath(context)

    UIColor.blackColor().setStroke()

    UIColor.greenColor().setFill()

    //繪制路徑

    CGContextDrawPath(context, CGPathDrawingMode.FillStroke)

}

運(yùn)行效果:

2016418141013117.jpg (644×1178)

依此類推,大家可以試試怎么去畫(huà)長(zhǎng)方形,正方形和不規(guī)則多邊形。

3.繪制圖片和文字
首先準(zhǔn)備一張圖片放入工程中,注意不要放在Assets.xcassets文件夾下,因?yàn)檫@里尋找的路徑是在工程文件夾。而如果把圖片放在Assets.xcassets文件夾下,就要使用另外的一種方法。
在drawRect()里添加代碼:

復(fù)制代碼代碼如下:

override func drawRect(rect: CGRect) {

    //繪制圖片和文字

    //這種方式添加圖片需要把圖片放到根目錄下,而不是Assets.xcassets下

    let imagePath = NSBundle.mainBundle().pathForResource("頭像004", ofType: "jpg")

    let image = UIImage(contentsOfFile: imagePath!)

    //具體位置根據(jù)你的圖片來(lái)調(diào)整

    image?.drawInRect(CGRectMake(100,100, 200, 200))

    let title = "頭像"

    let font = UIFont.systemFontOfSize(44)

    let attr = [NSFontAttributeName:font]

    title.drawAtPoint(CGPointMake(100, 20), withAttributes: attr)

}

運(yùn)行效果:

2016418141032549.jpg (642×1185)

Quartz 2D中的坐標(biāo)變換
注意：坐標(biāo)變換操作必須要在添加圖形之前，如果設(shè)置在添加圖形之后的話會(huì)無(wú)效。

我們先畫(huà)一個(gè)正方形做完參考：

復(fù)制代碼代碼如下:

override func drawRect(rect: CGRect) {

    let context = UIGraphicsGetCurrentContext()

    CGContextSetLineWidth(context, 2.0)

    CGContextSetStrokeColorWithColor(context, UIColor.redColor().CGColor)

    let rectangle = CGRectMake(125, 50, 50, 50)

    CGContextAddRect(context, rectangle)

    CGContextStrokePath(context)

}

2016418141110905.png (299×299)

1、平移
func CGContextTranslateCTM(c: CGContext?, _ tx: CGFloat, _ ty: CGFloat)
該方法相當(dāng)于把原來(lái)位于 (0, 0) 位置的坐標(biāo)原點(diǎn)平移到 (tx, ty) 點(diǎn)。在平移后的坐標(biāo)系統(tǒng)上繪制圖形時(shí)，所有坐標(biāo)點(diǎn)的 X 坐標(biāo)都相當(dāng)于增加了 tx，所有點(diǎn)的 Y 坐標(biāo)都相當(dāng)于增加了 ty。

復(fù)制代碼代碼如下:

override func drawRect(rect: CGRect) {

    let context = UIGraphicsGetCurrentContext()

    CGContextSetLineWidth(context, 2.0)

    CGContextSetStrokeColorWithColor(context, UIColor.redColor().CGColor)

    CGContextTranslateCTM(context, -50, 25) // 向左向下平移

    let rectangle = CGRectMake(125, 50, 50, 50) 

    CGContextAddRect(context, rectangle)

    CGContextStrokePath(context)

}

2016418141132007.png (599×297)

2、縮放
func CGContextScaleCTM(c: CGContext?, _ sx: CGFloat, _ sy: CGFloat)
該方法控制坐標(biāo)系統(tǒng)在水平方向和垂直方向上進(jìn)行縮放。在縮放后的坐標(biāo)系統(tǒng)上繪制圖形時(shí)，所有點(diǎn)的 X 坐標(biāo)都相當(dāng)于乘以 sx 因子，所有點(diǎn)的 Y 坐標(biāo)都相當(dāng)于乘以 sy 因子。

復(fù)制代碼代碼如下:

override func drawRect(rect: CGRect) {

    let context = UIGraphicsGetCurrentContext()

    CGContextSetLineWidth(context, 2.0)

    CGContextSetStrokeColorWithColor(context, UIColor.redColor().CGColor)    

    CGContextScaleCTM(context, 0.5, 1)

    let rectangle = CGRectMake(125, 50, 50, 50)

    CGContextAddRect(context, rectangle)

    CGContextStrokePath(context)

}

2016418141152595.png (598×297)

3、旋轉(zhuǎn)
func CGContextRotateCTM(c: CGContext?, _ angle: CGFloat)
該方法控制坐標(biāo)系統(tǒng)旋轉(zhuǎn) angle 弧度。在縮放后的坐標(biāo)系統(tǒng)上繪制圖形時(shí)，所有坐標(biāo)點(diǎn)的 X、Y 坐標(biāo)都相當(dāng)于旋轉(zhuǎn)了 angle弧度之后的坐標(biāo)。

復(fù)制代碼代碼如下:

override func drawRect(rect: CGRect) {

    let context = UIGraphicsGetCurrentContext()

    CGContextSetLineWidth(context, 2.0)

    CGContextSetStrokeColorWithColor(context, UIColor.redColor().CGColor)

    CGContextRotateCTM(context, CGFloat(M_PI_4))

    let rectangle = CGRectMake(125, 50, 50, 50)

    CGContextAddRect(context, rectangle)

    CGContextStrokePath(context)

}

2016418141215224.png (598×299)

注意：旋轉(zhuǎn)的時(shí)候，是整個(gè) layer 都旋轉(zhuǎn)了，所以 layer 看起來(lái)應(yīng)該是這樣的：

2016418141233334.png (456×380)

這個(gè)時(shí)候若想移動(dòng) view ，就應(yīng)該按照這個(gè)旋轉(zhuǎn)過(guò)的坐標(biāo)系來(lái)移動(dòng)：

復(fù)制代碼代碼如下:

override func drawRect(rect: CGRect) {

    let context = UIGraphicsGetCurrentContext()

    CGContextSetLineWidth(context, 2.0)

    CGContextSetStrokeColorWithColor(context, UIColor.redColor().CGColor)

    CGContextRotateCTM(context, CGFloat(M_PI_4))

    CGContextTranslateCTM(context, 0, -100) // 在新坐標(biāo)系中向上移動(dòng)100點(diǎn)，視圖上看起來(lái)像是向右向上都移動(dòng)了

    let rectangle = CGRectMake(125, 50, 50, 50)

    CGContextAddRect(context, rectangle)

    CGContextStrokePath(context)

}

2016418141250529.png (597×298)